在 webpack 中管理 jQuery 插件依赖

Question

我在我的应用程序中使用 Webpack，在其中我创建了两个入口点 - bundle.js 用于我的所有 JavaScript 文件/代码，以及 vendor.js 用于所有库，如 jQuery 和 React。为了使用以 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")

但是，当我不将它添加到我的 vendor.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 包中。那么我该如何实现呢？

原文由 booleanhunter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您已经混合了如何包含旧供应商模块的不同方法。这就是我要解决的方法：

1. 比 dist 更喜欢未缩小的 CommonJS/AMD

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

 // webpack.config.js

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

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

---

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

大多数遗留模块依赖于特定全局变量的存在，例如 jQuery 插件在 $ 或 jQuery 上所做的。在这种情况下，您可以配置 webpack，在每次遇到全局 $ 标识符时添加 var $ = require("jquery") 。

 var webpack = require("webpack");

 ...

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

---

3.使用 imports-loader 来配置 this

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

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

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

import-loader 也可以用来手动注入各种变量。但大多数时候， ProvidePlugin 在隐式全局变量方面更有用。

---

4.使用 imports-loader 禁用AMD

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

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

---

5.使用 script-loader （不再托管）全局导入脚本

如果您不关心全局变量并且只希望遗留脚本工作，您也可以使用脚本加载器。它在全局上下文中执行模块，就像您通过 <script> 标记包含它们一样。

---

6. 使用 noParse 包含大的 dist

当没有 AMD/CommonJS 版本的模块并且您想要包含 dist 时，您可以将此模块标记为 noParse 。然后 webpack 将只包含模块而不解析它，这可用于改善构建时间。这意味着任何需要 AST 的功能，例如 ProvidePlugin ，都将不起作用。

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

原文由 Johannes Ewald 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 jquery 的全局访问，存在几个选项。在我最近的 webpack 项目中，我想要全局访问 jquery，所以我在我的插件声明中添加了以下内容：

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

这意味着可以通过全局引用 $ 和 jQuery 从 JavaScript 源代码中访问 jquery。

当然，你还需要通过 npm 安装 jquery：

 $ npm i jquery --save

有关此方法的工作示例，请随时在 github 上分叉我的应用程序

原文由 arcseldon 发布，翻译遵循 CC BY-SA 3.0 许可协议