0

我有一个小型实用程序项目，我正在使用反应引导表。我正在使用 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;
4

2 回答 2

2

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")
  ]
};
于 2017-07-24T12:35:54.990 回答
0

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

<script type="text/javascript" src="jquery-1.9.1.min.js">
于 2017-07-20T16:57:45.527 回答