如何正确地将 jquery 插件添加到 webpack 中的 jquery 对象？答案

【问题标题】：How to properly add jquery plugins to jquery object in webpack?如何正确地将 jquery 插件添加到 webpack 中的 jquery 对象？
【发布时间】：2015-05-28 00:42:20
【问题描述】：

TL;DR 使用插件扩展 jQuery 对象、全局公开它并在 webpack 中使用带有 ES6 模块的外部 AMD 库的正确方法是什么？ webpack 是完成这项任务的正确工具，还是 SystemJs 更适合将遗留应用程序重构为 ES6 模块的情况？

我正在努力专注于使用 webpack 和 ES6 模块。我有一个主要是 jquery 的遗留应用程序，我目前正在转换。我面临以下挑战：

在 webpack/babel-loader 工作流程中寻找最佳实践
找出将哪个加载器/插件用于哪个目的
获取 AMD 资源（如 jquery 和 jquery 插件）以与其他模块完美配合。
公开 jquery 全局变量，使用所有插件和 jquery-ui 进行扩展

我依赖于以下资源：这个很好的答案解释了很多，虽然它没有提到我主要依赖的导出加载器：https://stackoverflow.com/a/28989476/2613786

http://webpack.github.io/docs/shimming-modules.html - 文档列出了许多可能性，但我缺乏决定哪一种是正确的经验。似乎更喜欢使用 ProvidePlugin 而不是暴露加载器。遗憾的是，我没有让它与扩展的 jQuery 对象一起工作。它也不适用于<script> 标签中调用的模块函数。

我仍然很难找到编程解决方案并决定哪个 webpack 插件最适合这项工作。非常感谢有经验的 webpack 用户提供的一些建议或示例。

在我的webpack.config.js 中，我有以下加载器来公开 jquery 并使用 babel 进行转译：

module: {
    loaders: [
        { 
            test: /\.js$/, 
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {modules: 'common'}
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?jQuery',
        },
        {
            test: /jquery\.js$/,
            exclude: /node_modules/,
            loader: 'expose?$',
        },
        {
            test: /[\/\\]vendor[\/\\]jquery.sparkline\.js$/,
            loader: "imports?define=>false"
        }
    ]
},
amd: { jQuery: true },
// plugins: [
//     new webpack.ProvidePlugin({
//        $: 'jquery',
//        jQuery: 'jquery',
//        'window.jQuery': 'jquery',
//        'root.jQuery': 'jquery'
//    })
// ], ...

在我的 entry.js 文件中，我通过以下方式包含 jquery：

import 'expose?jQuery!expose?$!./vendor/jquery';
import './jquery/jquery-ui';
import './vendor/jquery.sparkline';

我不得不注释掉 ProvidePlugin，当我使用它时，jQuery 不再使用自定义插件进行扩展，知道为什么会这样吗？它是否与使用 ES6 模块语法的插件有关？

我必须为jquery.sparkline.js 添加loader: "imports?define=>false" 才能使其被识别。这真的有必要吗，或者有更好的方法吗？

关于 jquery-ui，我必须找到一个不使用 AMD 定义的旧版本才能将其添加到 jquery 对象中。正确的做法是什么？

非常感谢任何帮助和建议，切换到 SystemJs 和 Jspm 的原因也可能是一个解决方案。

【问题讨论】：

"知道为什么会这样"---因为它创建了另一个 jquery 实例。我目前在调试器中，对于ProvidePlugin，它会创建物理上引用不同对象的模块别名。
好吧，我也是这么认为的。只是希望提供的 jquery 也具有以前所做的所有扩展。另外，我想知道为什么鼓励使用 ProvidePlugin，如果您不需要在窗口对象上使用“真实”全局变量，我想这很好。只是不适合我的用例。
为了让事情变得更好，您可以将 imports loader config 推送到 webpack.config.js。在我看来，这可能是你的方式。

标签： javascript webpack babeljs

【解决方案1】：

我对此有疑问，似乎是因为某些插件假定为$，而另一些插件假定为jQuery，但以下内容最终对我有用，即使它相当难看：

编辑，请注意，我正在测试名为 jquery.xyz.js 的插件，您必须适当调整正则表达式。另外，我不确定 jQuery 的两个不同的暴露加载器是否会导致问题，但到目前为止，这是可行的。

// webpack.config.js
...
"module": {
    "loaders": [
        {
            test: require.resolve("jquery"),
            loader: "expose?$!expose?jQuery"
        },
        {
            test:   /jquery\..*\.js/,
            loader: "imports?$=jquery,jQuery=jquery,this=>window"
        }
...

【讨论】：