前端工程化--Rollup的使用

Rollup 是一个 JavaScript 模块打包工具，它可以将小的代码片段打包成更大、更复杂的代码，如库或应用程序。以下是 Rollup 的基本使用方法以及一些常用插件的介绍。

安装 Rollup

使用 npm 或者 yarn 来安装 Rollup，命令如下：

npm install --save-dev rollup

或者使用yarn

yarn add --dev rollup

基本使用

1. 创建项目结构
   假设你的项目结构如下：

   project/
   ├── src/
   │   └── main.js
   └── package.json
   

2. 编写入口文件
   在src/main.js中编写一些代码：

   // src/main.js
   const message = 'Hello, Rollup!';
   console.log(message);
   

3. 创建 Rollup 配置文件
   在项目根目录下创建rollup.config.js文件：

   // rollup.config.js
   export default {
     input: 'src/main.js',
     output: {
       file: 'dist/bundle.js',
       format: 'cjs' // 输出的模块格式，这里使用CommonJS
     }
   };
   

4. 配置package.json脚本
   在package.json中添加打包脚本：

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

5. 运行打包命令

   npm run build
   

打包完成后，会在dist目录下生成bundle.js文件。

常用 Rollup 插件

1. @rollup/plugin-node-resolve
   用于解析node_modules中的第三方模块。

   npm install --save-dev @rollup/plugin-node-resolve
   

   在rollup.config.js中使用：

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

2. @rollup/plugin-commonjs
   将 CommonJS 模块转换为 ES6 模块，以便 Rollup 可以处理。

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

   在rollup.config.js中使用：

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

3. rollup-plugin-terser
   用于压缩和混淆打包后的代码。

   npm install --save-dev rollup-plugin-terser
   

   在rollup.config.js中使用：

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

4. @rollup/plugin-babel
   集成 Babel，将 ES6+ 代码转换为向后兼容的 JavaScript 代码。

   npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env
   

   在rollup.config.js中使用：

   import resolve from '@rollup/plugin-node-resolve';
   import commonjs from '@rollup/plugin-commonjs';
   import babel from '@rollup/plugin-babel';
   export default {
     input: 'src/main.js',
     output: {
       file: 'dist/bundle.js',
       format: 'cjs'
     },
     plugins: [
       resolve(),
       commonjs(),
       babel({
         babelHelpers: 'bundled',
         presets: ['@babel/preset-env']
       })
     ]
   };
   

Rollup的优缺点

优点

1. Tree-Shaking（摇树优化）： Rollup 是最早实现 Tree-Shaking 的工具之一。Tree-Shaking 能静态分析代码中的导入和导出，只打包实际使用的代码，从而去除未使用的代码。对于库的开发来说，能显著减少包的体积，提升加载速度。比如在一个包含大量工具函数的库中，若只使用了其中几个函数，Rollup 会自动排除未使用的函数。
2. ES 模块优先： Rollup 原生支持 ES 模块（ES6+），它能直接处理 ES 模块的导入和导出语法，无需额外的转换步骤。这使得代码可以保持现代的模块化风格，并且在打包过程中充分利用 ES 模块的静态结构进行优化。
3. 简洁的输出： Rollup 生成的打包文件简洁、干净，没有过多的包装代码。相较于其他打包工具，其输出的代码更接近原始代码结构，易于调试和维护。这对于开发库的开发者而言尤为重要，因为他们希望用户在使用库时加载的代码尽可能简洁。
4. 适合库开发： 由于其 Tree-Shaking 和简洁输出的特性，Rollup 非常适合用于开发 JavaScript 库。它能确保库的体积最小化，同时保持良好的模块化结构，方便其他开发者使用和集成。
5. 插件系统： Rollup 拥有丰富的插件生态系统，你可以使用插件来扩展其功能，如处理不同的文件类型（CSS、JSON 等）、压缩代码、集成 Babel 进行代码转换等。

缺点

1. 缺乏对 CommonJS 模块的原生支持： 虽然 Rollup 可以通过@rollup/plugin-commonjs插件来处理 CommonJS 模块，但这并非原生支持，可能会带来一些兼容性问题。特别是在处理复杂的 CommonJS 模块时，可能会出现打包错误或打包结果不符合预期的情况。
2. 不适合大型应用开发： Rollup 的设计初衷主要是为了打包库，对于大型的 Web 应用开发，它可能不如 Webpack 等工具方便。Webpack 提供了更多的功能，如代码分割、热更新、处理各种资源（图片、字体等）的能力，而 Rollup 在这些方面的支持相对较弱。
3. 生态系统相对较小： 与 Webpack 庞大的生态系统相比，Rollup 的生态系统规模较小。这意味着在处理一些复杂的需求时，可能找不到合适的插件或工具，或者需要自己开发插件来实现特定的功能。
4. 学习曲线： 尽管 Rollup 的基本配置相对简单，但要充分发挥其功能，尤其是使用插件进行复杂的配置时，可能需要一定的学习成本。对于初学者来说，理解和掌握 Rollup 的配置和插件使用可能会有一定的难度。