如何在webpack中正确添加jquery插件到jquery对象？

Question

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

我正在尝试使用webpack和ES6模块.我有一个遗产主要是jquery应用程序,我目前正在转换.我面临以下挑战:

1. 在webpack/babel-loader工作流程中找到最佳实践
2. 弄清楚哪个加载器/插件用于哪个目的
3. 获得像jquery和jquery插件这样的AMD资源,以便与其他模块一起使用.
4. 暴露jquery全局变量,扩展了所有插件和jquery-ui

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

http://webpack.github.io/docs/shimming-modules.html - 文档列出了许多可能性,但我没有经验来决定哪一个是正确的.似乎最好使用ProvidePlugin而不是expose-loader.可悲的是,我没有使用扩展的jQuery对象.它也不能用于<script>标记中调用的模块函数.

我仍然很难找到编程解决方案,并决定哪个webpack插件是正确的.非常感谢来自经验丰富的webpack用户的一些建议或示例.

在我的webpack.config.js我有以下装载机暴露jquery和巴贝尔变换:

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模块语法的插件有关？

我不得不添加loader: "imports?define=>false"为jquery.sparkline.js得到它被recogniced.这真的有必要,还是有更好的方法呢？

关于jquery-ui我必须找到一个没有使用AMD定义的旧版本来将它添加到jquery对象中.什么是正确的方法呢？

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

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