Webpack 中的“导入全局变量”

Question

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

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

所以，我们<script src="jquery.js">在我们的页面上。 jquery.js据说做这样的事情：

window.jQuery = {};

在我们由 Webpack 编译的代码中，我们想做：

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

有没有办法让 Webpack 被配置为解决某些依赖项，比如上面例子中的“jquery”，并确定它应该将import代码转换为对该全局变量的引用？

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

我查看了Webpack 关于“填充”的指南，但它似乎提供了除我在这篇文章中描述的功能之外的所有功能。

Answer 1

使用 webpack 的externals：

防止捆绑某些导入的包，而是在运行时检索这些外部依赖项。

externals: {
  jquery: 'jQuery'
}