Rollup 是一個 JavaScript 模塊打包工具,可以將多個模塊打包成一個單獨文件。Vue 是一個流行的前端框架,也支持使用 Rollup 進行構建。
要使用 Rollup 構建 vue,需要先安裝所需的依賴,包括 rollup、rollup-plugin-vue 和 vue-template-compiler。其中 rollup-plugin-vue 可以將 .vue 文件轉換成 .js 文件,vue-template-compiler 可以編譯.vue 文件中的模板。
npm install rollup rollup-plugin-vue vue-template-compiler -D
接下來,需要創建 Rollup 配置文件 rollup.config.js,指定入口文件、輸出文件和需要使用的插件。以下是一個基本的配置示例:
import vue from 'rollup-plugin-vue'; import { terser } from 'rollup-plugin-terser'; export default { input: 'src/main.js', output: { file: 'dist/main.js', format: 'umd', name: 'MyVueApp' }, plugins: [ vue(), terser() ] };
其中,input 表示入口文件,output 表示輸出文件,format 表示輸出格式,這里使用 umd 格式,支持在瀏覽器、Node.js 和AMD 環境下使用。name 是生成的 UMD 模塊的名稱。
plugins 中的 vue 是 rollup-plugin-vue 插件,terser 是用來壓縮代碼的插件。在這個配置中,我們將會把 .vue 文件轉換成 .js 文件,并壓縮輸出的代碼。
創建好配置文件后,可以使用以下命令進行打包:
rollup -c
這里的 -c 表示使用 rollup.config.js 文件中的配置進行打包。
經過打包,會生成一個 dist/main.js 的文件,這就是我們打包后的 Vue 應用程序。