Webpack，Gulp和React加载错误

Question

我的设置如下。如果我在包含这些文件的目录中运行gulp，那么我会收到大量错误，如下所示。它们都有类似的签名，但未能找到react-bootstrap，react-dom等的不同部分。

Module not found: Error: Can't resolve 'react-bootstrap/lib/Input' in '...a/scripts/components'
 @ ./a/scripts/components/SearchBar.js 7:12-48
 @ ./a/scripts/pages/HomePage.js
 @ ./a/scripts/routes.js
 @ ./a/scripts/index.js
 @ multi webpack-dev-server/client?http://localhost:8083 webpack/hot/only-dev-server ./a/scripts/index

这让我觉得这与装载机有关。事实上，如果我运行npm install，那么在验证所有内容都已安装并生成bundle.js后，会发生以下错误：

ERROR in ./a/scripts/index.js
Module parse failed: Unexpected token (19:15)
You may need an appropriate loader to handle this file type.
| 
| Router.run(routes, Router.HistoryLocation, function(Handler) {
|   React.render(<Handler />, document.getElementById('entry'));
| });
| 
 @ multi ./a/scripts/index

这也表明它与装载机有关。我已经花了很多时间试图弄清楚为什么装载机不能正常工作并且空白。非常感谢帮助。

的package.json

{
  "version": "1.0.0",
  "main": "index.js",
  "engines": {
    "node": "0.12.7",
    "npm": "2.7.5"
  },
  "scripts": {
    "postinstall": "gulp build"
  },
  "author": "",
  "license": "none",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.8",
    "del": "^3.0.0",
    "file-loader": "^1.1.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-cache": "^1.0.2",
    "gulp-clean-css": "^3.9.2",
    "gulp-concat": "^2.5.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-jshint": "^2.1.0",
    "gulp-livereload": "^3.8.0",
    "gulp-notify": "^3.1.0",
    "gulp-rename": "^1.2.0",
    "gulp-ruby-sass": "^3.0.0",
    "gulp-uglify": "^3.0.0",
    "jsx": "^0.9.89",
    "jsx-loader": "^0.13.2",
    "lodash": "^4.17.4",
    "moment": "^2.9.0",
    "node-sass": "^4.7.2",
    "plugin-error": "^0.1.2",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.0",
    "react-hot-loader": "^3.1.3",
    "react-router": "^4.2.0",
    "react-script-loader": "^0.0.1",
    "run-sequence": "^2.2.1",
    "sass-loader": "^6.0.6",
    "sass-material-colors": "0.0.5",
    "style-loader": "^0.19.1",
    "superagent": "^3.8.2",
    "underscore": "^1.8.3",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "2.10.1"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"
  },
}

.babelrc

{
    "presets": ["env", "react"]
}

gulpfile.babel.js

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS = require('gulp-clean-css'),
    rename = require('gulp-rename');
var log = require('fancy-log');
var PluginError = require('plugin-error');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var webpackConfig = require("./webpack.config.js");
var runSequence = require('run-sequence');
var path = require('path');
var del = require('del');

var watch = true;
var verbose = true;

// Default to Dev Server
gulp.task('default', ["js-dev-server"]);

// Clean output directory
gulp.task('clean', () => del(['a/static/js/build/*', 'a/static/css/*'], {dot:true}))

gulp.task('styles', function() {
  return sass('a/static/scss/styles.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('a/static/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cleanCSS())
    .pipe(gulp.dest('a/static/css'));
});

gulp.task('watch', function() {
  gulp.watch('a/static/scss/**/*.scss', ['styles']);
});

gulp.task('bundle', function() {
  function bundle(err, stats) {
    if (err) {
      throw new PluginError("build", err);
    }

    console.log(stats.toString({
      colors: true,
      hash: verbose,
      version: verbose,
      timings: verbose,
      chunks: verbose,
      chunkModules: verbose,
      cached: verbose,
      cachedAssets: verbose
    }));
  }

  webpack(webpackConfig).run(bundle)
});

gulp.task('build', ['clean'], cb => { runSequence(['styles', 'bundle']); });

