"Import a global variable" 在 Webpack 中

Question

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

在我们的 webpack 应用程序中，我们想要 import 一些碰巧已经作为脚本存在于页面上的库。与其下载相同的代码两次，一次作为脚本，然后再次嵌入到 webpack 包中，我们希望 webpack 不包含页面上已经作为脚本的库代码，但仍然允许我们使用 ES import 语法到 "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" 但它似乎提供了所有功能除了我在这篇 post.

中描述的功能

Answer 1

使用webpack的externals:

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

externals: {
  jquery: 'jQuery'
}

"Import a global variable" 在 Webpack 中

"Import a global variable" in Webpack

javascript

global-variables

ecmascript-6

webpack

es6-modules