javascript - Webpack 中的 "Import a global variable"

Question

这个问题已经有答案了:

Exclude react from webpack bundle (3 个回答)

已关闭 6 年前。

我们有一个 webpack 应用程序，正在将其集成到使用传统 JS 脚本的站点中，并且这些脚本定义全局变量。

在我们的 webpack 应用程序中，我们想要 import 一些恰好已经作为脚本出现在页面上的库。我们不想将相同的代码下载两次，一次作为脚本，再次嵌入到 webpack 包中，我们希望 webpack 不包含页面上已有的库的代码作为脚本，但仍然允许我们使用 ES import语法来“导入”我们模块中的代码，即使有问题的脚本代码实际上通过全局变量使库可用。

因此，我们的页面上有 <script src="jquery.js">。 jquery.js 据说做了这样的事情:

window.jQuery = {};

在 Webpack 编译的代码中，我们希望执行以下操作:

import jQuery from 'jquery';
jQuery === window.jQuery // true

是否有任何方法可以配置 Webpack 来解析某些依赖项(例如上面示例中的“jquery”)，并确定它应该将 import 代码转换为对该全局变量的引用？

这里的目的是在我们的遗留应用程序的新代码中逐渐选择采用新的 ES 模块语法，同时仍然利用页面上已经存在相同代码作为脚本的事实。

我检查了 Webpack's guide on "shimming"，但它似乎提供了除我在这篇文章中描述的功能之外的所有功能。

Answer 1

使用 webpack 的 externals :

Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.

externals: {
  jquery: 'jQuery'
}