Webpack和外部自由贸易组织: ProvidePlugin与入口对全球进口？

Question

1. ProvidePlugin()

看起来是一种常用的方法。有一个关于它的要旨，展示了如何在Webpack构建中包含whatwg fetch多边形填充。StackOverflow上的许多答案都使用它、这里和这里。

new webpack.ProvidePlugin({
  '$': 'jquery',
  'jQuery': 'jquery',
  'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
})

优点

• 它起作用了。(如果我遗漏了什么，请更新此列表)

缺点

• 需要跟踪Webpack配置中的全球库。

2. entry: [...]

当我在这个要旨中发现这种方法时，我对它感到有点惊讶，但它同样有效。

entry: [
    'babel-polyfill',
    'whatwg-fetch',
    'jquery',
    'webpack-hot-middleware/client',
    path.join(process.cwd(), 'app/app.js')
],

优点

• 它起作用了。
• 我可以完全放弃ProvidePlugin()。

缺点

• 需要跟踪Webpack配置中的全球库。

3.顶级import

这个例子非常简单，参见这个app.js示例。此文件是React应用程序的入口点.

/**
 * app.js
 */

import 'whatwg-fetch';
import 'babel-polyfill';
import 'jquery';

优点

• 效果也一样好。
• 容易添加/删除。不用碰Webpack的配置。

缺点

• 看起来，这种方法并不能单独用于jQuery插件，例如bootstrap.js。

Observation：在这三种方法之间，我没有注意到包大小的任何变化。

有没有一种与Webpack一起处理全球库的推荐方法(并作出反应)？这些解决方案中的任何一个会导致服务器端呈现的问题吗？

谢谢!

Answer 1

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

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

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

ProvidePlugin

ProvidePlugin不会在全局上公开jQuery，而实际上是为了修复不正确地依赖全局模块的第三方模块，所以我不推荐这样做。

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

有效地转移到：

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

入口及顶级进口

这些方法不适用于常规UMD模块(如jQuery )，因为jQuery很聪明，在由公共as / amd / es6感知加载程序加载时不会在全局上暴露自己。

然而，这两种方法对于具有副作用的模块(如babel-polyfill / whatwg-fetch )来说是理想的，因为它们不导出任何东西，它们本身就会改变全局环境。

因此，我对jQuery的建议是使用expose-loader，该expose-loader旨在向全球公开一个模块导出。

// 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

注意:从技术上讲，当使用公开加载程序时，您可以在入口点上只使用一次import 'jquery'，然后在其他模块中依赖全局。

然而，正如我所说的，如果您不需要公开一个模块，即使您目前正在其他模块中使用它，也不建议公开它。

Answer 2

如果在使用ProvidePlugin时在一个页面中包含了几个包(入口点)，只需发现提供的lib将被覆盖。例如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和浏览器中释放所有这些变异，即使您使用公开加载器公开JQuery。

如果我错了，也许ProvidePlugin只是在每个入口点导入库。