我正在按照Site Point tutorial尝试创建React应用。
我坚持这些步骤:
mkdir公共
npm安装
npm运行开发
第一个命令将失败,因为我已经有一个带有大量资源文件夹和index.html的“公用”文件夹(?)。
npm install可以按预期工作。
npm run development遇到语法错误:
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
的s
。
如下所示:
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']} }
]
}
最好的另一种方法是创建
.babelrc
文件,而不是在根(您的webpack.config.js
所在)的webpack.config.js
内部进行查询,然后包括以下代码:{presets: ['stage-0','es2015', 'react']}
如果所有这些都令人不知所措,那么开始React而不担心任何依赖关系或其他问题的最佳位置是create-react-app。