前端Rollup模块打包器

147 阅读1分钟

1. 初始化项目

创建Rollup文件夹,并执行指令npm init -y。如图:

Snipaste_2021-08-27_23-53-21.png

2. 安装插件

// 执行指令
npm install rollup @babel/core rollup-plugin-babel @babel/preset-env -D

3. 根目录下创建src文件夹,并创建index.js文件

// 业务代码... 11111.png

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配置指令

2222.png

6. 开始打包

// 执行npm run dev

3333.png

7. 测试打包出来的js

4444.png