学习笔记（十一）——Webpack之外的其他打包工具

Webpack之外的其他打包工具

Rollup

Rollup与webpack非常类似，但是比webpack要小巧的多，只是一款ES Module的打包器

快速上手
- 在要进行打包的前端工程目录下，执行yarn add rollup --dev 安装
- 执行 yarn rollup .\src\index.js --format iife --file dist/index.js 进行打包，这里的.\src\index.js是打包入口文件，--format iife 参数指定打包模式，--file dist/index.js 参数指定输出目录
配置文件
- rollup默认的配置文件是rollup.config.js，也可以使用--config参数指定不同的配置文件
- 配置文件通过export default {} 导出配置选项
  - input：指定入口文件
  - output：指定输出参数
    - file：指定输出文件名及路径
    - format：指定输出格式
  - plugins：插件数组

使用插件

插件是rollup唯一扩展的途径

以 rollup-plugin-json 插件为例

// rollup.config.js
import json from 'rollup-plugin-json'

export default {
    input: './src/index.js',
    output: {
        file: 'dist/index.js',
        format: 'iife'
    },
    plugins: [
        json()
    ]
}

加载npm模块

rollup默认只能导入本地模块，而无法像webpack一样直接使用模块名称导入node_modules下的npm模块，官方提供了rollup-plugin-node-resolve插件来加载npm模块
加载CommonJS模块

rollup设计上默认只能处理ES Module模块，为了兼容使用CommonJS模块，可以使用rollup-plugin-commonjs插件
代码拆分

rollup最新版中已经开始支持代码拆分功能，即使用import()函数动态导入模块
- code splitting的输出format不能使用iife，必须使用amd
- code splitting需要指定多个输出文件，不能使用output.file配置指定单个输出文件，需要使用output.dir配置指定输出目录
多入口打包
- 多入口打包可以通过input配置接收一个由多个入口文件组成的数组，或者像webpack一样使用一个对象的多个属性配置多个打包的入口
- 多入口打包会进行代码拆分，因此输出的format不能使用iife，需要使用amd
总结
- 优点
  - 输出结果更加扁平（多个模块合并输出到一个函数中），执行效率更高
  - 自动使用tree shaking移除未引用的代码
  - 打包结果依然可读
- 缺点
  - 加载非ES Module的模块非常复杂，需要依赖插件
  - 模块最终都被打包到一个函数中，无法使用HMR
  - 代码拆分使用AMD规范，浏览器环境中，需要依赖遵循AMD规范的requirejs加载拆分的代码
- 选用原则
  - 开发应用程序，需要依赖大量第三方模块，以及使用HMR等提升开发体验，使用webpack更加合适
  - 开发框架或库，可以使用rollup，大多数知名框架与库都在使用rollup打包

Parcel

零配置前端应用打包器，提供了傻瓜式的使用体验

yarn add parcel-bundler --dev 安装
parcel可以使用任意类型的文件作为入口文件，官方建议使用html文件作为入口文件
执行yarn parcel src/index.html 进行打包，会自动启动dev server
parcel支持HMR，在模块中使用module.hot.accept()处理js的热替换逻辑
parcel支持自动安装依赖，只要导入模块，保存后就会自动安装生效，不需要手动安装再重启dev server
parcel支持使用import()函数动态导入，并会进行代码拆分
使用yarn parcel build src/index.html来进行生产模式打包，相同体量的前端工程，parcel的打包速度比webpack快很多