gulp.task("js-dev-server", function(callback){
  // modify some webpack config options
  var myConfig = Object.create(webpackConfig);
  myConfig.devtool = "eval-source-map";
  myConfig.entry = [
      'webpack-dev-server/client?http://localhost:8083',
      'webpack/hot/only-dev-server',
      './a/scripts/index'
  ];
  myConfig.plugins = [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.LoaderOptionsPlugin({debug: true})
  ];
  myConfig.output['publicPath'] = "http://localhost:8083/static/js/build/"
  myConfig.module = {
      loaders: [
          {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loaders: ['react-hot-loader/webpack', 'jsx-loader?harmony', 'babel-loader']
          },
        { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&minetype=a/font-woff" },
        { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&minetype=a/font-woff" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&minetype=a/octet-stream" },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: "file-loader" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&minetype=image/svg+xml" },
        { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader?includePaths[]=" +
          path.resolve(__dirname, "./a/static/scss/")
        }
    ]
  };

  // Start a webpack-dev-server
  new WebpackDevServer(webpack(myConfig), {
    publicPath: "http://localhost:8083/static/js/build/",
    stats: {
      colors: true
    },
    inline: true,
    hot: true,
    historyApiFallback: true,
    contentBase: 'http://localhost:5000/'
  }).listen(8083, "localhost", function(err) {
    if(err) throw new PluginError("webpack-dev-server", err);
    log("[webpack-dev-server]",
        "http://localhost:8083/webpack-dev-server/index.html");
  });
});

webpack.config.js

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

var DEBUG = true;

module.exports = {
    entry: [
        __dirname + '/a/scripts/index'
    ],
    output: {
        path: __dirname + '/a/static/js/build',
        filename: 'bundle.js',
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({sourceMap: false,
                                             output: {comments: false}}),
    ],
    resolve: {
        extensions: ['.js', '.jsx'],
        modules: ['node_modules', 'web_modules', 'scripts', 'lib'],
    },
    module: {
        rules: [
            {
                test: /\*.js.x?$/,
                exclude: /node_modules/,
                loaders: (DEBUG ? ['react-hot-loader/webpack'] : []).concat(['babel-loader'])
            },
            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&minetype=application/octet-stream" },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&minetype=image/svg+xml" },
            { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader?includePaths[]=" +
              path.resolve(__dirname, "./a/static/scss/")
            }
        ]
    },
    externals: {
        "jquery": "jQuery"
    }
};

index.js

'use strict';

var React = require('react'),
    Router = require('react-router'),
    routes = require('routes');

// set up in order to receive actions
var NotificationStore = require('stores/NotificationStore');

require('csrf'); // injects CSRF token into all $.ajax calls

require('../static/scss/playground.scss'); // loads stylesheet into JS

Router.run(routes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler />, document.getElementById('entry'));
});

Answer 1

此问题是由于您的babel设置。您需要安装babel-plugin-transform-react-jsx并调整.babelrc文件。像这样：

{
  "presets": ["env", "es2015", "react"],
  "plugins": ["transform-react-jsx", "transform-object-rest-spread"]

}

示例webpack.config.js：

const path = require('path')

const config = {
  entry: {
    app: ['whatwg-fetch','./src/index.js'],
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './public'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      {
        test: /\.css/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
    ]
  },
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'public')
  }
}

module.exports = config

示例package.json：

{
  "name": "react-news-app",
  "version": "1.0.0",
  "description": "get news and sentiment from headline articles",
  "main": "index.js",
  "scripts": {
    "test": "jest --watch",
    "start": "webpack-dev-server --port 3000"
  },
  "keywords": [
    "api",
    "react"
  ],
  "author": "Stephen Collins",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "whatwg-fetch": "^2.0.3"
  },
  "devDependencies": {
    "babel-jest": "^22.0.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "chai": "^4.1.2",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.8",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.15.0",
    "eslint-loader": "^1.9.0",
    "jest": "^22.0.4",
    "prop-types": "^15.6.0",
    "sinon": "^4.1.3",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0"
  }
}