Rollup 中如何配置 external 选项？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Rollup 中，external 选项用于指定哪些模块应该被视为外部依赖，而不是打包到最终的输出文件中。你可以通过以下几种方式配置 external 选项：

字符串数组：将模块名称作为字符串数组传递给 external 选项。
函数：使用一个函数来动态判断哪些模块应该被视为外部依赖。

示例代码

// www.javascriptcn.com code example
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs()
  ],
  external: ['lodash', 'react'] // 将 lodash 和 react 视为外部依赖
};

或者使用函数：

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  external: id => /lodash|react/.test(id) // 使用正则表达式匹配 lodash 和 react
};

本题详细解读

1. `external` 选项的作用

external 选项用于告诉 Rollup 哪些模块不应该被打包到最终的输出文件中。这些模块通常是一些第三方库或 Node.js 内置模块，它们在运行时环境中已经存在，因此不需要被打包。

2. 配置方式

2.1 字符串数组

你可以直接传递一个字符串数组给 external 选项，数组中的每个字符串代表一个模块名称。Rollup 会在打包过程中忽略这些模块。

external: ['lodash', 'react']

2.2 函数

你也可以传递一个函数给 external 选项。这个函数接收一个参数 id，表示模块的路径或名称。函数返回 true 表示该模块是外部依赖，返回 false 则表示该模块应该被打包。

external: id => /lodash|react/.test(id)

3. 使用场景

第三方库：如 lodash、react 等，通常不需要打包到最终的输出文件中。
Node.js 内置模块：如 fs、path 等，在 Node.js 环境中已经存在，不需要打包。
CDN 引入的库：如果你通过 CDN 引入了一些库，可以将它们配置为外部依赖。

4. 注意事项

模块名称匹配：在使用字符串数组时，模块名称必须与 import 或 require 语句中的名称完全匹配。
函数灵活性：使用函数可以更灵活地控制哪些模块被视为外部依赖，特别是当你需要根据模块路径或名称进行动态判断时。

通过合理配置 external 选项，可以有效减少打包文件的体积，并避免重复打包已经存在的模块。

Rollup 中如何配置 external 选项？