Question

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');

请参阅上面的设置。有些原因我从dropdown.js收到错误“未捕获的ReferenceError：jQuery未定义（）”

我还在webpack.config.js

中包含以下行

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

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

非常感谢

Answer 1

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

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

Answer 2

这会有效！

global.jQuery = require('jquery');

而不是

import $ from 'jquery';

Answer 3

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

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

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

之后只需导入jquery和bootstrap，或者通常在＆＃39; jQuery＆＃39;上扩展的其他插件。

问候

Answer 4

为了使此代码有效，您必须在更改后 RESTART Node ：

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

Answer 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',
}),
]

Answer 6

使用 Bootstrap 4.0 和 Webpack 3 为各个Dropdown导入安装并使用exports-loader。

// 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")

参考

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

Answer 7

这将起作用

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

它对我有用，希望有所帮助

Webpack使用bootstrap - jquery没有定义

7 个答案: