使用 React 的 Webpack 模块解析错误

Question

当我尝试运行我的 Webpack 配置时，它失败并出现以下错误：

$ webpack
Hash: 826e21c818de1882d366
Version: webpack 1.13.1
Time: 53ms
   [0] ./public/js/react/swap-shop.js 0 bytes [built] [failed]

ERROR in ./public/js/react/swap-shop.js
Module parse failed: /Users/work/Development/group-2/public/js/react/swap-shop.js Unexpected token (23:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (23:6)
    at Parser.pp.raise (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
    at Parser.pp.unexpected (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
    at Parser.pp.parseExprAtom (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:333:12)
    at Parser.pp.parseExprSubscripts (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
    at Parser.pp.parseExprOps (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:376:28)
    at Parser.pp.parseExprAtom (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:307:19)
    at Parser.pp.parseExprSubscripts (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
    at Parser.pp.parseExprOps (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
    at Parser.pp.parseExpression (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:88:19)
    at Parser.pp.parseReturnStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1872:26)
    at Parser.pp.parseStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1737:19)
    at Parser.pp.parseBlock (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2009:21)
    at Parser.pp.parseFunctionBody (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:610:22)
    at Parser.pp.parseMethod (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:579:8)
    at Parser.pp.parseClassMethod (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2155:23)
    at Parser.pp.parseClass (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:2140:10)
    at Parser.pp.parseStatement (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1733:19)
    at Parser.pp.parseTopLevel (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
    at Parser.parse (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
    at Object.parse (/Users/work/Development/group-2/node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
    at Parser.parse (/Users/work/Development/group-2/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/work/Development/group-2/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/work/Development/group-2/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)

我不确定为什么会发生这种情况，这是我的配置：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./public/js/react/swap-shop.js",
  output: {
    path: __dirname + "/dist",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

然后我有我实际尝试捆绑的 React 组件，这里是 swap-shop.js 文件

import VehicleList from './components/vehicle-list.js';

class VehicleContainer extends React.Component {

  constructor(props) {
    super(props);

    this.state = { vehicles: [] };

  }

  componentWillMount() {

    // Make a request for vehicle data

    axios.get('/api/models')
    .then(response => this.setState({ vehicles: response.data }))
    .catch(error => console.log(error));
  }
  render() {
                console.log(this.state.vehicles);
    return (
      <VehicleList vehicles={this.state.vehicles}/>
    )
  }
};

ReactDOM.render(
  <VehicleContainer />,
  document.getElementById('swap-shop-range').getElementsByClassName('react-target')[0]
);

然后我有我的 VehicleList 组件：

// Vehicle List Componen
import VehicleDetail from './vehicle-detail';
// Create our component
let VEHICLES = [
  {make: 'Volkswagen', model: 'Golf', image: 'https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/a4a40021d1661b474e42ad3aa0419d940601b27f.png'}
];
const VehicleList = (props) => {
  // Just add props.vehicle to access API data instead of static
  const RenderedVehicles = VEHICLES.map(vehicle =>
    <VehicleDetail key={vehicle.make} vehicle={vehicle} />
  );

  return (
    <div className="row-flex center-xs">
      {RenderedVehicles}
    </div>
  );
};

// Export our component
export default VehicleList;

最后是我的 VehicleDetail 组件：

// Vehicle Description Component

const VehicleDetail = (props) => {
  return (
    <div className="col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query">
      <div className="vehicle-container">
        <img src={props.vehicle.image} />
        <h4 className="vehicle-title">
          {props.vehicle.make}
          <span>{props.vehicle.model}</span>
        </h4>
        <div className="row-flex">
          <div className="col-flex-xs-6 btn-container">
            <a href="/offers/citigo-colour-edition" className="learn-more-btn">Learn More</a>
          </div>
          <div className="col-flex-xs-6 btn-container">
            <a href="/offers/citigo-colour-edition/make-enquiry" className="test-drive-btn">Test Drive</a>
          </div>
        </div>
      </div>
    </div>
  );
};

// Export our component
export default VehicleDetail;

我的 React 组件层次结构：

public/js/react/

  swap-shop.js

  components/

    vehicle-detail.js
    vehicle-list.js

然后我只需将 React、ReactDOM 和 Babel 包含到我的页面中，就在包含我的 React 代码的脚本标记上方。当我使用一个内联脚本标记将所有组件粘贴到我的实际 html 页面中时，它们似乎可以工作，但是当我尝试将它们与 webpack 捆绑时，由于某种原因，我收到了这个错误。知道为什么会发生这种情况吗？

Answer 1

你可能需要 babel-loader、babel-preset-es2015 和 babel-preset-react

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./public/js/react/swap-shop.js",
  output: {
    path: __dirname + "/dist",
    filename: "scripts.min.js"
  },
  module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015']
            }
        }
   ]},
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false      })]};

阅读更多https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html