webpack/react/babel 不编译 JSX

Question

我知道有很多类似的问题，但我没有找到解决方案，而且其中一些问题很旧，因此不适用。

我为 React 创建了一个 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'
    ]
  ],
  ...

我可以像这样编译反应代码：

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

这是我的回购：

https://github.com/sebalaini/test

Answer 1

将您@babel/preset-react的配置移至外部@babel/preset-env（将其移至阵列外），如下所示：

presets: [
  ["@babel/preset-env", {...}],
  "@babel/preset-react",
]

@babel/preset-react应该presets与您的@babel/preset-env.