安装 jQuery 会出现 webpack 错误答案

【问题标题】：Installing jQuery gives webpack errors安装 jQuery 会出现 webpack 错误
【发布时间】：2017-12-12 04:06:05
【问题描述】：

我 npm 安装了 jQuery，现在看到一堆 Module not found: Error: Can't resolve... 错误。知道根本问题可能是什么以及解决方案吗？

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'jsdom'...

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest'...

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'location'...

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'navigator'...

在谷歌搜索错误后，我很确定这与 webpack 2 有关，但没有一个建议的解决方案可以解决错误。

我见过但不起作用的一个解决方案是将以下内容放入我的 webpack 配置中：

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

这是我的 index.html：

<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <div id="fb-root"></div>
    <div id="app"></div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <script src="common.js"></script>
    <script src="bundle.js" type="text/javascript"></script>
  </body>
</html>

这是我的 webpack.config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src', 'js');

var node_dir = __dirname + '/node_modules';

var config = {
	entry: {
	  app: APP_DIR + '/index.js',
	  common: ["jquery"],
	},
	output: {
		path: BUILD_DIR,
		filename: 'bundle.js'
	},
	resolve: {
		// This is so that you don't have to write the file extension while importing it.
		// Instead of import HomeComponent from './HomeComponent.jsx'
		// you can do import HomeComponent from './HomeComponent'
		extensions: ['.js', '.jsx','.json', '*'],
		alias: {
      'jquery': node_dir + '/jQuery/src/wrapper.js',
    },
	},
	externals: {
    jquery: 'jQuery'
  },
	plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      filename: "common.js",
      minChunks: Infinity,
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
    }),
  ],
	module: {
    loaders : [
			{
				test : /\.jsx?/,
				include : APP_DIR,
				exclude: /node_modules/,
				loader : 'babel-loader'
			}
		],
	},
};

module.exports = config;

这是错误：

【问题讨论】：

你看过这篇文章了吗？ stackoverflow.com/questions/44084544/jquery-with-webpack-2
是的，很遗憾错误仍然存在。

标签： jquery webpack webpack-2 jsdom

【解决方案1】：

您是否安装了jQuery npm 包而不是jquery 包？使用已弃用的“jQuery”时，我遇到了同样的错误。当我删除“jQuery”并安装“jquery”时，错误消失了。

【讨论】：

谢谢。这也是我面临的确切问题
这应该是答案！有同样的问题。安装 jquery 包而不是 jQuery 解决了一切