[英]How to configure and use jQuery with webpack
我有一個非常簡單的項目來測試運行jQuery函數與webpack。 但是我在捆綁步驟遇到了錯誤。 以下是錯誤:
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,..),錯誤將被很長的錯誤所取代。
您可以使用webpack.ProvidePlugin
將jQuery解析為全局標識符。 當您使用ProvidePlugin
您不希望將jQuery
導入模塊,因為它可用作全局變量。
就像是
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.