Question

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

Error: Cannot find module 'jquery' from 'C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\src\javascript\components\dnsIpam'
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
at process (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
at load (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
at onex (C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
at C:\Users\sunny.bogawat\Workspace\Projects\viewpoint_ui_sunny\node_modules\browser-resolve\node_modules\resolve\lib\async.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有内部依赖关系。

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

我建议您split your code并创建供应商配置，并明确包含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">

webpack with react-bootstrap-table获取错误jQuery未找到

2 个答案: