带有 react-bootstrap-table 的 webpack 得到错误 jQuery 找不到

Question

我有一个小的实用程序项目，我正在使用反应引导表。我正在使用 webpack 捆绑这个项目以用于一些不同的项目。我的 webpack 配置文件看起来像这样。当我在导入实用程序包的主项目中运行 gulp 时;我收到以下错误。

Error: Cannot find module 'jquery' from 'C:Userssunny.bogawatWorkspaceProjectsviewpoint_ui_sunnysrcjavascriptcomponentsdnsIpam'
at C:Userssunny.bogawatWorkspaceProjectsviewpoint_ui_sunnynode_modulesbrowser-resolvenode_modulesresolvelibasync.js:46:17
at process (C:Userssunny.bogawatWorkspaceProjectsviewpoint_ui_sunnynode_modulesbrowser-resolvenode_modulesresolvelibasync.js:173:43)
at ondir (C:Userssunny.bogawatWorkspaceProjectsviewpoint_ui_sunnynode_modulesbrowser-resolvenode_modulesresolvelibasync.js:188:17)
at load (C:Userssunny.bogawatWorkspaceProjectsviewpoint_ui_sunnynode_modulesbrowser-resolvenode_modulesresolvelibasync.js:69:43)
at onex (C:Userssunny.bogawatWorkspaceProjectsviewpoint_ui_sunnynode_modulesbrowser-resolvenode_modulesresolvelibasync.js:92:31)
at C:Userssunny.bogawatWorkspaceProjectsviewpoint_ui_sunnynode_modulesbrowser-resolvenode_modulesresolvelibasync.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)

webpack 配置文件

const path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var build = 'dns-ipam';
// shared config settings
var config = {
module: {
loaders: [
{ test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /.(less|css)$/, loader: ExtractTextPlugin.extract('style-loader',
'css-loader!less-loader') },
{ test: /.(png|jpg|gif|jpeg|svg)$/,
loader: 'file?name=images/[name].[ext]' },
{ test: /.(ttf|woff|eot|otf)$/,
loader: 'file?name=fonts/[name].[ext]' },
{ test: /.json$/,
loader: 'json' },
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: `${build}-react-components.js`,
library: `${build}-react-components`,
libraryTarget: 'umd',
},
plugins: [
new ExtractTextPlugin(`${build}-react-components.css`),
new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery',}),
],
externals: [{
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
}, {
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
},
}],
};
// custom config settings
config.entry = './src/components/dns-ipam-index.js';
// if (build == 'dns-ipam') {
//   config.plugins.push(new webpack.optimize.UglifyJsPlugin({
//     compress: { warnings: false },
//   }));
// }

module.exports = config;

Answer 1

React-bootstrap 与 jQuery 有内部依赖关系。

我可以看到您明确排除了节点模块，因此您的代码将无法使用这些依赖项。排除：/node_modules/

我建议你拆分你的代码并创建一个供应商配置，并明确包含jquery和react-bootstrap-table

var webpack = require("webpack");
module.exports = {
entry: {
app: "./app.js",
vendor: ["jquery", "react-bootstrap-table", ...],
},
output: {
filename: "bundle.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
]
};

Answer 2

将下载的JQuery文件放在项目的root文件夹中，并在HTML文件中使用它，如下所示 -

<script type="text/javascript" src="jquery-1.9.1.min.js">