'jquery ist nicht definiert' wenn ich bootpack mit webpack lade

Question

Ich lerne gerade erst, Webpack zu benutzen (vorher benutze ich einfach den manuellen Weg, 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 mein entry.js

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

Dies scheint zu funktionieren. Allerdings habe ich das vorher benutzt und es hat nicht funktioniert:

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

Ich fand die obige Zeile von so vielen Leuten vorgeschlagen. Aber ich bekomme einfach Fehler beim Laden der Seite. Nur einige Beispiele: some SO question, webpack issue, another SO question.

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

Ich werde mein package.json als auch für den Fall, fügen Sie es 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 in webpack aber ich bin nicht neu in JS. Ich frage mich, warum window.$ nicht funktioniert.

und ich frage mich, für webpack, warum einige Leute vorgeschlagen, diese in Plugins:

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

Einige Leute diese sind darauf hindeutet, (nicht für mich nicht funktionieren):

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

Ich spielte mit Knoten für eine Weile zurück und ich erinnerte mich, dass Knoten verwendet Anfrage js zum Laden (ich bin nicht sehr klar über Unterschiede zwischen Common vs require vs amd obwohl). Aber warum einige Leute gemeinsame js erwähnen?

Ich entwickelte Backend für einige Zeit und begann gerade Frontend - so viele Fragen tauchen auf. Es wäre nur genug, wenn Sie mir einen Link zu einem Leitfaden zur Verfügung stellen, der meine Zweifel klären kann/mein grundlegendes Verständnis davon aufbauen kann.

Answer 1

Fügen Sie diese als Plugin

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

und Sie sollten in der Lage jquery in Ihrem ganzen Projekt zu haben.

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

Answer 2

Plugin wird nicht benötigt. Verwenden Sie einfach folgende als Eingabe:

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

dann in ES6 + Datei:

import $ from "jquery"; 

Answer 3

Ich weiß, das ist ein bisschen alt, aber ich schaffte es, so zu tun:

global.jQuery = erfordern ('jquery'); require ('Bootstrap');