1. 初始化项目
创建Rollup文件夹,并执行指令npm init -y。如图:
2. 安装插件
// 执行指令
npm install rollup @babel/core rollup-plugin-babel @babel/preset-env -D
3. 根目录下创建src文件夹,并创建index.js文件
// 业务代码...
4. 根目录下创建rollup.config.js文件(默认的文件名,会首先自动找该文件)
import babel from 'rollup-plugin-babel' //引入babel编译代码
export default {
input: './src/index.js', // 打包的入口文件
output: {// output可以是数组,配置打包多种模式
file: 'dist/vue.js', // 打包的出口,会自动生成dist文件夹,并在dist创建vue.js文件,打包好的代码会放在里面vue.js里
format: 'umd', // 常见的格式,IIFE ESM CJS UMD
name: 'Vue', // umd模块需要配置name,会讲导出的模块挂载到window上;若在node中使用则选cjs,若只是打包,像webpack里导入 则esm模块。若是HTML中使用script引入,则选 iife umd,
sourcemap: true,// 可进行源代码的调试,打包后生成vue.js.map文件
},
plugins: [
babel({
exclude: 'node_modules/**' // 不需要编译的文件模块
})
]
}
5. package.json配置指令
6. 开始打包
// 执行npm run dev