在Webpack中“导入全局变量”

Question

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

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

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

jquery.js

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

window.jQuery = {};

是否有任何方法可以将Webpack配置为解析某些依赖项，例如上例中的“jquery”，并确定它应该将import jQuery from 'jquery'; jQuery === window.jQuery // true 代码转换为对该全局变量的引用？

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

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

Answer 1

使用webpack＆＃39; externals：

  

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

externals: {
  jquery: 'jQuery'
}