gpt4 book ai didi

javascript - 遵循 React + Node.js 博客教程时出现语法错误 "Unexpected token"

转载 作者:行者123 更新时间:2023-11-30 20:57:01 26 4
gpt4 key购买 nike

我正在关注 Site Point tutorial尝试创建一个 React 应用程序。

我坚持这些步骤:

  1. mkdir 公共(public)
  2. npm 安装
  3. npm 运行开发

第一个命令会失败,因为我已经有了一个“公共(public)”文件夹(?),里面有很多资源文件夹和 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 中,您需要修改加载器,

首先,不是两次包含同一个加载器,而是只包含一次。

其次,不要在 loaders 数组中使用加载器,而是使用不带 sloader

如下所示:

  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 .

关于javascript - 遵循 React + Node.js 博客教程时出现语法错误 "Unexpected token",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47551058/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com