Question

在谷歌搜索和尝试的大部分时间后 - 我没有让它工作，在这一点上我不确定缺少什么。
我已经在webpack.common.js中运行了jQuery（并验证了它的工作原理）：

new ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })

例如我有一个“MetisMenu”插件，我应该在哪里配置它？

我在app.module.ts中尝试了require/include的各种组合喜欢（包括将它们分配给常量/ var但导入/需要总是给出这个错误）：

import 'metismenu';
jQuery(...).metisMenu is not a function

import { metisMenu } from 'metismenu';
Cannot assign to read only property 'exports' of object '#<Object>'

require ('metismenu');
Cannot assign to read only property 'exports' of object '#<Object>'

import * as jQuery from 'jquery';
import "metismenu";
Cannot assign to read only property 'exports' of object '#<Object>'

Answer 1

我遇到了同样的问题。我无法将Jquery和外部插件与webpack 2捆绑在一起。

所以我＆＃34;解决了＃34;部分使用webpack的外部选项。

我链接CDN库（jquery和其他jquery插件）。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js" crossorigin="anonymous"></script>

我指定＆＃34; externals＆＃34;我的webpack.config上的选项

externals: {
    jquery: 'jQuery'
}

并添加ProvidePlugin

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })

在app文件中，我导入jquery并使用像这样的插件

 import * as $ from 'jquery';
 $('.accordion').accordion();

我很感激，如果有人能告诉我如何将jQuery与Webpack 2捆绑在一起

Answer 2

你以前试过这个版本吗？

new webpack.ProvidePlugin({
        'jQuery': 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',
    }),

Answer 3

看起来webpack.ProvidePlugin在Webpack 2中以某种方式声明了global不可变。

我无法从模块修改jQuery，然后在另一个模块上使用修改后的jQuery（听说，添加一个添加了自己的$ .fn的jQuery插件。）。

我建议你创建一个包含必要的jQuery插件“require”的单个定义，它对我有用，例如：

((root, factory) => {
    // AMD. Register as an anonymous module.
    define([
        'modernizr'
    ], factory);
})(this, (Modernizr) => {

    // Do the requires here instead of doing it on the main file

    // Fix broken $.animate so Slick can work with
    require('./animatePolyfill');

    // Inject carousel there
    require('slick-carousel');

    class Core extends PluginBase {
    ...

Answer 4

使用webpack 2，您现在可以使用expose-loader模块来完成此任务。

首先安装expose-loader：

npm install expose-loader --save-dev

然后在更改导入（或require）时使用以下语法：

import "expose-loader?$!jquery";

使用webpack 2加载jQuery插件

4 个答案: