Rollup打包与一些特殊的配置

Rollup简介

• Rollup是一个js的模块打包器，可将多个小的代码片段编译为完整的库和应用。
• 采用的是ES6版本js中的模块标准，使用更自由更简便，生成的代码更简洁

// 全局安装, Mac需加sudo
npm i -g rollup

// 本地项目安装
npm i rollup -D

配置与打包

1. 全局安装，在项目根目录下执行

rollup -i src/index.js -o dist/bundle.js -f es

3. 本地项目安装，在package.json的script字段中添加

"dev": "rollup -i src/index.js -o dist/bundle.js -f es"

指令说明：

• -i 指定需打包的文件，为--input缩写
• src/index.js是-i的参数，是打包入口文件
• -o 指定输出的文件，是--output.file或--file的缩写
• dist/bundle.js 是-o的参数，即输出文件
• -f 指定打包文件的格式，是--format缩写
• es是-f的参数，表示打包文件使用ES6模块规范

格式说明

支持的打包格式： amd(AMD标准)、cjs（commonjs标准）、es/esm（es模块标准）、iife（立即调用函数）、umd（支持所有格式）

复杂版打包

1. 多个入口脚本打包，依次写入文件名，并使用--dir指定输出目录

rollup  a.js  b.js  --dir  dist

2. 参数--format iife会把打包结果放在一个自动执行函数里

rollup main.js  --format iife

3. 使打包后代码最小化，使用参数--compact

rollup main.js --compact

或使用专门的工具uglifyjs

rollup main.js | uglifyjs -o  bundle.js

4. 使用配置文件（rollup.config.js）配置多个参数

export default {
    input: 'main.js',
    output: {
        file: 'bundle.js',
        format: 'es'
    }
}

再使用-c启动配置文件

rollup -c

5. 控制css是否拆分成多个文件 （rollup.config.js）

cssCodeSplit: false

6. 控制js是否拆分成多个文件，默认拆分，若想合并为指定数量可以使用以下配置———合并某文件夹下的js文件 （rollup.config.js）

     rollupOptions: {
       output: {
         manualChunks(id) {
           if (id.includes("src")) {
             // 把 src 文件里面的文件都打包到 src.js 中
             return "src";
           }
         },
       },
     },

7. 去除生产环境的console和debugger

    terserOptions:{
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }

转成commonjs模块，使用参数--format cjs

rollup main.js --fotmat cjs

commonjs与es6模块差异

1. commonjs输出一个值的拷贝，es6输出一个值的引用
2. commonjs运行时加载，es6编译时输出接口：
   • commonjs加载的是一个对象（即module.exports属性），只在脚本运行完才会生成
   • es6对外接口只是一种静态定义，在代码静态解析时就会完成
3. commonjs的require()是同步加载模块，es6的import是异步加载，有一个独立的模块依赖的解析阶段