其他打包工具

Rollup

Rollup 概述

Rollup与webpack类似，但Rollup更小巧，仅仅是一款ESM打包器 不支持HMR（热更新）等高级特性 Rollup目的不是要与webpack全面竞争，初衷是 提供一款充分利用ESM各种特性的高效打包器

Rollup 快速上手

安装

yarn add rollup --dev

打包命令参数：

yarn rollup ./src/index.js --format iife --file dist/bundle.js

--format 指明打包结果格式

--file 指明打包后输出文件

结果：

打包时，将文件按照模块依赖顺序进行拼接

且只保留用拿到的代码部分，自动采用treeShaking，对代码进行优化

Rollup 配置文件

根目录新建 rollup.config.js 文件

文件内采用ESM格式，默认导出一个配置对象:

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    }
}

配想项：

input: 指定打包的入口文件路径

output：指定打包后的输出相关配置
    
    file： 输出的文件路径和名称
    
    format：指定输出的格式
    

运行时需要通过 --config 参数指定配置文件路径，默认rollup不会读取配置文件的

yarn rollup --config ./rollup.config.js

Rollup 使用插件

• 编译ESMAScipt新特性
• 加载其他类型资源模块
• 导入commonjs模块

使用插件方式解决以上问题，且插件是rollup唯一扩展途径，

• rollup配置可以直接通过es module形式导入插件

导入的插件返回的是一个函数形式，此函数放入plugins配置中，且是插件函数的执行结果，而非函数

Rollup 加载 NPM 模块

Rollup设计上就只处理es module模块打包

通过 rollup-plugin-node-resolve 插件可以使用第三方模块（es module模块）

Rollup 加载 CommonJs 模块

通过 rollup-plugin-commonjs 加载 commonjs模块

Rollup 代码拆分 code spliting

通过Dynamic Imports动态导入形式，实现模块按需加载

如果使用代码拆分，则配置文件中的打包格式不能是iife，因为iife会把所有代码放到一个自执行函数中，无法拆分，需要切换到umd或者amd

导出时因为要code spliting，因此会导出多个文件，配置文件中输出配置不再使用file像是，设置dir属性（目录），且format设置为amd

Rollup 多入口打包

input入口修改为数组，或者对象key-value形式

Rollup 选用原则

rollup和webpack选用原则：

• rollup输出结果更加扁平，执行效率会高

• rollup自动移除未引用代码，tree shaking

• 打包结果依然完全可读，与源码接近一致

• 缺点：加载非ESM的第三方模块比较复杂，需要额外插件

• 缺点：模块最终都被打包的一个函数中，无法实现HMR

• 浏览器环境中，代码拆分功能依赖AMD库

• webpack大而全，rollup小而美

• 应用程序，建议webpack

• 类库/框架，建议rollup

Parcel

零配置的前端应用打包器

• 执行时需要传入一个打包入口，建议是html，原因是 html是浏览器渲染时的入口
• 支持HMR，module.hot
• 会自动启动dev server
• 会自动安装依赖
• 支持加载其他资源模块

生产模式

parcel build

parcel打包速度会比webpack快（多进程打包），webpack可以采用happypack实现