使用 webpack 加载引导程序时“未定义 jquery" [英] 'jquery is not defined' when using webpack to load bootstrap

问题描述

我刚刚开始学习使用 Webpack(以前我只是使用手动方式单独包含单个脚本).我使用 bootstrap-loader 来加载引导程序.这是我的 webpack.config.js

I am just starting to learn to use Webpack (previously I just use the manual way to include individual scripts separately). And I used bootstrap-loader for loading bootstrap. Here is my 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

And here is my entry.js

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

这似乎有效.但是，我之前使用过它，但它不起作用:

This seems to work. However, I used this before and it did not work:

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

我发现上面有很多人建议的行.但我只是在加载页面时出现错误.只是一些例子:一些SO问题，webpack 问题，另一个 SO 问题.

I found the line above suggested by so many people. But I just simply get errors when load the page. Just some examples: some SO question, webpack issue, another SO question.

后来我发现了这个问题，并且这个问题.所以该页面实际上可以与 bootstrap js 功能一起工作.

Later I found this question, and this question. So the page actually works with bootstrap js functionality working as well.

如果相关，我也会添加我的 package.json:

I will add my package.json as well in case it is relevant:

{
  "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.$ 不起作用.

I am new to webpack but I am not new to JS. I am wondering why window.$ is not working.

我想知道，对于 webpack，为什么有些人在插件中建议这样做:

And I wonder, for webpack, why some people suggested this in plugins:

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

有些人建议这样做(也不适用于我):

Some people are suggesting this (did not work for me either):

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

当时我使用 node 玩了一段时间，我记得 node 使用 request js 进行加载(虽然我不太清楚 common 与 require 与 amd 之间的区别).但是为什么有人提到普通js?

I played with node for a while back then and I remembered that node makes use of request js for loading(I am not very clear about differences between common vs require vs amd though). But why some people mention common js?

我开发后端有一段时间了，刚刚开始前端 - 出现了很多问题.如果您向我提供一些阅读指南的链接就足够了，这可以消除我的疑虑/建立我对这些内容的基本理解.

I was developing backend for some time and just started frontend--so many questions are popping up. It would just enough if you provide me with some link to some guide to read which can clear my doubts/build my basic understanding of these.

推荐答案

Add this as plugin

Add this as plugin

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

并且您应该能够在整个项目中使用 jquery.

and you should be able to have jquery in your whole project.

如果添加插件后问题仍然存在，请尝试重新启动您的 nodejs 服务器.记得使用 npm install --save jquery 安装 jquery.

If issue persists after adding the plugin, try restarting your nodejs server. Remember to install jquery using npm install --save jquery.

这篇关于使用 webpack 加载引导程序时“未定义 jquery"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！