Rollup 中如何配置 globals 选项?

推荐答案

在 Rollup 中,globals 选项用于配置外部依赖项(external dependencies)在打包时如何被引用。通常,这些外部依赖项是通过 importrequire 引入的库,如 lodashjqueryglobals 选项允许你指定这些外部依赖项在打包后的代码中如何被引用。

配置示例

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

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

解释

  • globals 选项是一个对象,键是模块的名称,值是该模块在全局环境中的变量名。
  • 在这个例子中,lodash 模块在全局环境中被引用为 _,而 jquery 被引用为 $
  • external 选项用于指定哪些模块是外部的,不应该被打包进最终的输出文件中。

本题详细解读

什么是 globals 选项?

globals 选项用于指定外部依赖项在打包后的代码中如何被引用。当你使用 Rollup 打包代码时,可能会依赖一些外部的库或模块,这些库或模块可能已经在全局环境中存在(例如通过 <script> 标签引入的库)。globals 选项允许你告诉 Rollup,这些外部依赖项在全局环境中是如何被引用的。

为什么需要 globals 选项?

当你使用 Rollup 打包代码时,如果你依赖的外部库已经在全局环境中存在,你不需要将这些库打包进最终的输出文件中。相反,你只需要告诉 Rollup 这些库在全局环境中的变量名是什么。这样,Rollup 在打包时就可以正确地引用这些全局变量,而不需要将它们打包进最终的输出文件中。

如何使用 globals 选项?

  1. 配置 external 选项:首先,你需要在 Rollup 配置中使用 external 选项来指定哪些模块是外部的。这些模块不会被 Rollup 打包进最终的输出文件中。

  2. 配置 globals 选项:然后,你需要在 output 配置中使用 globals 选项来指定这些外部模块在全局环境中的变量名。

示例场景

假设你正在开发一个浏览器端的 JavaScript 应用,并且你使用了 lodashjquery 这两个库。你通过 <script> 标签在 HTML 文件中引入了这两个库,因此它们在全局环境中已经存在。在这种情况下,你可以使用 globals 选项来告诉 Rollup 如何引用这些全局变量。

注意事项

  • globals 选项通常与 external 选项一起使用。如果你没有将某个模块标记为 external,那么 Rollup 会尝试将其打包进最终的输出文件中,即使你在 globals 中指定了它的全局变量名。
  • globals 选项只在你使用 iifeumd 格式时有效。如果你使用 escjs 格式,globals 选项将不起作用。

通过正确配置 globals 选项,你可以确保 Rollup 在打包时正确地引用外部依赖项,从而避免不必要的代码冗余。

纠错
反馈