管理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).//&nbsp;webpack.config.jsmodule.exports&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;resolve:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alias:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jquery:&nbsp;"jquery/src/jquery" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}};但是，在大多数情况下，dist版本也很好。2.使用ProvidePlugin注入隐式全局大多数遗留模块依赖于特定全局的存在，就像jQuery插件所做的那样$或jQuery..在这个场景中，您可以将webpack配置为var $ = require("jquery")每次它遇到全球$标识符var&nbsp;webpack&nbsp;=&nbsp;require("webpack"); &nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;plugins:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;webpack.ProvidePlugin({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$:&nbsp;"jquery", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery:&nbsp;"jquery" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;]3.使用进口-装载机配置this一些遗留模块依赖于this是window对象。当在CommonJS上下文中执行模块时，这将成为一个问题this等号module.exports..在这种情况下，您可以重写this带着进口-装载机.跑npm i imports-loader --save-dev然后module:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;loaders:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test:&nbsp;/[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loader:&nbsp;"imports-loader?this=>window" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]}Imports-Loader也可以用于手动注入各种类型的变量。但大多数时候ProvidePlugin当涉及到隐式全局值时更有用。4.使用进口-装载机禁用AMD有些模块支持不同的模块样式，如AMD、CommonJS和旧版。然而，大多数情况下，他们首先检查的是define然后使用一些奇怪的代码来导出属性。在这些情况下，通过设置define = false.module:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;loaders:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test:&nbsp;/[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loader:&nbsp;"imports-loader?define=>false" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;]}5.使用脚本加载器到全局导入脚本如果您不关心全局变量，只想让遗留脚本工作，也可以使用脚本加载器。它在全局上下文中执行模块，就好像您已经通过<script>标签。6.使用noParse包括大屏幕如果没有AMD/CommonJS版本的模块，并且希望包含dist，您可以将此模块标记为noParse..然后WebPack将只包含模块而不解析它，这可以用来提高构建时间。这意味着任何要求天梯，就像ProvidePlugin是行不通的。module:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;noParse:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/ &nbsp;&nbsp;&nbsp;&nbsp;]}

Answer 2

对于全局访问jQuery，有几个选项。在我最近的WebPack项目中，我希望全局访问jQuery，因此我在插件声明中添加了以下内容：&nbsp;plugins:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;webpack.ProvidePlugin({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$:&nbsp;"jquery", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jQuery:&nbsp;"jquery" &nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;]这意味着jQuery可以通过全局引用$和jQuery从JavaScript源代码中访问。当然，还需要通过NPM安装jQuery：$&nbsp;npm&nbsp;i&nbsp;jquery&nbsp;--save有关此方法的工作示例，请随意使用我的应用程序。GitHub

Answer 3

我不知道我是否很清楚您想要做什么，但是我不得不使用jQuery插件，它要求jQuery位于全局上下文(窗口)中，并将以下内容放在entry.js:var&nbsp;$&nbsp;=&nbsp;require('jquery');window.jQuery&nbsp;=&nbsp;$;window.$&nbsp;=&nbsp;$;我只需要在我想要的任何地方jqueryplugin.min.js和window.$与预期的插件一起扩展。