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

Question

我正在使用 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 导入了解甚少。我在这里做错了什么？

Answer 1

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

我需要使用 CommonsChunkPlugin像这样设置 vendor 文件:

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 实例相当简单。