管理webpack中的jQuery插件依赖

我在我的应用程序中使用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;

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

未定义jQuery

类似地，当我使用导入加载器时，它抛出一个错误，

Require没有定义

在这一行中:

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捆绑包中。那么我该怎么做呢?

当前回答

这适用于webpack 3:

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

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

并使用ProvidePlugin

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

2017-07-30 21:12:41

其他回答

我不知道我是否很好地理解你要做的事情，但我不得不使用jQuery插件，需要jQuery在全局上下文中(窗口)，我把以下内容放在我的entry.js:

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

我只需要我想要的任何地方的jqueryplugin.min.js和窗口。$按预期与插件一起扩展。

2015-05-19 17:11:44

我尝试了一些提供的答案，但似乎没有一个奏效。然后我试了一下:

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

似乎工作，无论我使用哪个版本

2017-08-31 00:26:45

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

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

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

2017-05-23 18:55:55

在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'
    })
  ]
}

2017-10-25 16:39:45

编辑:有时候你想把webpack简单地用作一个简单的web项目的模块打包器——让你自己的代码有条理。下面的解决方案是为那些只是想要一个外部库在他们的模块中正常工作的人准备的——而不需要花费大量的时间在webpack设置上。(-1后编辑)

快速简单(es6)解决方案，如果你仍然挣扎或想避免外部配置/额外的webpack插件配置:

<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;

2017-09-30 05:59:05

管理webpack中的jQuery插件依赖

推荐文章

最新文章

标签