大前端 - 打包工具

概要

---

需求背景

• 新特性代码编译，将具备新特性的代码编译成能够兼容低版本环境的代码，如 ES6 => ES 5
• 模块化 JavaScript 打包
• 支持不同类型的资源模块

本质

解决的是前端整体的模块化，并不单指 JavaScript 模块化

功能

• 模块打包器（Module Bundler）
  • 解决模块 JS 打包问题
  • 可以将零散的 JS 代码整合打包到一个 JS 文件中
• 模块加载器（Loader）
  • 对于存在兼容问题的代码，可以通过引入对应的解析编译模块进行编译
• 代码拆分（Code Splitting）
  • 将应用中的代码按需求进行打包，避免因将所有的代码打包成一个文件而使得文件过大的问题
  • 可以将应用加载初期所需代码打包在一起，而其余的在后续执行中按需加载，实现增量加载或渐进加载
  • 可以避免出现文件过大或文件太碎的问题
• 资源模块（Asset Module）

Rollup

---

Rollup 作用与 Webpack 相似，是一款更为小巧的打包器。但同时，Rollup 仅仅是一款 ESM（ES Module） 打包器，并不支持类似 HMR 这种高级特性。Rollup 的初衷在于提供一个充分利用 ESM 各项特性的高效打包器。

Rollup 的打包结果相对于 Webpack，没有多余的引导代码和模块函数，只是将各模块的函数按引用顺序排列、合并打包到一起。并且，模块函数中未引用部分不会被一起打包到结果中。

安装

yarn add  rollup --dev

运行

// yarn rollup '打包入口文件' 
// --format   ==> 指定文件打包的格式
// --file   ==> 指定文件输出路径'
yarn  rollup ./src/index.js --format iife --file dist/bundle.js

配置

// rollup.config.js
export default {
    input: 'src/index.js', // 入口文件
    output: {
        file: 'dist/bundle.js', // 输出结果
        format: 'iife' // 输出格式
    }
}

插件

Rollup 唯一的扩展途径

// 安装插件模块
yarn add rollup-plugin-json --dev

// rollup.config.js 中引入插件函数
import json from 'rollup-plugin-json'

export default {
    plugins: [
        json()
    ]
}

加载 npm 模块

Rollup 无法像 Webpack 那样，直接通过 npm 或 yarn 添加功能模块，需要通过插件 rollup-plugin-node-resolve 来完成。

安装后，可以直接通过模块名来引用功能模块

// 安装
yarn add rollup-plugin-node-resolve --dev

// rollup.config.js 中引入插件函数
import resolve from 'rollup-plugin-node-resolve'

export default {
    plugins: [
        resolve()
    ]
}

// 引用
import _ from 'lodash-es' // 通过模块名引用 lodash-es

加载 CommonJS 模块

Rollup 默认不支持导入 CommonJS 模块，需要额外引入解析模块 rollup-plugin-commonjs

// 安装
yarn add rollup-plugin-commonjs --dev

export default {
    plugins: [
        commonjs()
    ]
}

代码拆分

// 配置 rollup.config.js
export default {
    input: 'src/index.js',
    output: {
        dir: 'dist', // 输出路径，分包不能打包到同一个文件，需指定为文件夹
        format: 'amd'
    }
}

// 动态导入 demo.js
import('./logger').then(({ log }) => {
    log('code splitting~')
})

// 执行命令 cmd
yarn  rollup --config

多入口打包

export default {
    input: {
        foo: 'src/index.js',
        bar: 'src/album.js'
    },
    output: {
        dir: 'dist', 
        // format: 'iife'
        format: 'amd' // 多入口打包时，会自动提取公用部分，所以不能使用自执行函数模式
    }
}

与 Webpack 对比

• Rollup 优势
  • 输出结果更加扁平
  • 会自动移除未引用代码
  • 打包结果依然完全可读
• Rollup 缺点
  • 加载非 ESM 的第三方模块比较复杂
  • 模块最终都被打包到一个函数中，无法实现 HMR
  • 浏览器环境中，代码拆分功能依赖 AMD 库

Parcel

---

概述

• 一款零配置的前端应用打包器
• 建议使用 html 文件作为打包入口
• 会自动安装任意导入的模块，无需手动配置
• 打包时会自动执行文件压缩
• 打包时会自动分离文件

安装

yarn add parcel-bundler --dev

使用

// 需要指定入口文件路径
yarn parcel src/index.html
// 生产模式
yarn parcel build src/index.html