关于javascript：在webpack中管理jQuery插件依赖项


Managing jQuery plugin dependency in webpack

我在我的应用程序中使用Webpack，其中我创建了两个入口点——bundle.js用于所有的javascript文件/代码，vendors.js用于所有的库，如jquery和react。我该怎么做才能使用以jquery作为依赖项的插件，并且希望它们也在vendors.js中？如果这些插件有多个依赖项呢？

目前我正在尝试在这里使用这个jquery插件-https://github.com/mbklein/jquery-leastic。webpack文档提到provideplugin和imports加载器。我使用了provideplugin，但jquery对象仍然不可用。以下是我的webpack.config.js的外观-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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

同样，当我使用导入加载器时，它会抛出一个错误，

require is not defined'

在这一行中：

1
var jQuery = require("jquery")

但是，我可以在不将它添加到vendors.js文件中时使用相同的插件，而是以正常的amd方式使用它，就像我如何包含其他javascript代码文件一样，比如-

1
2
3
4
5
6
7
8
9
10
define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

但这不是我想做的，因为这意味着jquery.slastic.source.js与我的javascript代码捆绑在bundle.js中，我希望所有jquery插件都在vendors.js包中。那么我该如何实现这个目标呢？

相关讨论

您已经混合了不同的方法来包括遗留供应商模块。我就是这样处理的：

1。比dist更喜欢未完成的commonjs/amd

大多数模块在其package.json的main字段中链接dist版本。虽然这对大多数开发人员都很有用，但对于Webpack，最好将其命名为src版本，因为这样Webpack可以更好地优化依赖关系(例如，在使用DedupePlugin时)。

1
2
3
4
5
6
7
8
9
10
// webpack.config.js

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

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

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

大多数遗留模块依赖于特定全局的存在，比如jquery插件在$或jQuery上。在这种情况下，您可以配置Webpack，以便在每次遇到全局$标识符时预先发送var $ = require("jquery")。

1
2
3
4
5
6
7
8
9
10
var webpack = require("webpack");

    ...

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

三。使用导入加载器配置this。

一些遗留模块依赖于this作为window对象。当模块在通用JS上下文中执行时，这就成了一个问题，其中this等于module.exports。在这种情况下，您可以使用导入加载器覆盖this。

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

1
2
3
4
5
6
7
8
module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader:"imports-loader?this=>window"
        }
    ]
}

导入加载器还可以用于手动插入各种变量。但在大多数情况下，当涉及到隐含的全局变量时，ProvidePlugin更有用。

4。使用导入加载程序禁用AMD

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

1
2
3
4
5
6
7
8
module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader:"imports-loader?define=>false"
        }
    ]
}

5。使用脚本加载程序全局导入脚本

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

6。使用noParse包括大距离

如果没有AMD/CommonJS版本的模块，并且您希望包含dist，则可以将此模块标记为noParse。然后Webpack将只包含模块而不解析它，这可以用来提高构建时间。这意味着任何需要AST的功能，如ProvidePlugin，都不会工作。

1
2
3
4
5
module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}
相关讨论

对于jquery的全局访问，则存在几个选项。在我最近的Webpack项目中，我希望全局访问jquery，因此我在插件声明中添加了以下内容：

1
2
3
4
5
6
 plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery"
    })
  ]

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

当然，您还需要通过NPM安装jquery：

1
$ npm i jquery --save

对于这种方法的一个工作示例，请随意在Github上使用我的应用程序。

相关讨论

我不知道我是否很清楚您想做什么，但我不得不使用jquery插件，它要求jquery在全局上下文(window)中，我将以下内容放入我的entry.js中：

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

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

相关讨论

我将$和jQuery作为全局变量与Webpack3.8.1及以下内容一起公开，使事情进展顺利。

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

1
npm install --save jquery@3.2.1

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

1
npm install expose-loader --save-dev

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 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'
    })
  ]
}
相关讨论

将它添加到webpack.config.js中的插件数组中

1
2
3
4
new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
})

然后通常需要jquery

1
require('jquery');

如果pain继续让其他脚本看到它，请尝试通过(在条目JS中)将其显式地放在全局上下文中。

1
window.$ = jQuery;

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

1
2
3
4
5
6
7
 var webpack = require("webpack");
 plugins: [
    new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery"
    })
 ],

使用NPM安装jquery:

1
$ npm i jquery --save

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

1
2
3
import $ from 'jquery';
window.jQuery = $;
window.$ = $;

这对我很有用。：)

相关讨论

这适用于Webpack3：

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

1
2
3
4
5
6
resolve: {
    alias: {
         jquery:"jquery/src/jquery"
    },
 ....
}

并使用ProvidePlugin

1
2
3
4
new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
    })
相关讨论

我试了一些提供的答案，但没有一个有效。然后我试了一下：

1
2
3
4
5
6
new webpack.ProvidePlugin({
    'window.jQuery'    : 'jquery',
    'window.$'         : 'jquery',
    'jQuery'           : 'jquery',
    '$'                : 'jquery'
});

不管我用的是哪个版本，都能正常工作

相关讨论

这在webpack.config.js上对我很有用

1
2
3
4
5
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),

在另一个javascript或HTML中添加：

1
global.jQuery = require('jquery');

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

https://github.com/angular/angular cli/issues/5139问题注释-283634059

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

编辑：有时你只想把Webpack作为一个简单的Web项目的模块绑定器来使用——以保持你自己的代码井然有序。以下解决方案适用于那些只希望外部库在其模块内按预期工作的用户，而不需要花费大量时间进行Webpack设置。(在-1之后编辑)

快速简单(ES6)解决方案如果您仍在苦苦挣扎或希望避免外部配置/附加Webpack插件配置：

1
2
3
4
<script src="cdn/jquery.js">
<script src="cdn/underscore.js">
<script src="etc.js">
<script src="bundle.js">

模块内部：

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