Rollup 学习 —— 常用插件学习

rollup 打包常用插件详解

前言

在现代 JavaScript 开发中，构建工具对于创建和打包复杂应用程序至关重要。rollup 作为一种强大的打包工具，允许开发者创建自定义构建管道以满足特定需求。通过使用插件，rollup 的功能可以得到极大扩展，以解决各种打包场景。

rollup 插件分类

rollup 插件主要分为以下四类：

• 转换器插件： 将一种代码格式转换为另一种格式，例如将 ES 模块转换为 CommonJS 模块。
• 生成器插件： 将代码转换为最终输出格式，例如将代码转换为 IIFE 或 AMD 模块。
• 解析器插件： 将代码解析为抽象语法树 (AST)，以便其他插件可以对其进行操作。
• 优化器插件： 优化代码，例如删除未使用的代码或压缩代码。

常用插件介绍

1. rollup-plugin-babel

作用：将 ES 模块转换为 CommonJS 模块。

传送门：https://www.npmjs.com/package/rollup-plugin-babel

2. rollup-plugin-commonjs

作用：将 CommonJS 模块转换为 ES 模块。

传送门：https://www.npmjs.com/package/rollup-plugin-commonjs

3. rollup-plugin-node-resolve

作用：解析 Node.js 模块。

传送门：https://www.npmjs.com/package/rollup-plugin-node-resolve

4. rollup-plugin-json

作用：解析 JSON 文件。

传送门：https://www.npmjs.com/package/rollup-plugin-json

5. rollup-plugin-replace

作用：替换字符串。

传送门：https://www.npmjs.com/package/rollup-plugin-replace

6. rollup-plugin-uglify

作用：压缩代码。

传送门：https://www.npmjs.com/package/rollup-plugin-uglify

使用插件

使用 rollup 插件可以增强构建管道的功能。以下示例演示了如何使用上面列出的插件：

import rollup from 'rollup';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';

const inputOptions = {
  input: 'src/main.js',
  plugins: [
    babel(),
    commonjs(),
    nodeResolve(),
    json(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    uglify()
  ]
};

const outputOptions = {
  file: 'dist/main.js',
  format: 'iife',
  sourcemap: true
};

rollup.rollup(inputOptions).then((bundle) => {
  bundle.write(outputOptions);
});

总结

rollup 插件为开发者提供了强大的工具，可以定制构建管道，优化代码并解决各种打包场景。通过选择合适的插件，rollup 可以轻松地满足复杂应用程序的需求。

常见问题解答

1. 什么是 rollup？
   rollup 是一个 JavaScript 构建工具，允许开发者创建自定义构建管道。

2. 什么是 rollup 插件？
   rollup 插件是增强 rollup 功能的附加组件，可以处理代码转换、解析、优化等任务。

3. 有哪些不同类型的 rollup 插件？
   rollup 插件分为转换器、生成器、解析器和优化器四类。

4. 如何使用 rollup 插件？
   在 rollup 构建配置中导入并使用插件。

5. 有哪些常用的 rollup 插件？
   常用的 rollup 插件包括 rollup-plugin-babel、rollup-plugin-commonjs、rollup-plugin-node-resolve 等。