Javascript 网页包和外部库：ProvidePlugin vs entry vs global import？ 1. ProvidePlugin（）

看起来是一种常用的方法。有一个关于它的例子，展示了如何将whatwg fetchpolyfill包含到一个网页包构建中。关于StackOverflow的很多答案都使用它

---

我不建议将库公开为全局库，除非您确实需要它，即模块系统的要点是显式声明依赖项，例如

// app.js
import $ from 'jquery';
$.ajax(...);

如果您确实需要全局查询，因为第三方脚本需要在您的页面上使用jQuery，或者可能需要在控制台中进行调试，那么以下是有关您列出的方法的一些信息：

ProvidePlugin

ProvidePlugin不会在全局上公开jQuery，它的真正目的是修复错误地依赖全局模块存在的第三方模块，因此我不建议这样做，例如

// app.js
$.ajax(...);

有效地传输到：

// app.js
require('jquery').ajax(...);

入门级和顶级导入

这些方法不适用于像jQuery这样的常规UMD模块，因为当jQuery被一个支持commonjs/amd/es6的加载程序加载时，它足够聪明，不会在全局上暴露自己

然而，这两种方法对于具有副作用的模块非常理想，例如

babel polyfill

/

whatwg fetch

，因为它们不输出任何东西，它们固有地改变了全球环境

---

因此，我建议使用jQuery，它旨在全局公开模块导出，例如

// webpack.config.js
{
    module: {
        loaders: [
            test: require.resolve('jquery'),
            loader: 'expose-loader?jQuery!expose-loader?$'
        ]
    }
}

然后，您仍然需要将其导入应用程序代码：

// app.js
import $ from 'jquery';
$.ajax(...)

但是，如果绝对必要，可以在全局上访问该页面上的其他脚本：

// console
window.$
window.jQuery

注意：从技术上讲，在使用expose loader时，您可以在入口点导入一次“jquery”，然后在其他模块中依赖全局查询

---

但是，正如我所说的，如果您不需要公开模块，即使您目前碰巧在其他每个模块中使用该模块，也不建议公开该模块。

当您使用ProvidePlugin时，如果在一个页面中包含多个包（入口点），只需了解提供的库将被覆盖。例如RoR和Webpacker，但我认为这并不重要

例如，您的布局中有：

  javascript_pack_tag 'application',
                      'metronic'

在配置中，您有：

  environment.plugins.append('Provide', new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      "window.jQuery": "jquery",
      "window.$": "jquery",
      _: 'underscore',
      Handlebars: 'handlebars'
  }));

如果在

application.js

中需要库，这些库会使JQuery发生变异，那么在

metronic.js

和浏览器中，即使您使用expose loader公开JQuery，也会丢失所有这些变异

---

如果我错了，请纠正我，可能ProvidePlugin只是在每个入口点导入LIB。

entry

如果您有多个入口点，这根本不是一个好主意。

  environment.plugins.append('Provide', new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      "window.jQuery": "jquery",
      "window.$": "jquery",
      _: 'underscore',
      Handlebars: 'handlebars'
  }));