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

javascript jquery amd webpack

2022-08-29 23:09:45

我在我的应用程序中使用Webpack，其中我创建了两个入口点 - 捆绑.js用于我的所有JavaScript文件/代码，以及供应商.js用于所有库，如jQuery和React。我该怎么做才能使用以jQuery作为其依赖项的插件，并且我希望将它们也放在供应商.js？如果这些插件有多个依赖项怎么办？

目前，我正在尝试在这里使用此jQuery插件 - https://github.com/mbklein/jquery-elastic。Webpack 文档提到提供Plugin 和 import-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

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

未定义需求'

在此行中：

var jQuery = require("jquery")

但是，当我不将其添加到供应商.js文件时，我可以使用相同的插件，而是以正常的AMD方式要求它，就像我包含其他JavaScript代码文件一样，例如 -

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

但这不是我想做的，因为这意味着jquery.elastic.source.js与我的JavaScript代码捆绑在捆绑包中.js，我希望我所有的jQuery插件都在供应商.js捆绑包中。那么，我该如何实现这一目标呢？

答案 1

您已经混合了不同的方法来包含旧版供应商模块。这就是我要处理它的方法：

1. 更喜欢未被破坏的 CommonJS/AMD 而不是`dist`

大多数模块在其领域链接版本。虽然这对大多数开发人员都很有用，但对于webpack来说，最好对版本进行别名，因为这样webpack能够更好地优化依赖关系（例如，在使用DedupePlugin时）。distmainpackage.jsonsrc

// webpack.config.js

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

但是，在大多数情况下，该版本也可以正常工作。dist

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

大多数遗留模块依赖于特定全局变量的存在，就像 jQuery 插件在或上所做的那样。在此方案中，您可以配置 webpack，以便在每次遇到全局标识符时都预先挂起。$jQueryvar $ = require("jquery")$

var webpack = require("webpack");

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

3. 使用导入加载程序配置`this`

一些遗留模块依赖于成为对象。当模块在 CommonJS 上下文中执行时，这成为一个问题，其中等于。在这种情况下，您可以使用导入加载程序进行覆盖。thiswindowthismodule.exportsthis

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

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

导入加载程序还可用于手动注入各种变量。但大多数时候，当涉及到隐式全局变量时，它更有用。ProvidePlugin

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

有些模块支持不同的模块样式，如AMD，CommonJS和legacy。但是，大多数情况下，他们首先检查然后使用一些古怪的代码来导出属性。在这些情况下，可以通过设置来强制使用 CommonJS 路径。definedefine = false

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

5. 使用脚本加载程序（不再受控制）全局导入脚本

如果您不关心全局变量，只想让旧脚本正常工作，则还可以使用脚本加载程序。它在全局上下文中执行模块，就像您通过标记包含它们一样。<script>

6.用于包括大块`noParse`

当没有 AMD/CommonJS 版本的模块并且您希望包含时，可以将此模块标记为。然后webpack将只包含模块而不解析它，这可以用来缩短构建时间。这意味着任何需要 AST 的功能（如）都不起作用。distnoParseProvidePlugin

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

答案 2

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

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

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

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

$ npm i jquery --save

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

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

1. 更喜欢未被破坏的 CommonJS/AMD 而不是dist

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

3. 使用导入加载程序配置this