在Webpack中管理jQuery插件依赖性

Question

我在应用程序中使用Webpack，在其中创建两个入口点-
所有我的JavaScript文件/代码的bundle.js，以及所有库（如jQuery和React）的vendor.js。为了使用以jQuery为依赖项的插件，并且我也希望在vendor.js中使用它们，我该怎么做？如果这些插件具有多个依赖项怎么办？

目前，我正在尝试在此处使用此jQuery插件-https: //github.com/mbklein/jquery-
elastic
。Webpack文档中提到了providePlugin和imports-
loader。我使用了ProvidePlugin，但是jQuery对象仍然不可用。这是我的webpack.config.js的样子-

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

但是尽管如此，它仍然在浏览器控制台中引发错误：

未捕获的ReferenceError：未定义jQuery

同样，当我使用imports-loader时，它会引发错误，

要求未定义”

在这一行：

var jQuery = require("jquery")

但是，当我不将其添加到vendors.js文件中时，可以使用相同的插件，而是以普通的AMD方式要求它，就像我包含其他JavaScript代码文件一样，例如-

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

但这不是我想要做的，因为这意味着jquery.elastic.source.js和我的JavaScript代码一起捆绑在bundle.js中，并且我希望我所有的jQuery插件都在vendor.js捆绑包中。那么我该如何实现呢？

Answer 1

您已经混合了各种方法来包括旧供应商模块。这是我要解决的方法：

1.优先使用最小的CommonJS / AMD dist

大多数模块dist在其main字段中链接版本package.json。尽管这对于大多数开发人员很有用，但对于webpack而言，最好为src版本加上别名，因为webpack能够更好地优化依赖关系（例如，使用时DedupePlugin）。

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

但是，在大多数情况下，该dist版本也可以正常工作。

2.使用ProvidePlugin注入隐式全局变量

大多数旧版模块都依赖于特定全局变量的存在，例如jQuery插件on $或jQuery。在这种情况下，您可以配置webpack，使其在var $ = require("jquery")每次遇到全局$标识符时都在前面。

var webpack = require("webpack");

    ...

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

3.使用imports-loader进行配置this

一些旧模块依赖于this成为window对象。当模块在thisequals
的CommonJS上下文中执行时，这将成为问题module.exports。在这种情况下，您可以this使用imports-
loader覆盖。

运行npm i imports-loader --save-dev然后

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

imports-loader也可以用于手动注入各种变量。但是在大多数情况下，ProvidePlugin当涉及到隐式全局变量时，它会更有用。

4.使用imports-loader禁用AMD

有些模块支持不同的模块样式，例如AMD，CommonJS和legacy。但是，大多数情况下，它们首先检查define然后使用一些古怪的代码导出属性。在这些情况下，通过设置可以帮助强制CommonJS路径define = false。

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

5.使用脚本加载器全局导入脚本

如果您不关心全局变量，而只希望使用旧脚本，则也可以使用脚本加载器。它将在全局上下文中执行模块，就像您已通过<script>标签将其包括在内一样。

6. noParse用于包括大距离

如果该模块没有AMD /CommonJS版本，并且要包含dist，则可以将此模块标记为noParse。然后，webpack将仅包含模块而不对其进行解析，这可用于缩短构建时间。这意味着任何需要AST的功能（例如ProvidePlugin）都将无法使用。

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}