Rollup 如何配置外部依赖 (External)？

推荐答案

在 Rollup 中配置外部依赖（External）可以通过 rollup.config.js 文件中的 external 选项来实现。以下是一个示例配置：

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

在这个配置中，external 选项指定了 lodash 和 react 作为外部依赖，这意味着 Rollup 不会将它们打包到最终的输出文件中，而是期望它们在运行时环境中已经存在。

本题详细解读

1. 什么是外部依赖（External）？

外部依赖是指在打包过程中不需要被打包到最终输出文件中的模块。这些模块通常是一些第三方库或框架，如 lodash、react 等。通过将它们标记为外部依赖，可以减少打包文件的大小，并且可以利用 CDN 或全局变量来加载这些依赖。

2. 如何配置外部依赖？

在 Rollup 中，可以通过 external 选项来配置外部依赖。external 选项可以接受一个数组，数组中的每个元素都是一个模块的名称或正则表达式。Rollup 会根据这些名称或正则表达式来判断哪些模块是外部依赖。

2.1 配置示例

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

在这个示例中，lodash 和 react 被标记为外部依赖。Rollup 不会将它们打包到 bundle.js 中，而是期望它们在运行时环境中已经存在。

2.2 使用正则表达式

你还可以使用正则表达式来匹配多个模块：

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

在这个示例中，所有以 lodash 或 react 开头的模块都会被标记为外部依赖。

3. 外部依赖的使用场景

• 减少打包体积：将常用的第三方库标记为外部依赖，可以显著减少打包文件的大小。
• 利用 CDN：通过 CDN 加载外部依赖，可以加快页面加载速度。
• 避免重复打包：在多个项目中使用相同的第三方库时，可以将它们标记为外部依赖，避免重复打包。

4. 注意事项

• 确保依赖可用：在将模块标记为外部依赖后，确保它们在运行时环境中可用，否则会导致运行时错误。
• 全局变量：如果外部依赖是通过全局变量加载的，需要在 Rollup 配置中指定全局变量的名称。

通过合理配置外部依赖，可以优化 Rollup 打包过程，提升应用的性能和加载速度。