其他打包工具 - Rollup 和 Parcel

本文介绍了两款前端打包器。Rollup是小巧高效的ES Module打包器,默认支持ESM模块,可配置入口、输出等,有输出扁平、自动移除未引用代码等优点,但也存在无法实现HMR等缺点,适合开发框架或类库。Parcel是零配置的前端应用打包器,能自动安装依赖,支持动态导入,打包速度快。

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

一. 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 文件


本文 完。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值