在 webpack 中管理 jQuery 插件依赖

Question

我在我的应用程序中使用 Webpack，我在其中创建了两个入口点 - bundle.js 用于我的所有 JavaScript files/codes 和 vendors.js 用于所有库像 jQuery 和 React。我该怎么做才能使用具有 jQuery 作为其依赖项的插件，并且我希望它们也包含在 vendors.js 中？如果这些插件有多个依赖项怎么办？

目前我正在尝试使用此 jQuery 插件 - https://github.com/mbklein/jquery-elastic. The Webpack documentation mentions 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;

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

Uncaught ReferenceError: jQuery is not defined

同样，当我使用imports-loader时，它抛出一个错误，

require is not defined'

在这一行中：

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 与 bundle.js 中的 JavaScript 代码捆绑在一起，我想要我所有的 jQuery 个插件在 vendors.js 包中。那么我该如何实现呢？

Answer 1

您混合使用了不同的方法来包含遗留的供应商模块。这就是我的处理方式：

1。比 `dist`

更喜欢未压缩的 CommonJS/AMD

大多数模块 link 其 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"
        }
    ]
}

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

4。使用 imports-loader 禁用 AMD

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

可能有助于强制使用 CommonJS 路径

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

5。使用 script-loader 全局导入脚本

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

6.使用 `noParse` 来包含大的 dists

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

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

Answer 2

我不知道我是否理解你想要做什么，但我不得不使用 jQuery 需要 jQuery 在全局上下文中的插件（window) 然后我将以下内容放入 entry.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

我只需要在我想要的任何地方要求 jqueryplugin.min.js 和 window.$ 按预期使用插件扩展。

Answer 3

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

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

这意味着 jquery 可以通过全局引用 $ 和 jQuery.

从 JavaScript 源代码中访问

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

$ npm i jquery --save

有关此方法的工作示例，请随时在 github

上分叉我的应用程序

Answer 4

将此添加到 webpack.config.js

中的插件数组

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
})

然后通常需要 jquery

require('jquery');

如果让其他脚本看到它仍然很痛苦，请尝试通过（在入口 js 中）

将其显式放置在全局上下文中

window.$ = jQuery;

Answer 5

我找到的最佳解决方案是：

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

基本上，您需要在 typings.d.ts 上包含一个虚拟变量，从您的代码中删除任何 "import * as $ from 'jquery"，然后手动将标签添加到 jQuery 脚本到您的 SPA html。这样，webpack 就不会妨碍您，您应该能够在所有脚本中访问相同的全局 jQuery 变量。

Answer 6

这适用于 webpack 3:

在 webpack.config.babel.js 文件中：

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

并使用ProvidePlugin

new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
    })

Answer 7

我尝试了一些提供的答案，但其中 none 似乎有效。然后我试了这个：

new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});

似乎无论我使用哪个版本都有效

Answer 8

编辑：有时您想将 webpack 简单地用作简单 Web 项目的模块捆绑器 - 以保持您自己的代码井井有条。以下解决方案适用于那些只希望外部库在其模块内按预期工作的人——无需花费大量时间深入研究 webpack 设置。（-1后编辑）

如果您仍在苦苦挣扎或想避免外部配置/额外的 webpack 插件配置，请使用快速简单的 (es6) 解决方案：

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

模块内部：

const { jQuery: $, Underscore: _, etc } = window;

Answer 9

我将 $ 和 jQuery 作为 Webpack 3.8.1 及以下版本的全局变量公开时，一切正常。

安装 jQuery 作为项目依赖项。您可以省略 @3.2.1 以安装最新版本或指定其他版本。

npm install --save jquery@3.2.1

安装 expose-loader 作为开发依赖项（如果尚未安装）。

npm install expose-loader --save-dev

配置 Webpack 为我们加载和公开 jQuery。

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

Answer 10

这对我有用 webpack.config.js

    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),

在另一个 javascript 或 HTML 中添加：

global.jQuery = require('jquery');

Answer 11

在您的 webpack.config.js 文件中添加以下内容：

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

使用 npm 安装 jQuery：

$ npm i jquery --save

在 app.js 文件中添加以下行：

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

这对我有用。 :)

在 webpack 中管理 jQuery 插件依赖

Managing jQuery plugin dependency in webpack

javascript

jquery

amd

webpack

1。比 `dist`

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

3。使用 imports-loader 配置 `this`

4。使用 imports-loader 禁用 AMD

5。使用 script-loader 全局导入脚本

6.使用 `noParse` 来包含大的 dists

在 webpack 中管理 jQuery 插件依赖

Managing jQuery plugin dependency in webpack

javascript

jquery

amd

webpack

1。比 dist

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

3。使用 imports-loader 配置 this

4。使用 imports-loader 禁用 AMD

5。使用 script-loader 全局导入脚本

6.使用 noParse 来包含大的 dists

1。比 `dist`

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

3。使用 imports-loader 配置 `this`

6.使用 `noParse` 来包含大的 dists