使用webpack加载bootstrap时，“jquery未定义” [英] 'jquery is not defined' when using webpack to load bootstrap

问题描述

我刚开始学习使用Webpack（之前我只是使用手动方式单独包含单个脚本）。我使用 bootstrap-loader 来加载bootstrap。这是我的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');

我发现这么多人建议上面这行。但我只是在加载页面时遇到错误。举几个例子：一些问题， webpack问题，另一个问题。

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的新手。我想知道为什么窗口。$ 无效。

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

我玩过那个节点已经有一段时间了，我记得那个节点使用了请求js来加载（我不太清楚common和require vs 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.

推荐答案

将其添加为插件

  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加载bootstrap时，“jquery未定义”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！