管理webpack中的jQuery插件依赖项

2018-06-23 00:23:07

我在我的应用程序中使用了Webpack，在该应用程序中创建了两个入口点 - 所有JavaScript文件/代码的bundle.js和所有库（如jQuery和React）的vendors.js。我为了使用jQuery作为它们的依赖关系的插件而做了什么，我想让它们也在vendors.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",
            "windows.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包中。那么我该如何去实现呢？

你已经混合了不同的方法如何包含传统的供应商模块。这是我如何解决它的：

1.不想unminified CommonJS的/ AMD超过`dist`

大多数模块在package.json的main字段中链接dist版本。虽然这对大多数开发人员非常有用，但对于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对象。当模块中的上下文CommonJS的其中执行这将成为一个问题this等于module.exports 。在这种情况下，您可以使用imports-loader来覆盖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.使用imports-loader禁用AMD

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

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

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

如果你不关心全局变量，只想让遗留脚本工作，你也可以使用脚本加载器。它在全局上下文中执行该模块，就像通过<script>标记包含它们一样。

6.使用`noParse`包含较大的dists

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

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

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

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

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

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

$ npm i jquery --save

对于这种方法的工作示例，请随时在github上分发我的应用程序

我不知道我是否理解你正在尝试做什么，但我必须使用jQuery插件，它需要jQuery位于全局上下文（窗口）中，并将以下内容放入我的entry.js ：

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

我只需要在需要jqueryplugin.min.js和window.$任何地方使用插件。

链接地址: http://www.djcxy.com/p/64543.html

上一篇: Managing jQuery plugin dependency in webpack

下一篇: Media Queries: How to target desktop, tablet and mobile?

管理webpack中的jQuery插件依赖项

1.不想unminified CommonJS的/ AMD超过dist

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