前端工程化——其他打包工具

最新推荐文章于 2025-04-17 10:27:39 发布

Jelly-JK

最新推荐文章于 2025-04-17 10:27:39 发布

阅读量290

点赞数

分类专栏：前端工程化文章标签： js javascript yarn

本文链接：https://blog.youkuaiyun.com/weixin_44789416/article/details/112888934

版权

前端工程化专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨前端工程化的打包工具Rollup和Parcel。Rollup是一款专注于ESM的高效打包器，强调简洁和tree-shaking，但不支持HMR。文章详细介绍了Rollup的配置和插件使用，包括加载NPM模块、CommonJS模块以及代码拆分。而Parcel则是一款零配置的打包器，能自动处理资源导入和HMR，构建速度快，但生态相比Webpack尚有不足。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Rollup

概述

仅仅是一款ESM的合并、打包器，并无奇他额外的类似于webpack的功能
更为小巧
Rollup 中并不支持类似 HMR 这种高级特性
Rollup 并不是要与 Webpack 全面竞争
提供一个充分利用ESM各项特性的高效打包器

快速上手

命令行方式

安装yarn add rollup --dev
使用 yarn rollup，即不传递任何参数的情况下，会出现帮助信息
yarn rollup ./src/index.js --format iife --file dist/bundle.js
- 第一个参数是入口文件
- 第二个参数是输出格式，上述采用的是自执行函数的格式
- 第三个参数是输出的文件路径
输出的结果只会保留用到的部分，会自动使用tree-shaking的方式打包代码，十分简洁

配置文件方式

新建rollup.config.js文件

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

运行yarn rollup --config来实现以配置文件的形式启动，还可以后面指定不同环境的入口文件
- yarn rollup --config rollup.prod.js
- yarn rollup --config rollup.dev.js

使用插件

加载其他类型的文件
导入 CommonJS 模块
编译 ECMAScript 新特性
Rollup 支持使用插件的方式扩展
插件是Rollup唯一扩展途径，而webpack有loader，plugin，minimizer三种

使用：

以导入json文件的插件为例
- 安装：yarn add rollup-plugin-json --dev
- 配置文件中进行配置

// rollup.config.js
import json from 'rollup-plugin-json'  // 默认导出的是一个函数

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json()  // 将模块暴露的方法函数的执行结果放进数组中
  ]
}


// index.js
// 导入模块成员，默认情况下rollup只能用路径的方式导入模块，并不能像webpack那样用名称导入node_module中的npm模块
import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json'

// 使用模块成员
const msg = messages.hi

log(msg)

log(name)
log(version)

没有用到的属性会被tree-shaking去掉，自动具有tree-shaking功能

Rollup 加载NPM 模块

导入模块成员，默认情况下rollup只能用路径的方式导入模块，并不能像webpack那样用名称导入node_module中的npm模块
安装rollup-plugin-node-resolve

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

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

// index.js
import _ from 'lodash-es'  // 可以使用名称的方式导入了

Rollup 加载 CommonJS 模块

rollup默认只支持ESM模块的打包，不支持CommonJS模块
但是目前还是有很多模块使用CommonJS语法来导出成员所以需要配置插件来解决这个问题
安装rollup-plugins-commonjs，在配置文件中配置，然后就能识别引入以modul.exports导出的使用CommJS模块了

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

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

Rollup 代码拆分

要使用代码拆分就不能使用iife的导出方式，得用amd或者CommonJS
需要在配置文件中奖输出方式使用amd，输出目录浏览器环境使用AMD
并且也不能使用file方式来配置，因为输出文件不是一个，所以得配置dir设置输出目录
- 这样就会在dir设置的dist目录里面输出打包后的文件和引入的amd格式的文件了

import('./logger').then(({ log }) => {
 log('code splitting~')
})

export default {
import commonjs from 'rollup-plugin-commonjs'
t/bundle.js',
 // format: 'iife'
 dir: 'dist',
 format: 'amd'
 }
}

Rollup 多入口打包

将输入路径以数组或者对象的形式进行定义
多入口打包会自动提取公共模块，所以不能使用iife了，需要改成amd
然后运行yarn rollup --config进行打包

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

对于AMD输出格式的文件我们不能直接引用到页面上，而是需要借助实现AMD标准的库去加载

手动在dist文件中创建index.html
使用require.js库来加载
data-main来指定引入的文件路径

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- AMD 标准格式的输出 bundle 不能直接引用 -->
  <!-- <script src="foo.js"></script> -->
  <!-- 需要 Require.js 这样的库 -->
  <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
</body>
</html>

Rollup选用原则

Rollup的优势
- 输出结果更加扁平
- 自动移除未引用代码（tree-shaking）
- 打包结果依然完全可读，和手写的代码一致，可读性强
缺点
- 加载非ESM的第三方模块比较复杂，需要使用插件
- 模块最终都被打包到一个函数中，无法实现HMR
- 浏览器环境中，代码拆分功能依赖AMD库
选用原则
- 开发应用程序，选择webpack、
  - 因为需要大量引入第三方模块，同时需要HMR来提升开发效率
  - 如果项目过大还需要涉及到分包
  - 上述这些rollup都会欠缺
- 如果我们正在开发一个框架或者类库就选择使用rollup
  - 开发类库时很少用到三方模块
  - vue和react框架在开发时也都是用的rollup
- 并不是绝对的选择标准，而是经验法则
- Webpack大而全，Rollup小而美

parcel

零配置的前端应用打包器

使用
- 首先初始化一个包管理系统yarn init -y
- 安装 yarn add parcel-bundler --dev
- 和webpack不同的是parcel建议使用html文件作为打包入口
- 运行
yarn parcel src/index.html 参数是入口文件路径
功能
- 不仅会打包文件还会启动一个相当于webpack中devServer一样的工具，并具有自动刷新功能
- 如果想要使用HMR（自动热替换）而不是自动刷新，那么他也支持使用module的accept方法来实现
  - 和webpack不同的是，webpack支持两个参数，第二个参数是函数用来执行热替换后的行为
  - 而parcel中的module中的accept方法只能接受一个参数，也就是为哪个文件执行热替换
- 自动安装依赖
  - 我们只管在入口文件中导入第三方包，parcel会自动帮我们导入用到的依赖
- 加载其他类型的资源模块
  - 可以直接导入css样式文件或者图片文件，不需要安装额外的loader和插件
- 支持动态导入
  - 只管用即可，内部会自动拆分代码，这个动态导入的代码只有在用到的时候才会请求
```
// 动态导入jQuery
import ('jquery').then( $ => {
    $(document.body).append('<h1>htllo parcel</h1>')
})
```
```
- 以生产模式进行打包
  - yarn parcel build src/index.html
  - 相同体量的代码parcel会比webpack效率高很多
    - 因为parcel是以多线程进行工作的，充分发挥了多核CPU的性能
    - webpack中也可以使用happypack的插件来实现多线程打包
```
- 打包的结果都会被压缩，并且样式代码也都会被提取到单独的文件中
优点
- 由于webpack配置过于繁琐，所以parcel应运而生
- 实现了完全零配置打包
- 构建速度快
与webpack对比
- webpack生态更好
- webpack越来越好用
- 对parcel的学习更多的是保持对新技术的敏感度，了解技术走向，目前广泛应用的还是webpack