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

推荐答案

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

-- -------------------- ---- -------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------

------ ------- -
  ------ --------------
  ------- -
    ----- ------------
    ------- ------
    ----- ------------
    -------- -
      --------- ----
      --------- ---
    -
  --
  -------- -
    ----------
    ----------
  --
  --------- ---------- ---------
--

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

本题详细解读

1. 什么是全局变量(Globals)?

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

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

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

3. 如何配置全局变量?

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

4. 示例解析

在上面的示例中:

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

5. 注意事项

  • 确保 globals 中指定的变量名与全局环境中的变量名一致。
  • 如果使用了 umdiife 格式,globals 配置是必需的,因为这些格式依赖于全局变量。
  • 对于 esmcjs 格式,globals 配置通常不需要,因为这些格式不依赖于全局变量。
纠错
反馈