管理webpack中的jQuery插件依赖项

Question

我在我的应用程序中使用Webpack,在其中我创建了两个入口点 - 所有JavaScript文件/代码的bundle.js,以及jQuery和React等所有库的vendors.js.我怎么做才能使用jQuery作为依赖项的插件,我想在vendors.js中也有它们？如果这些插件有多个依赖项怎么办？

目前我正在尝试使用这个jQuery插件 - https://github.com/mbklein/jquery-elastic.Webpack文档提到了applyPlugin和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与我在bundle.js中的JavaScript代码捆绑在一起,我希望我的所有jQuery插件都在vendors.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插件做$或jQuery.在这种情况下,您可以配置webpack,以便在var $ = require("jquery")每次遇到全局$标识符时进行前置.

var webpack = require("webpack");

    ...

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

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

一些遗留模块依赖于this作为window对象.当模块在this等于的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-loader全局导入脚本

如果您不关心全局变量并且只想使用旧脚本,那么您也可以使用脚本加载器.它在全局上下文中执行模块,就像您通过<script>标记包含它们一样.

6. noParse用于包括大型dists

如果没有AMD/CommonJS版本的模块并且您想要包含dist该模块,则可以将此模块标记为noParse.然后webpack将包含模块而不解析它,这可用于改善构建时间.这意味着需要的任何功能AST,如ProvidePlugin,将无法正常工作.

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

Answer 2

对于jquery的全局访问,存在几个选项.在我最近的webpack项目中,我希望全局访问jquery,所以我在插件声明中添加了以下内容:

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

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

当然,您还需要通过npm安装jquery:

$ npm i jquery --save

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

Answer 3

我不知道我是否理解你想要做什么,但我不得不使用jQuery插件,需要jQuery在全局上下文(窗口),我把以下内容放在我的entry.js:

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

在我刚有需要的地方,我想的jqueryplugin.min.js和window.$扩展与插件如预期.

Answer 4

我在使用Webpack 3.8.1及以下内容公开$和jQuery使用全局变量时,工作得很好.

将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 5

在你的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.$ = $;

这对我有用.:)

Answer 6

将其添加到webpack.config.js中的plugins数组中

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

然后通常需要jquery

require('jquery');

如果痛苦持续让其他脚本看到它,请尝试通过(在条目js中)将其显式放置在全局上下文中

window.$ = jQuery;

Answer 7

我尝试了一些提供的答案,但似乎都没有.然后我尝试了这个:

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

无论我使用哪个版本,似乎都可以工作

Answer 8

这适用于webpack 3:

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

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

并使用ProvidePlugin

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