当遵循React + Node.js博客教程时，语法错误“Unexpected token”
我正在关注一个Site Point教程来尝试创build一个React应用程序。
我被困在这些步骤：
- mkdir public
- npm安装
- npm运行开发
第一个命令将失败，因为我已经有一个“公共”文件夹（？）有很多的资源文件夹和index.html。
npm安装正常工作。
npm运行开发遇到语法错误：
ERROR in ./app-client.js Module build failed: SyntaxError: Unexpected token (12:2) 10 | 11 | const Routes = ( > 12 | <Router history={history}> | ^ 13 | { routes } 14 | </Router> 15 | ) 在第n次复制粘贴所有内容之后，我很确定app-client.js中没有任何拼写错误。 这里是：
// app-client.js import React from 'react' import { render } from 'react-dom' import { Router } from 'react-router' import createBrowserHistory from 'history/lib/createBrowserHistory' const history = createBrowserHistory() // Routes import routes from './routes' const Routes = ( <Router history={history}> { routes } </Router> ) const app = document.getElementById('app') render(Routes, app)
和我的文件夹结构是一样的在教程中：
package.json public |-css |-bootstrap.min.css |-cosmic-custom.css |-js |-jquery.min.js |-bootstrap.min.js |-clean-blog.min.js views |-index.html webpack.config.js
这也让我很困惑，为什么我会在这里运行“mkdir public”？
我尝试重命名文件有一个.jsx结尾; 那没用。 另外，这是我的webpack.conf.js文件：
// webpack.config.js var webpack = require('webpack') module.exports = { devtool: 'eval', entry: './app-client.js', output: { path: __dirname + '/public/dist', filename: 'bundle.js', publicPath: '/dist/' }, module: { loaders: [ { test: /\.js$/, loaders: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx$/, loaders: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react']} } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET), 'process.env.COSMIC_READ_KEY': JSON.stringify(process.env.COSMIC_READ_KEY), 'process.env.COSMIC_WRITE_KEY': JSON.stringify(process.env.COSMIC_WRITE_KEY) }) ] };
在你的webpack.config.js里面你需要修改你的装载器，
首先 ，包括相同的装载机，而不是两次，只包括一次。
其次 ，而不是在装载机内使用装载机数组使用loader没有。
如下所示：
module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }
最后安装babel-preset-stage-0，babel-preset-react，es2015作为开发依赖项，比如npm install --save-dev babel-preset-stage-0 babel-preset-es2015 babel-preset-react ，并使用一个内部查询对象是这样的：
module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['stage-0','es2015', 'react']} } ] }
最好另一种方法是创build.babelrc文件，而不是在webpack.config.js中的根目录下（你的webpack.config.js ）进行查询，然后包括下面的代码：
{presets: ['stage-0','es2015', 'react']}
如果所有这一切都是压倒性的，开始React的最佳地点，而不必担心任何依赖或其他问题是创build反应的应用程序 。