管理webpack中的jQuery插件依赖关系

Question

管理webpack中的jQuery插件依赖关系我在我的应用程序中使用Webpack，在其中我创建了两个入口点-用于所有JavaScript文件/代码的bundle.js，以及用于jQuery和Reaction等所有库的vendors.js。为了使用具有jQuery的插件作为它们的依赖项，并且我也希望在vendors.js中使用这些插件，我应该做什么呢？如果这些插件有多个依赖项呢？目前我正尝试在这里使用jQuery插件-https://github.com/mbklein/jquery-elastic..Webpack文档提到提供冥王星和进口装载机。我使用了ProvidePlugin，但jQuery对象仍然不可用。以下是我的webpac.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' }         ]     }}但是，尽管如此，它仍然会在浏览器控制台中抛出一个错误：未定义的参考错误：jQuery未定义类似地，当我使用Imports-Loader时，它会抛出一个错误，要求未定义‘在这一行：var jQuery = require("jquery")但是，当我不将它添加到我的供应商js文件中时，我可以使用相同的插件，并以正常的AMD方式要求它，就像我如何包含我的其他JavaScript代码文件一样，比如-define([     'jquery',     'react',     '../../common-functions',     '../../libs/jquery.elastic.source'],function($,React,commonFunctions){     $("#myInput").elastic() //It works});但这不是我想要做的，因为这意味着jquery.plattic.source e.js与我的JavaScript代码一起捆绑在bundle.js中，并且我希望我的所有jQuery插件都在vendors.js包中。那么，我该如何实现这一目标呢？

Answer 1

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

1.喜欢不受限制的CommonJS/AMDdist

大多数模块将dist中的版本main他们的领域package.json..虽然这对大多数开发人员很有用，但是对于webpack来说，最好将src版本，因为通过这种方式，webpack能够更好地优化依赖项(例如，当使用DedupePlugin).

// webpack.config.jsmodule.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.使用进口-装载机配置this

一些遗留模块依赖于this是window对象。当在CommonJS上下文中执行模块时，这将成为一个问题this等号module.exports..在这种情况下，您可以重写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.使用进口-装载机禁用AMD

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

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

---

5.使用脚本加载器到全局导入脚本

如果您不关心全局变量，只想让遗留脚本工作，也可以使用脚本加载器。它在全局上下文中执行模块，就好像您已经通过<script>标签。

---

6.使用noParse包括大屏幕

如果没有AMD/CommonJS版本的模块，并且希望包含dist，您可以将此模块标记为noParse..然后WebPack将只包含模块而不解析它，这可以用来提高构建时间。这意味着任何要求天梯，就像ProvidePlugin是行不通的。

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

Answer 2

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

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

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

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

$ npm i jquery --save

有关此方法的工作示例，请随意使用我的应用程序。GitHub

Answer 3

我不知道我是否很清楚您想要做什么，但是我不得不使用jQuery插件，它要求jQuery位于全局上下文(窗口)中，并将以下内容放在entry.js:

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

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