《三十》模块化打包构建工具 Rollup

原创

已于 2025-02-18 09:53:52 修改 · 1.5k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack

于 2023-12-06 11:47:12 首次发布

基于 Rollup4。

Rollup 是一个 JavaScript 的模块化打包工具，可以帮助编译微小的代码到庞大的复杂的代码中（例如一个库或者一个应用程序）。

Rollup 和 Webpack 的区别：

Rollup 和 Webpack 都是模块化的打包工具。它们的区别主要是：

Rollup 专注于处理 JavaScript 代码（当然也可以处理其他文件）；主要是针对 ESModule 进行打包的，默认支持 ESModule 模块化语法（当然也有解决办法可以处理其他模块化代码）；Rollup 中处理任何文件都是使用对应的插件；配置理念相对于 Webpack 来说更加简洁和容易理解。
Webpack 中可以处理各种类型的文件；可以使用各种模块化开发；Webpack 中是通过 Loader 来转换文件，通过 Plugin 来执行其他的逻辑。

通常在实际开发项目中都会使用 Webpack，例如 React、Vue、Angular 项目都是基于 Webpack 的；在对库文件进行打包时，通过会使用 Rollup，例如 React、Vue、dayjs 源码本身都是基于 Rollup 的。

Rollup 的基本使用：

在命令行中使用 Rollup：

新建一个 rollup-demo 文件，运行 npm init -y 对其进行初始化。
安装 Rollup：npm install rollup -D。

新建 src/index.js 文件，并编写代码。

const sum = (num1, num2) => {
  console.log(num1 + num2)
}
export {
  sum
}

运行 npx rollup ./src/index.js -o dist/index_esmodule.js 命令对 src/index.js 进行打包，输出到 dist//index_esmodule.js 中。
运行 npx rollup ./src/index.js -f cjs -o dist/index_commonjs.js 命令，使用 CommonJS 的格式对 src/index.js 进行打包，输出到 dist/index_commonjs.js 中。
运行 npx rollup ./src/index.js -f amd -o dist/index_amd.js 命令，使用 AMD 的格式对 src/index.js 进行打包，输出到 dist/index_amd.js 中。
运行 npx rollup ./src/index.js -f iife -o dist/index_browser.js 命令，使用立即调用函数的格式对 src/index.js 进行打包，输出到 dist/index_browser.js 中。

使用 Rollup 的配置文件：

rollup.config.js 配置文件中可以使用 CommonJS 语法；也可以使用 ESModule 语法，如果要使用 ESModule 语法的话，需要给 package.json 添加 "type": "module" 来告知 Node 使用 ES 模块解析脚本。

由于 Rollup 最主要是针对 ESModule 来进行打包的，因此 rollup.config.js 配置文件中更常使用 ESModule 语法。

在项目的根目录下创建 rollup.config.js 配置文件，并编写配置。

module.exports = {
  // 入口
  input: './src/index.js',
  // 出口。属性值可以是一个对象类型的数组，将会输出多个结果；也可以是一个对象，只输出一个结果
  output: [
    {
      file: 'dist/index_esmodule.js'
    },
    {
      format: 'umd',
      // 一旦导出为 UMD 格式，就必须指定 name 名称
      name: 'utils',
      file: 'dist/index_umd.js'
    },
  ]
}