使用 webpack 2 加载 jQuery 个插件

Question

一天中大部分时间都在谷歌搜索和尝试后 - 我没有让它工作，此时我不确定缺少什么。
我已经让 jQuery 在 webpack.common.js:

工作（并验证它有效）

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

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

我在 app.module.ts 中尝试了 require/include 的各种组合。
喜欢（包括将它们分配给 constant/var 但 import/require 总是给出此错误）：

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

你以前试过这个版本吗？

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

Answer 2

看起来 webpack.ProvidePlugin 以某种方式使声明的全局变量在 Webpack 2 中不可变。

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

我建议您创建一个包含必要 jQuery 插件的单一定义 "requires"，它对我有用，例如：

((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 3

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

所以我"solved"部分使用了 webpack 的外部选项。

我 Link 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>

我在 webpack.config

上指定 "externals" 选项

externals: {
    jquery: 'jQuery'
}

并添加 ProvidePlugin

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

在应用程序文件中，我导入 jquery 并像这样使用插件

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

如果有人能告诉我如何将 jQuery 与 Webpack 2

捆绑在一起，我将不胜感激

Answer 4

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

首先安装暴露加载器：

npm install expose-loader --save-dev

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

import "expose-loader?$!jquery";

使用 webpack 2 加载 jQuery 个插件

Loading jQuery plugins with webpack 2

jquery

webpack

webpack-2