一. Rollup 一款小巧高效的 ES Module 打包器
项目网址:https://gitee.com/big-right-right/rollup-sample
# Rollup 一款小巧高效的 ES Module 打包器
默认支持 ESM 模块的打包
# 配置 rollup.config.js
1. 入口文件 input
2. 输出文件或文件夹 output
3. 插件 plugins - 插件是Rollup的唯一拓展方式
4. 加载非 ESM 规范的模块需要插件:
node_modules中的第三方模块 - '@rollup/plugin-node-resolve'
CommonJS 模块 - '@rollup/plugin-commonjs'
5. 能通过动态导入(import函数)的方式实现代码拆分
6. 配置多打包入口 和 输出目录
7. 对于使用了动态导入 或 多入口打包的情况,打包模式需要用 amd
而 amd 规范打包出来的入口js,在index.html中,需要引入 require.js 来加载:
data-main : 加载的入口文件
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js" data-main="main.js"></script>
# Rollup 特点
## Rollup 优点:
1. 输出结果更加扁平
2. 自动移除未引用代码(tree shaking)
3. 打包结果依然完全可读
## Rollup 缺点:
1. 模块最终被打包到一个函数中,无法实现 HMR
2. 加载非 ESM 的第三方模块比较复杂
3. 浏览器环境中,代码拆分功能依赖 AMD 库(代码拆分必须使用amd规范)
## Rollup 适用范围:
1. 开发应用程序 - 建议用 Webpack
2. 开发框架或类库 - 建议用 Rollup (vue react框架的开发都用的rollup)
# 使用步骤
cnpm install --global rollup
touch rollup.config.js
rollup.config.js 内容:
import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
/** @type {import('rollup').RollupOptions} */
const config = {
// input: './src/index.js', /* 单个打包入口文件 */
input: [ /* 多个打包入口文件 */
'./src/index.js',
'./src/album.js',
],
output: {
/* 单个打包输出文件 */
// file: 'dist/main.js',
// format: 'iife', // 有动态导入的模块时不能使用 iife模式 需使用 amd模式
/* 多个打包文件的输出目录 */
// 使用动态导入以分包
format: 'amd', // 有动态导入的模块时不能使用 iife模式 需使用 amd模式
dir: 'output',
},
plugins: [
json(), // json 插件,把 .json 文件转换为 js 对象
resolve(), // 对于node_modules中的第三方模块 需要使用 @rollup/plugin-node-resolve 插件加载
commonjs(), // 加载 CommonJS 模块
]
}
export default config;
打包命令(带上--config参数标识使用 rollup.config.js 文件):
yarn rollup --config
二. Parcel 一款零配置的前端应用打包器
官网:https://www.parceljs.cn/
特点:
零配置
自动安装任何依赖模块 不用手动安装
支持import()动态导入
打包时内部使用多进程打包 速度快(webpack可以通过happyWebpack来实现多进程)
打包入口是 html 文件
本文 完。
本文介绍了两款前端打包器。Rollup是小巧高效的ES Module打包器,默认支持ESM模块,可配置入口、输出等,有输出扁平、自动移除未引用代码等优点,但也存在无法实现HMR等缺点,适合开发框架或类库。Parcel是零配置的前端应用打包器,能自动安装依赖,支持动态导入,打包速度快。

被折叠的 条评论
为什么被折叠?



