jQuery 和 es6 导入 - 如何获取全局实例答案

【问题标题】：jQuery and es6 imports - how to get a global instancejQuery 和 es6 导入 - 如何获取全局实例
【发布时间】：2017-03-26 19:28:41
【问题描述】：

我正在使用 webpack 来捆绑我的文件，但我遇到了 jQuery 问题。由于遗留代码，我们在页面初始化时在 jQuery 对象上定义了一大堆函数。我们看到的问题是如果你做一个

import $ from 'jquery'

每个文件都有自己的 jQuery 实例。在我们的 webpack.config 中，我们尝试使用 ProvidePlugin 来设置全局 jquery 命名空间，如下所示：

new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
 })

不幸的是，这并不是真正的“全球性”。这意味着我们在一个文件中对该实例所做的任何修改都不会保留在其他文件中。例如：

<-- file one -->
window.a$ = $;
$.fn.myPlugin = function() {};

<-- file two -->
window.b$ = $;

<-- console -->
window.a$ === window.b$  // is false
window.b$.myPlugin // is undefined here
window.a$.myPlugin // is properly set here.

显然我对 es6 的导入了解甚少。我在这里做错了什么？

【问题讨论】：

“很明显我对 es6 的导入理解很差” ES6 只提供了模块 syntax 以及如何评估模块（即一次）。其他一切，模块解析，模块加载，取决于执行环境或打包器（即本例中的 webpack）。
请提供可以复制问题的MCVE，示例还不够。复制 Webpack 构建问题并不容易，一个 repo 可能会有所帮助。对import 和ProvidePlugin 的假设是错误的，在这两种情况下，这都会导致单个jQuery 实例。如果jquery 属于不同的 Webpack 包块，则可能会发生这种情况。
@estus 什么意思，jquery 属于不同的 Webpack 包块？你能详细说明一下吗？与此同时，我将致力于创造可重现的东西。
Chunks 是属于捆绑包的部分（文件）。对于单个块，实例应该是相同的。根据设置，可能会创建多个块，这可能违背开发者的意愿。

标签： jquery webpack ecmascript-6 babeljs

【解决方案1】：

感谢@estus，我发现了我丢失的部分。正如他在上面的评论中指出的那样，我在设置分割点时无意中创建了新的 jQuery 实例。

我需要使用CommonsChunkPlugin 来设置供应商文件，如下所示：

module.exports = {
    entry: {
       vendor: ['jquery']
    },

      ...

     plugins: [
       new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery",
         "window.jQuery": "jquery",
         "window.$": "jquery"
       }),
       new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",

        // filename: "vendor.js"
        // (Give the chunk a different name)

        minChunks: Infinity,
        // (with more entries, this ensures that no other module
        //  goes into the vendor chunk)
       })
   ]
   ...

结合提供者插件，设置全局 jQuery 实例相当简单。

【讨论】：