我知道有很多类似的问题，但是我没有找到解决方案，其中一些是旧的，因此不适用。
我已经创建了一个Webpack环境来进行响应，但是没有编译JSX语法。
我正在使用：
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
在我的babel.config.js中，我有：
...
'presets': [
[
'@babel/preset-env',
{
'targets': {
'chrome': 61,
},
'modules': false,
'useBuiltIns': 'usage'
},
'@babel/preset-react'
]
],
...
我可以像这样编译React代码：
import React from 'react'
import ReactDOM from 'react-dom'
require('./scss/main.scss')
const e = React.createElement
class LikeButton extends React.Component {
constructor (props) {
super(props)
this.state = {
liked: false
}
}
render () {
if (this.state.liked) {
return 'You liked this.'
}
return e(
'button',
{
onClick: () => this.setState({
liked: true
})
},
'Like'
)
}
}
const domContainer = document.querySelector('#like_button_container')
ReactDOM.render(e(LikeButton), domContainer)
但是当我尝试使用JSX时
const name = 'Name';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
它抱怨<的h1
这是我的仓库：
将您@babel/preset-react的配置@babel/preset-env移出（将其移出阵列），如下所示：
presets: [
["@babel/preset-env", {...}],
"@babel/preset-react",
]
@babel/preset-react应该与您的处于同一级别（最高级别presets）@babel/preset-env。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句