React.js - babel-loader -意外标记

Question

我有我不能解决的问题。对于类似的问题，有很多答案，但它们并不适用(我认为)。

我有一些文件。让我们从package.json开始：

{
  "name": "react-tut",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {},
  "scripts": {
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
    "setDebug": "set NODE_ENV=debug",
    "setProduction": "set NODE_ENV=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js：

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

module.exports = {
    context: path.join(__dirname, "src"),
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./js/client.js",
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower|components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            }
        ]
    },
    output: {
        path: path.join(__dirname, "src"),
        filename: "client.min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
    ],
};

client.js：

import React from "react";
import ReactDOM from "react-dom";

import Layout from "./components/Layout";

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

Layout.js：

import React from "react";

export default class Layout extends React.Component {
    render() {
        return <h1>Wololo?</h1>;
    }
}

当我运行webpack时，我得到这个错误：

ERROR in ./js/components/Layout.js
Module parse failed: C:\Users\onlin\WebstormProjects\react-tut\src\js\components\Layout.js Unexpected token (5:15)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:15)
    at Parser.pp.raise (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:923:13)
    at Parser.pp.unexpected (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1490:8)
    at Parser.pp.parseExprAtom (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:333:12)
    at Parser.pp.parseExprSubscripts (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExpression (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:88:19)
    at Parser.pp.parseReturnStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1872:26)
    at Parser.pp.parseStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1737:19)
    at Parser.pp.parseBlock (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2009:21)
    at Parser.pp.parseFunctionBody (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:610:22)
    at Parser.pp.parseMethod (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:579:8)
    at Parser.pp.parseClassMethod (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2155:23)
    at Parser.pp.parseClass (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2140:10)
    at Parser.pp.parseExprAtom (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:324:19)
    at Parser.pp.parseExprSubscripts (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:228:19)
    at Parser.pp.parseMaybeUnary (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:207:17)
    at Parser.pp.parseExprOps (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:154:19)
    at Parser.pp.parseMaybeConditional (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:136:19)
    at Parser.pp.parseMaybeAssign (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:112:19)
    at Parser.pp.parseExport (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:2181:21)
    at Parser.pp.parseStatement (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1762:85)
    at Parser.pp.parseTopLevel (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1666:21)
    at Parser.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:1632:17)
    at Object.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\acorn\dist\acorn.js:885:44)
    at Parser.parse (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\Users\onlin\WebstormProjects\react-tut\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
 @ ./js/client.js 11:14-44

错误指向Layout.js中的<字符。我正在遵循this tutorial，在我将布局类移动到分离文件(从client.js)之后，这个错误开始出现。我该如何解决这个问题？

Answer 1

在您的webpack配置文件中，components文件夹被设置为从babel中排除。

module: {
    loaders: [
        {
            test: /\.js?$/,
            exclude: /(node_modules|bower|components)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-0'],
                plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
            }
        }
    ]
}

因此，JSX结构中的组件<Layout>无法识别。