Rollup 如何配置全局变量 (Globals)？

推荐答案

在 Rollup 中配置全局变量（Globals）可以通过 output.globals 选项来实现。这个选项用于指定外部依赖项在打包时如何映射到全局变量。以下是一个示例配置：

// 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: 'umd',
    name: 'MyLibrary',
    globals: {
      'lodash': '_',
      'jquery': '$'
    }
  },
  plugins: [
    resolve(),
    commonjs()
  ],
  external: ['lodash', 'jquery']
};

在这个配置中，globals 对象指定了外部依赖项 lodash 和 jquery 在全局环境中的变量名。lodash 将被映射为 _，而 jquery 将被映射为 $。

本题详细解读

1. 什么是全局变量（Globals）？

全局变量是指在浏览器或其他环境中已经存在的变量，通常是通过 <script> 标签引入的库或框架。例如，jQuery 通常通过 $ 或 jQuery 来访问。

2. 为什么需要配置全局变量？

在使用 Rollup 打包时，如果项目中使用了外部依赖（如 lodash 或 jquery），并且这些依赖已经在全局环境中存在，那么 Rollup 需要知道这些依赖在全局环境中的变量名。通过配置 globals，Rollup 可以正确地引用这些全局变量，而不是将它们打包到最终的输出文件中。

3. 如何配置全局变量？

在 Rollup 配置文件中，output.globals 选项用于指定外部依赖项与全局变量的映射关系。这个选项通常与 external 选项一起使用，external 选项用于告诉 Rollup 哪些模块是外部依赖，不应该被打包。

4. 示例解析

在上面的示例中：

• input 指定了入口文件。
• output 指定了输出文件的路径、格式（umd）、库的名称（MyLibrary）以及全局变量的映射关系。
• globals 对象中，lodash 被映射为 _，jquery 被映射为 $。
• external 数组列出了所有外部依赖项，确保它们不会被 Rollup 打包。

5. 注意事项

• 确保 globals 中指定的变量名与全局环境中的变量名一致。
• 如果使用了 umd 或 iife 格式，globals 配置是必需的，因为这些格式依赖于全局变量。
• 对于 esm 或 cjs 格式，globals 配置通常不需要，因为这些格式不依赖于全局变量。