Rollup 打包工具入门教程

Rollup 打包工具入门教程

rollup rollup/rollup: Rollup是一个JavaScript模块打包器，专注于ES6模块的优化编译，能够将多个模块文件转换并打包成单个文件，并进行代码优化。它特别适用于构建库或工具，确保生成的代码体积小、加载速度快。 项目地址: https://gitcode.com/gh_mirrors/ro/rollup

什么是 Rollup？

Rollup 是一个现代化的 JavaScript 模块打包工具，它能够将多个 JavaScript 模块打包成一个或多个优化后的文件。与其他打包工具相比，Rollup 特别擅长处理 ES6 模块系统，并以其高效的"tree-shaking"（树摇）功能著称，能够自动删除未使用的代码，生成更小、更高效的打包文件。

环境准备

在开始使用 Rollup 之前，需要确保你的开发环境已经具备以下条件：

1. Node.js 环境（建议使用 LTS 版本）
2. npm 或 yarn 包管理工具
3. 基本的命令行操作知识

安装 Rollup

Rollup 可以通过 npm 全局安装，方便在任何项目中使用：

npm install rollup --global

安装完成后，可以通过运行 rollup 命令来验证是否安装成功。不带任何参数运行会显示 Rollup 的使用说明。

创建第一个 Rollup 项目

让我们从一个简单的项目开始：

1. 创建项目目录结构：

   mkdir -p my-rollup-project/src
   cd my-rollup-project
   

2. 创建入口文件 src/main.js：

   import foo from './foo.js';
   export default function() {
     console.log(foo);
   }
   

3. 创建被引用的模块 src/foo.js：

   export default 'hello world!';
   

执行打包

现在我们可以使用 Rollup 进行第一次打包：

rollup src/main.js -f cjs

这个命令的含义是：

• src/main.js：指定入口文件
• -f cjs：指定输出格式为 CommonJS（Node.js 使用的模块系统）

打包结果会直接输出到控制台。如果想保存到文件，可以使用：

rollup src/main.js -o bundle.js -f cjs

验证打包结果

我们可以通过 Node.js 来验证打包后的代码是否正常工作：

node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'

使用配置文件

随着项目复杂度增加，命令行参数会变得冗长。这时可以使用 Rollup 配置文件来管理所有配置选项。

创建 rollup.config.mjs 文件：

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

然后通过以下命令使用配置文件：

rollup -c

本地安装 Rollup

为了确保团队成员使用相同版本的 Rollup，建议将 Rollup 作为开发依赖安装在项目中：

npm install rollup --save-dev

安装后，可以通过以下方式运行：

npx rollup --config

或者在 package.json 中添加脚本：

{
  "scripts": {
    "build": "rollup --config"
  }
}

然后通过 npm run build 执行打包。

使用插件扩展功能

Rollup 的核心功能可以通过插件来扩展。例如，我们可以使用 @rollup/plugin-json 插件来让 Rollup 能够直接导入 JSON 文件。

1. 安装插件：

   npm install --save-dev @rollup/plugin-json
   

2. 修改 src/main.js 导入 package.json 中的版本号：

   import { version } from '../package.json';
   export default function() {
     console.log('version ' + version);
   }
   

3. 更新配置文件使用插件：

   import json from '@rollup/plugin-json';
   
   export default {
     input: 'src/main.js',
     output: {
       file: 'bundle.js',
       format: 'cjs'
     },
     plugins: [json()]
   };
   

打包后，Rollup 只会包含 JSON 文件中实际使用的部分（version 字段），这就是 tree-shaking 的实际效果。

代码分割

Rollup 支持代码分割，可以实现按需加载。修改 src/main.js 使用动态导入：

export default function() {
  import('./foo.js').then(({ default: foo }) => console.log(foo));
}

然后使用 --dir 选项指定输出目录：

rollup src/main.js -f cjs -d dist

这会生成两个文件：主文件 main.js 和按需加载的 chunk 文件。动态导入的模块只有在函数被调用时才会加载。

多入口打包

Rollup 也支持多入口打包，并会自动提取公共依赖：

1. 创建第二个入口文件 src/main2.js：

   import foo from './foo.js';
   export default function() {
     console.log(foo);
   }
   

2. 同时打包两个入口：

   rollup src/main.js src/main2.js -f cjs
   

Rollup 会生成三个文件：两个入口文件各一个，以及一个包含共享代码的 chunk 文件。

浏览器环境打包

Rollup 可以打包为多种浏览器友好的格式：

1. ES 模块格式（现代浏览器支持）：

   rollup src/main.js src/main2.js -f es -d dist
   

2. SystemJS 格式（兼容性更好）：

   rollup src/main.js src/main2.js -f system -d dist
   

总结

通过本教程，我们学习了 Rollup 的基本使用方法，包括：

1. 安装和基本命令使用
2. 配置文件的使用
3. 插件的集成
4. 代码分割和多入口打包
5. 不同环境下的打包输出

Rollup 凭借其简洁的设计和高效的 tree-shaking 功能，特别适合库和应用的打包。随着项目的增长，你可以继续探索 Rollup 更多高级功能，如自定义插件开发、性能优化等。

rollup rollup/rollup: Rollup是一个JavaScript模块打包器，专注于ES6模块的优化编译，能够将多个模块文件转换并打包成单个文件，并进行代码优化。它特别适用于构建库或工具，确保生成的代码体积小、加载速度快。 项目地址: https://gitcode.com/gh_mirrors/ro/rollup