使用引导程序的 Webpack - 未定义 jquery答案

【问题标题】：Webpack using bootstrap - jquery is not defined使用引导程序的 Webpack - 未定义 jquery
【发布时间】：2016-10-05 16:23:04
【问题描述】：

import $ from 'jquery';
require("./node_modules/bootstrap/dist/css/bootstrap.min.css")
require("./node_modules/bootstrap/js/dropdown.js")
import React from 'react';
import ReactDOM from 'react-dom';
var _ = require('lodash');

请参考上面我的设置。某些原因我有错误说“Uncaught ReferenceError: jQuery is not defined() from dropdown.js

我还在 webpack.config.js 中加入了以下几行

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

但是，没有运气 - 仍然有 jQuery 未定义错误。任何想法？有人可以帮忙解决这个问题吗？

非常感谢

【问题讨论】：

github.com/AngularClass/angular-starter/issues/696 MurhafSousli 好答案

标签： jquery webpack

【解决方案1】：

请使用 webpack ProviderPlugin，使用 global 不是一个好主意。

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

【讨论】：

谢谢。刚刚救了我window.jQuery = require('jquery')
它不是到处加载 jquery 吗？有没有办法只在执行import 'jquery' 时设置jQuery？
我无法让它与 VS.net 2017 和 WebPack 2 一起使用......甚至重新启动了整个机器一次以绝对确定节点重新启动。一个做不相关的 Aurelia 原型的同事在 vs 2017 和 webpack 2 中也遇到了同样的问题，这对他也不起作用，所以他最终不得不绕过它。

【解决方案2】：

这行得通！

global.jQuery = require('jquery');

而不是

import $ from 'jquery';

【讨论】：

这是我让 jQuery 作为 Kendo UI 的依赖项工作的唯一方法。谢谢
对我不起作用。不过，上面的方法已经奏效了：stackoverflow.com/a/39283602/541961
使用ProvidePlugin会好很多
谢谢。在 Laravel mix 中尝试了很多其他东西之后，这对我有用。
Jquery 使用 webpack 会更难吗？不，不，如果它尝试过，它就做不到。在我找到这个之前，我必须通过这个页面上的每个解决方案来工作。

【解决方案3】：

global.jQuery 对我不起作用。但我在这里发现了一篇有趣的文章：http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

基本思想是使用 webpacks 'imports-loader'。但是请注意，默认情况下它没有安装，所以首先安装（npm install --save imports-loader）。在 webpack.config 中添加以下内容：

{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' }

之后只需导入 jquery 和 bootstrap，或者像往常一样在 'jQuery' 上扩展的一些其他插件。

问候

【讨论】：

有效。但我必须将加载程序设置为“import-loader”，例如：{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports-loader?jQuery=jquery,$=jquery,this=>窗口'}
您是要链接回这个问题还是其他问题？
@sean-the-bean 绝对不想链接回这个问题，感谢您指出这一点。我已经编辑了帖子，蚂蚁更正了链接。

【解决方案4】：

为了使此代码能够工作，您必须在更改后重新启动节点：

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

【讨论】：

【解决方案5】：

正如@Ro 所说，不要忘记重新启动节点服务器，否则对 webpack 的更改将不会被考虑在内。

我确认，一旦添加了这些行并且服务器重新启动，错误就会消失。

使用 Bootstrap 4 的更新版本的 webpack.config.js 将看起来像这样，因为它依赖于 Tether：

plugins: [
// ...plugins...
new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: 'jquery',
  "window.jQuery": 'jquery',
  tether: 'tether',
  Tether: 'tether',
  'window.Tether': 'tether',
}),
]

【讨论】：

【解决方案6】：

通过 Bootstrap 4.0 和 Webpack 3 安装并使用 exports-loader 进行单独的 Dropdown 导入。

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
       })

插件或单独导入：require("./node_modules/bootstrap/js/dist/dropdown")

对

完整导入 Bootstrap：require("./node_modules/bootstrap")

参考文献

Bootstrap 4.0 关于导入individual Bootstrap plugins with webpack 的说明
xushao's answer
Bhavyanshu Parasher's blog

【讨论】：

【解决方案7】：

这会起作用

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

对我有用，希望对你有帮助

【讨论】：

小姐：const webpack = require("webpack");