如何在webpack中配置和使用jQuery

Question

我有一个非常简单的项目，用webpack测试运行jQuery函数。然而，在打包步骤中遇到了错误。以下是错误信息：

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 5:13-29

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 8:28-53

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'location' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 13:24-43

ERROR in ./~/jQuery/lib/node-jquery.js
Module not found: Error: Cannot resolve module 'navigator' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib
 @ ./~/jQuery/lib/node-jquery.js 17:25-45

这是我的配置文件：
package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "jquery": "^2.2.2",
    "react": "file:node_modules/react",
    "react-dom": "file:node_modules/react-dom",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: 'public',
  },
  module: {
    loaders: [
      {

        test: /\.jsx?/,
        include: APP_DIR,
        loader: 'babel'
      },
      {
        test: /\.css/,
        include: APP_DIR,
      }
    ]
  },

};

module.exports = config;

index.jsx:

import React from 'react'
import {render} from 'react-dom'
import $ from 'jQuery'


(function () {

    $(document).ready(function() {
        console.log("It works!");
    });

})();

如果我安装所提到的模块(jsdom, xmlhttprequest等)，那么这些错误会被长长的错误替代。

- modeller

---

这可能会有所帮助：https://dev59.com/bF4b5IYBdhLWcg3wiiV4 - candidJ

Answer 1

你可以使用webpack.ProvidePlugin将jQuery解析为全局标识符。当你使用ProvidePlugin时，不需要在模块中导入jQuery，因为它会作为全局变量可用。

类似这样的东西：

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

- Thaadikkaaran

---

能否在这里添加第三个“行”，写上 jquery: "jquery"？我收到了错误信息 Module not found: Error: Can't resolve 'jquery'，我想知道是否因为只指定了 $ 和 jQuery，而没有用小写字母 q 指定 jquery？ - user1063287