wake-up-neo.com

'jquery ist nicht definiert', wenn mit webpack Bootstrap geladen wird

Ich lerne gerade erst, wie man Webpack verwendet (vorher benutzte ich nur die manuelle Methode, um einzelne Skripte separat einzubinden). Und ich habe bootstrap-loader zum Laden von Bootstrap verwendet. Hier ist meine 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',
    },
}

Und hier ist meine entry.js

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

Das scheint zu funktionieren. Ich habe dies jedoch schon einmal benutzt und es hat nicht funktioniert:

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

Ich fand die Zeile, die von so vielen Leuten vorgeschlagen wurde. Ich bekomme aber einfach Fehler beim Laden der Seite. Einige Beispiele: einige SO - Frage , Webpack-Ausgabe , eine andere SO - Frage .

Später fand ich diese Frage und diese Frage . Die Seite funktioniert also auch mit der Bootstrap-js-Funktionalität.

Ich füge meine package.json hinzu, falls sie relevant ist:

{
  "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"
  }
}

Ich bin neu im Webpack, aber ich bin nicht neu bei JS. Ich frage mich, warum window.$ nicht funktioniert.

Und ich frage mich, für Webpack, warum einige Leute dies in Plugins vorgeschlagen haben:

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

Einige Leute schlagen das vor (funktionierte auch nicht für mich):

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

Ich habe damals eine Weile mit node gespielt, und ich erinnerte mich daran, dass der Knoten zum Laden die Anfrage js verwendet (ich bin nicht ganz klar, was Unterschiede zwischen Common vs Requests vs. AMD ist). Aber warum erwähnen manche Leute gemeinsame Js?

Ich habe einige Zeit im Backend gearbeitet und habe gerade erst mit dem Frontend begonnen - so viele Fragen tauchen auf. Es würde gerade genügen, wenn Sie mir einen Link zu einem Leitfaden geben, um zu lesen, was meine Zweifel klären kann/mein grundlegendes Verständnis davon aufbauen kann.

24
Junchao Gu

Fügen Sie dies als Plugin hinzu

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

und Sie sollten Jquery in Ihrem gesamten Projekt haben können.

Wenn das Problem nach dem Hinzufügen des Plugins weiterhin besteht, starten Sie Ihren nodejs-Server neu. Denken Sie daran, jquery mit npm install --save jquery zu installieren.

46
Jorawar Singh

Plugin wird nicht benötigt. Verwenden Sie einfach folgendes als Eintrag:

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

Dann in ES6 + Datei verwenden:

import $ from "jquery";
9
Niels Steenbeek

Ich weiß, das ist ein bisschen alt, aber ich habe es so gemacht:

global.jQuery = required ('jquery'); requir ('bootstrap');

7
CodeHacker

Es tut mir leid, eine alte Frage aufgreifen zu können, aber ich möchte meine Erkenntnisse allen zukünftigen Entwicklern mitteilen, die möglicherweise den gleichen Anwendungsfall haben wie ich.

Ich hatte die Anforderung, nur ein Herstellerpaket und nicht ein Anwendungspaket für eine AngularJS (1.7.2) -App mit Webpack 4 (4.16.4) zu erstellen. Ich denke, weil ich nur ein Anbieterpaket erstellt habe, hat keine der anderen Lösungen funktioniert. Nur expose-loader arbeitete für mich wie folgt:

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

Weitere Informationen: https://github.com/webpack-contrib/expose-loader

2
thargenediad

Also, was ich getan habe, als ich auf dasselbe Problem gestoßen bin. Ich musste zuerst expose-loader in meine Knotenmodule installieren und dann den untenstehenden Testblock als einen der Elemente in der webpack.config hinzufügen .js Regeln

 npm install --save-dev  expose-loader



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

Wenn Sie fertig sind, führen Sie npm build erneut aus. glückliche Codierung ('.-.'). Kredite an @thargenediad für Hinweise.

0
user1556937