rollup的五大核心配置

一、rollup.config.js基本配置

例如，以下是一份基本的 rollup.config.js 文件代码：

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: 'dist/bundle.js',
      format: 'cjs', // 输出格式
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'esm', // 输出格式
    },
  ],
  plugins: [
    resolve(), // 解析第三方依赖
    commonjs(), // 将 CommonJS 模块转换为 ES6
    babel(), // 转义 ES6/7 代码为 ES5
  ],
  external: ['react', 'react-dom'], // 外部依赖
  mode: 'production', // 打包模式
};

其中，包括输入文件 input、输出文件 output、插件 plugins、外部依赖 external 和打包模式 mode。三个插件的配置：resolve 插件用于解析第三方依赖，commonjs 插件将 CommonJS 模块转换为 ES6，babel 插件将 ES6/7 代码转换为 ES5。

这个配置文件会将 src/index.js 文件作为入口文件，打包成两个输出文件 dist/bundle.js 和 dist/bundle.esm.js，其中 dist/bundle.js 的输出格式为 cjs，dist/bundle.esm.js 的输出格式为 esm。在打包过程中，会先解析第三方依赖，将 CommonJS 模块转换为 ES6，最后将 ES6/7 代码转换为 ES5。在打包过程中，会忽略 react 和 react-dom 两个外部依赖。打包模式为 production。

二、五大核心配置

基础配置包括输入文件（input）、输出文件（output）、插件（plugins）、外部依赖（external）、打包模式（mode）等。

1. input打包入口文件

在使用 Rollup 进行打包时，需要配置 rollup.config.js 文件，其中 input 配置选项用于指定入口文件，告诉 Rollup 从哪个文件开始打包。具体来说，input 接收一个文件路径，可以是相对路径或绝对路径。

举个例子：

// rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  }
}

以上配置中，input 指定了入口文件为 src/index.js，表示 Rollup 会从这个文件开始打包。

当我们运行 Rollup 命令后，它会找到入口文件，分析其中的依赖并生成打包后的文件。如果入口文件中包含其他模块的引用，Rollup 会递归地分析它们的依赖，最终将它们打包到生成的文件中。

使用 input 配置选项的好处在于，我们可以将多个模块的打包合并成一个文件，避免了在浏览器中加载多个文件的请求和响应时间。此外，Rollup 的静态分析能力可以将未使用的代码以及不必要的依赖移除，使得打包后的文件更小、更快。

综上所述，input 配置选项是非常重要的一个选项，它指定了入口文件，告诉 Rollup 从哪个文件开始打包，提高了打包的效率和性能。

2. output打包输出

rollup.config.js的output配置选项用于指定将代码打包后输出的路径和文件名等相关的配置。

以下是output配置选项的常见参数及其说明：

• file：指定打包后输出的文件路径和名称。
• format：指定打包后输出的代码格式，可以是amd、cjs、es、iife或umd。
• name：指定打包后的全局变量名，仅当format为iife或umd时使用。
• sourcemap：指定是否生成source map，默认值为false。
• sourcemapFile：指定生成的source map文件位置，默认值为null。
• sourcemapExcludeSources：指定是否将源文件包含在source map中，默认值为false。
• banner：指定输出文件头部添加的注释信息。
• footer：指定输出文件尾部添加的注释信息。
• intro：指定输出文件头部添加的代码。
• outro：指定输出文件尾部添加的代码。

以一个打包目录为例，假设我们有以下的目录结构：

.
├── dist
├── node_modules
├── src
│   ├── index.js
│   └── utils.js
└── rollup.config.js

我们可以将rollup.config.js的output配置选项设置为：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'myLibrary',
    sourcemap: true,
    sourcemapFile: 'dist/bundle.js.map',
    sourcemapExcludeSources: true,
    banner: '/* myLibrary v1.0.0 */',
    footer: '/* https://github.com/my-username/my-library */',
  },
}

上述配置指定了将src/index.js作为入口文件打包为一个umd格式的文件，输出到dist/bundle.js文件中，并为打包后的代码指定了全局变量名为myLibrary。同时，打包后会生成一个sourcemap文件，并指定文件名为dist/bundle.js.map，生成的sourcemap会排除源文件，并在打包后的代码头部加上"/* myLibrary v1.0.0 /“注释，在打包后的代码尾部加上”/ https://github.com/my-username/my-library */"注释。

3. plugins插件

