相关疑难解决方法(0)

我在我的应用程序中使用Webpack,在其中我创建了两个入口点 - 所有JavaScript文件/代码的bundle.js,以及jQuery和React等所有库的vendors.js.我怎么做才能使用jQuery作为依赖项的插件,我想在vendors.js中也有它们？如果这些插件有多个依赖项怎么办？

目前我正在尝试使用这个jQuery插件 - https://github.com/mbklein/jquery-elastic.Webpack文档提到了applyPlugin和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 …

我正在使用Webpack构建一个Angular 1.4项目.该项目使用了几个jQuery插件,这些插件包含在angular指令中.那些指令在内部使用angular.element,可能暗示angular.element是真正的jQuery,而不是jqLit​​e.

我想使用angular来自动检测jQuery并使用它代替jqLit​​e.我试图在我的入口点模块中本地需要jquery app.js:require('jquery')并使用全局公开jQuery require(expose?$!expose?jQuery!jquery).

不过,无论我做什么,都angular.element指的是jqLit​​e.

我的研究得出了一些结论:

1. 即使作为CommonJS模块导入,Angular也会将自己分配给一个全局变量window.angular,所以我不需要expose使用Webpack:当作为CommonJS模块加载时,Angular会将自身全局分配给`window.angular`吗？.
2. ProviderPlugin似乎没有做到这一点:它没有将jQuery暴露给全局命名空间; 相反,对于依赖于全局名称jQuery的每个模块,它都会插入require('jquery')其中.我不是100%肯定,但看起来像角不访问jQuery直接,相反,它试图访问从全局命名空间window.jQuery中bindJQuery的功能,所以这也是没有办法:暴露了jQuery用的WebPack真正的Window对象.
3. 出于与ProviderPlugin相同的原因,imports-loader似乎不合适:Angular想要window.jQuery,而不仅仅是jQuery.
4. 使用expose-loader,jquery使它成为窗口对象.我的问题是,Babel将其所有导入提升到生成的代码中的模块顶部.因此,虽然在源文件require(expose?jquery!jquery)之前,但是在jquery之前import angular from "angular",bundle require("angular")中位于文件的顶部,因此在导入Angular时,jquery尚不可用.我想知道,如何使用带有ECMA6导入语法的Webpack加载器.
5. 有人建议使用import语法而不是require语法与jquery:import "jquery"或者import $ from "jquery",不是require(jquery):(Petr Averyanov:如何使用ECMAScript 6导入的Webpack加载器语法(导入/导出/公开)？).jquery源代码包装有一个特殊的包装器,它确定了如何需要jquery(使用AMD/require,CommonJS或global with <script>语句).基于此,它 …