web-dev-qa-db-ja.com

bootstrapを使用するWebpack-jqueryは定義されていません

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

上記の私の設定を参照してください。 「ncaught ReferenceError：jQuery is not defined（） from dropdown.js」というエラーが発生した理由

また、webpack.config.jsに次の行を含めました

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

しかし、運はありません-jQueryの未定義エラーがまだ残っています。何か案が ？誰かがこの問題を助けてくれますか？

どうもありがとう

jquerywebpack
46
Danny Kim

webpack ProviderPluginを使用してください。グローバルを使用することはお勧めできません。

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

これは動作します！

global.jQuery = require('jquery');

の代わりに

import $ from 'jquery';
21
Bhargav Ponnapalli

global.jQueryは私にとってはうまくいきませんでした。しかし、私はここで興味深い読み物を見つけました： http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

基本的な考え方は、ウェブパック「インポートローダー」を使用することです。ただし、デフォルトではインストールされないため、最初にインストールしてください（npm install --save imports-loader）。そしてwebpack.configでローダーに以下を追加します：

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

その後、通常どおりjqueryとbootstrap、または 'jQuery'で拡張する他のプラグインをインポートします。

よろしく

19
Sergiu Dogotaru

このコードを機能させるには、変更後にRESTART Nodeを実行する必要があります。

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

@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',
}),
]
5
Stf_F

Bootstrap 4.0およびWebpack 3を使用した個々のドロップダウンインポートに 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")

versus

Bootstrap全体をインポートする：require("./node_modules/bootstrap")

参照資料

2
Salticus

これは動作します

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

役に立てば幸いです

0
Jason Nelligan