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

Webpack using bootstrap - jquery is not defined

提问by Danny Kim

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

Please refer above my setting . Some reason I've got error saying "Uncaught ReferenceError: jQuery is not defined()from dropdown.js

请参考上面我的设置。我收到错误消息的原因是“ Uncaught ReferenceError: jQuery is not defined()from dropdown.js

I also included the following lines at webpack.config.js

我还在 webpack.config.js 中包含了以下几行

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

But, No luck - Still having jQuery undefined error. Any idea ? Can someone help this issue please?

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

Many thanks

非常感谢

回答by xushao

please use webpack ProviderPlugin, use global is not a good idea.

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

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

回答by Bhargav Ponnapalli

This will work!

这会奏效！

global.jQuery = require('jquery');

instead of

代替

import $ from 'jquery';

回答by Sergiu Dogotaru

global.jQuery did not work for me. But I found an interesting read here: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

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

The basic idea is to use webpacks 'imports-loader'. Notice, though, that it's not installed by default, so first thing install (npm install --save imports-loader). And in webpack.config add to your loaders the following:

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

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

After that just import jquery and bootstrap, or some other plugins extending on 'jQuery', as usually.

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

regards

问候

回答by Ro.

In order for this code to work you must RESTART Nodeafter the change:

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

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

回答by Stf_F

As mentioned by @Ro don't forget to restart the node server, the changes to the webpack will otherwise not be taken into account.

正如@Ro 提到的，不要忘记重新启动节点服务器，否则不会考虑对 webpack 的更改。

I confirm that once these lines added and the server restarted the error vanishes.

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

With Bootstrap 4 an updated version of the webpack.config.js will look actually like this because of its dependency with Tether:

在 Bootstrap 4 中，webpack.config.js 的更新版本实际上看起来像这样，因为它依赖于 Tether：

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

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

回答by Salticus

Install and use exports-loaderfor individual Dropdown imports with Bootstrap 4.0and Webpack 3.

使用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",
       })

---

---

Plugin or Individual import: require("./node_modules/bootstrap/js/dist/dropdown")

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

versus

相对

Importing Bootstrap in its entirety:require("./node_modules/bootstrap")

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

---

---

References

参考

• the Bootstrap 4.0 note on importing individual Bootstrap plugins with webpack
• xushao's answer
• Bhavyanshu Parasher's blog

• 关于使用 webpack导入单个 Bootstrap 插件的 Bootstrap 4.0 说明
• 徐绍的回答
• Bhavyanshu Parasher 的博客

回答by Jason Nelligan

this will work

这会起作用

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

It worked for me hope it helps

它对我有用希望它有帮助