学习笔记（十一）——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快很多