web-dev-qa-db-ja.com

webpackを使用してbootstrapをロードするときに「jquery is not defined」

私はちょうどWebpackの使い方を習い始めたところです（以前は手動で個別のスクリプトを個別に含める方法を使っていました）。そして、bootstrap-loaderブートストラップをロードします。これが私のwebpack.config.jsです

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
    context: __dirname,

    entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js",
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS
            { test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css
            // images
            { test: /\.png$/, loader: 'url-loader?limit=100000'},
            { test: /\.jpg$/, loader: 'file-loader'},
            // bootstrap image files
            { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ],
    },

    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        extensions: ['', '.js', '.jsx'],
        jquery: './vendor/jquery/jquery.js',
    },
}

そして、ここに私のentry.jsがあります

global.jQuery = global.$ = require('jquery');
require('bootstrap-loader');

これはうまくいくようです。しかし、私はこれを以前に使用し、機能しませんでした：

window.jQuery = window.$ = require('jquery');

上記の行は、非常に多くの人々から提案されたものです。しかし、ページを読み込むときにエラーが発生するだけです。ほんの一部の例： some SO question 、 webpack issue 、 another SO question 。

後で見つけました この質問 、および この質問 。そのため、ページは実際にbootstrap js機能も同様に機能します。

関連する場合には、package.jsonも追加します。

{
  "author": "franklingu",
  "dependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "bootstrap-loader": "^1.2.0-beta.1",
    "bootstrap-sass": "^3.3.7",
    "extract-text-webpack-plugin": "^1.0.1",
    "jquery": "^3.1.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "webpack": "^1.13.1",
    "webpack-bundle-tracker": "0.0.93"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "node-sass": "^3.8.0",
    "resolve-url-loader": "^1.6.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  }
}

Webpackは初めてですが、JSは初めてではありません。私はなぜwindow.$ 動かない。

そして、webpackの場合、なぜプラグインでこれを提案した人もいるのだろうか：

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

一部の人々はこれを提案しています（私にとってもうまくいかなかった）：

 resolve: {
    alias: {
        jquery: "jquery/src/jquery"
    }
}

しばらくの間ノードで遊んでみましたが、ノードが読み込みにリクエストjsを使用していることを思い出しました（ただし、一般的なvs要求vs AMDの違いについてはあまり明確ではありません）。しかし、なぜ一部の人々は一般的なjsに言及するのでしょうか？

私はしばらくの間バックエンドを開発していましたが、フロントエンドを開始したばかりでした-非常に多くの質問がポップアップしています。私の疑問をクリア/これらの私の基本的な理解を構築することができるいくつかのガイドへのリンクを提供していただければ十分です。

javascriptjquerynode.jstwitter-bootstrapwebpack
28
Junchao Gu

これをプラグインとして追加

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

プロジェクト全体でjqueryを使用できるはずです。

プラグインを追加しても問題が解決しない場合は、nodejsサーバーを再起動してください。 npm install --save jqueryを使用してjqueryを忘れずにインストールしてください。

51
Jorawar Singh

プラグインは必要ありません。エントリとして次を使用します。

entry: [
    'jquery', //will load jquery from node_modules
    './assets/js/index',
]

次に、ES6 +ファイルで次を使用します。

import $ from "jquery";
10
Niels Steenbeek

私はこれが少し古いことを知っていますが、私はそのようにそれをやることができました：

global.jQuery = require（ 'jquery'）; require（ 'bootstrap'）;

8
CodeHacker

古い質問をdrして申し訳ありませんが、私と同じユースケースを持っているかもしれない将来の開発者のために私の発見を共有したいと思います。

AngularJS（1.7.2）アプリのアプリバンドルではなくベンダーバンドルのみを作成するという要件があり、Webpack 4（4.1​​6.4）。ベンダーバンドルのみを作成していたため、他のソリューションはどれも機能しなかったと思います。 expose-loaderだけが私のために働いた。

    // webpack.config.js
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }
        }

詳細： https://github.com/webpack-contrib/expose-loader

2
thargenediad

だから、私は最初にノードモジュールにexpose-loaderをインストールし、次にwebpack.configの項目の1つとして以下のテストブロックを追加しなければならなかった同じ問題に遭遇したときに私がしたことをします.js ルール。

 npm install --save-dev  expose-loader



 {
    test: require.resolve('jquery'),
    use: [{
            loader: 'expose-loader',
            options: 'jQuery'
          },
          {
            loader: 'expose-loader',
            options: '$'
          }
    ]
 }

完了したら、npm run buildを再度実行します。ハッピーコーディング（ '.-。'）。手がかりを@thargenediadに与えます。

0
user1556937