Javascript 如何正确地将jquery插件添加到Web包中的jquery对象？

TL；DR 使用插件扩展jQuery对象、全局公开它以及在webpack中使用外部AMD LIB和ES6模块的正确方法是什么？ webpack是完成此任务的合适工具，还是SystemJs更适合将遗留应用程序重构为ES6模块

我正试着用webpack和ES6模块来工作。我有一个传统的jquery应用程序，目前正在转换。我面临以下挑战：

在webpack/babel loader工作流中查找最佳实践

确定要用于哪个目的的加载程序/插件

获取AMD资源，如jquery和jquery插件，以便与其他模块配合使用

公开jqueryglobals，使用所有插件和jqueryui进行扩展

我依赖以下资源： 这个很好的答案解释了很多，尽管它没有提到我主要依赖的exports loader：

-文件列出了许多可能性，但我缺乏确定哪一种是正确的可能性的经验。似乎更倾向于使用ProvidePlugin而不是expose加载程序。遗憾的是，我没有让它与扩展jQuery对象一起工作。对于

标记中涉及的模块函数的使用，它也不起作用

我仍然在努力寻找编程解决方案，并决定哪一个网页插件适合这份工作。非常感谢有经验的网页用户提供的一些建议或示例

在我的

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”

，以便识别它。这真的有必要，还是有更好的方法

关于jqueryui，我必须找到一个没有使用AMD define的旧版本，以便将其添加到jquery对象中。正确的方法是什么

---

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

我对此有问题，似乎是因为一些插件假定

$

，而其他插件假定

jQuery

，但以下内容最终对我有效，即使它相当难看：

Edit，注意我正在测试名为

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"
        }
...

---

“知道为什么会这样吗”——因为它创建了另一个jquery实例。我目前在调试器中，对于

ProvidePlugin

，它会创建物理上引用不同对象的模块别名。只希望提供的jquery也具有以前所做的所有扩展。另外，我想知道为什么鼓励使用ProvidePlugin，如果您不需要在窗口对象上使用“真正的”全局变量，我想这是很好的。只是不适合我的用例。为了让事情变得更好，你可以把它推到

webpack.config.js

。在我看来，这可能是你成功的途径。