在使用 Rollup 进行打包时，可以通过在 rollup.config.js 文件中配置 plugins 来实现一些特定的操作，如代码压缩、处理 CSS 文件、支持 TypeScript 等。以下是 plugins 配置选项常用的插件及其功能：

1. commonjs()：将 CommonJS 模块转为 ES6 模块，使其能够被 Rollup 处理和打包。

2. resolve()：解析导入的依赖模块路径，以便 Rollup 能够正确找到依赖模块。

3. babel()：将 ES6+ 语法转为 ES5 语法，以便在低版本浏览器或者旧版 Node.js 上运行。

4. terser()：对代码进行压缩和混淆，以减小文件大小和提高网站性能。

5. postcss()：对 CSS 进行处理，如添加浏览器前缀、压缩等。

6. typescript()：支持使用 TypeScript 进行开发，并将 TypeScript 文件转为 JavaScript 文件。

下面以一个打包目录为例来说明如何在 rollup.config.js 中配置 plugins：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.min.js",
    format: "iife",
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: "bundled",
      exclude: "node_modules/**",
    }),
    terser(),
  ],
};

以上配置中，plugins 分别使用了 @rollup/plugin-node-resolve、@rollup/plugin-commonjs、@rollup/plugin-babel 和 rollup-plugin-terser 插件，分别用于解析依赖模块路径、转换 CommonJS 模块、将 ES6+ 语法转为 ES5 语法和对代码进行压缩和混淆。最终生成的打包文件为 dist/bundle.min.js，打包格式为 iife。

4.external外部依赖

external选项是用来指定哪些模块是外部依赖，不需要被打包进最终的输出文件中的。这可以显著减小打包后的文件大小。

举一个打包目录的例子：

假设我们的打包目录结构如下：

├── src/
│   ├── index.js
│   ├── utils/
│   │   └── helper.js
│   └── lib/
│       └── lodash.js
├── dist/
└── rollup.config.js

其中，src/index.js 文件中引用了 src/utils/helper.js 和 src/lib/lodash.js 两个文件中的一些函数和变量。

如果我们直接使用默认配置文件打包，最终生成的文件会包含 helper.js 和 lodash.js 中的代码，导致最终的文件体积变得很大。

为了避免这个问题，我们可以配置 external 选项，告诉 Rollup 这两个文件应该被视为外部依赖。

在 rollup.config.js 中添加如下代码：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  external: ['src/utils/helper.js', 'src/lib/lodash.js'],
};

这里使用了相对路径，直接指定要排除的文件。如果你选择使用模块名称，则需要在代码中使用 import 或 require 去引入这些模块，并且在 external 中配置他们的名称，例如：

import { someFunction } from 'lodash';

export default function test() {
  someFunction();
}

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  external: ['lodash'],
};

最终生成的代码将不会包含 helper.js 和 lodash.js 中的内容，而是在运行时从外部获取这些依赖。

5.mode模式

在Rollup.js中，mode配置选项用于指定当前构建的模式，包括production和development两种模式。具体作用如下：

1. production模式：启用各种代码优化，生成的代码体积更小，执行速度更快。通常用于生产环境。

2. development模式：生成的代码不会进行优化，方便开发调试。通常用于开发环境。

举例说明：

当我们设置mode为production时，Rollup.js会自动开启代码压缩、Tree Shaking、Scope Hoisting等优化功能，以减小生成的代码体积和提高执行效率，适用于生产环境：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'iife',
    name: 'MyLibrary'
  },
  mode: 'production'
};

而当我们设置mode为development时，生成的代码不会进行优化，不会进行代码压缩、Tree Shaking、Scope Hoisting等操作，方便开发调试，适用于开发环境：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.dev.js',
    format: 'iife',
    name: 'MyLibrary'
  },
  mode: 'development'
};

三、总结

到这里大家是不是想到了一个老朋友，webpack.config.js，这些配置看上去是不是很像，哈哈哈
总的来说，rollup.config.js 是构建现代 JavaScript 应用程序的强大工具。在本文中，我们介绍了五个基础配置，包括输入文件、输出文件、插件、外部依赖和模式。这些配置可以帮助我们快速创建优化的 JavaScript 应用程序。但是，这只是 rollup.config.js 的冰山一角。还有很多高级配置和技巧可以使用，比如代码拆分、动态导入等等。了解 rollup.config.js 的所有特性和细节需要时间和经验，但是这些基础配置可以帮助我们快速开始并建立基础。希望这篇博客能够对你有所帮助，祝你在使用 rollup.config.js 构建 JavaScript 应用程序时愉快！