Babel 无法为 React 的 render() 函数编译简单的 JSX - 使用 Visual Studio 代码

Posted 2023-02-21

【中文标题】Babel 无法为 React 的 render() 函数编译简单的 JSX - 使用 Visual Studio 代码

【英文标题】：Babel cannot compile simple JSX for React's render() function - Using Visual Studio Code

【发布时间】：2019-04-07 22:55:50

【问题描述】：

我正在尝试编译一个app.js 文件

import React from 'react';
import ReactDOM from 'react-dom';

console.log('test');

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('reactApp')
);

我正在使用 Visual Studio Code，而我的 package.json 是：

    
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": ,
  "devDependencies": 
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^6.1.0",
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  ,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d compiled"
  ,
  "author": "",
  "license": "ISC"

当运行 npm run build 我得到：

SyntaxError：<h1>Hello, world!</h1> 的意外标记 (24:4)

我的.babelrc 文件是

    "presets": [
        "@babel/preset-env"        
    ]

---

澄清：我没有使用 Webpack。

https://babeljs.io/repl 可以正确编译代码，所以我很确定代码本身没有任何问题。无论如何，请随时查看它。

你能找出错误吗？是否缺少或不需要任何依赖项？ 非常感谢。

【参考方案1】：

创建 jsx 文件时使用什么文件扩展名？我很确定你做了 [filename].jsx 而不是 [filename].js

你可以使用这个扩展，但你需要在你的 webpack 配置中添加它

Webpack 配置：

   
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: 
            presets: ['react', 'es2015']
        
    

如果你更喜欢 .babelrc 那么

  "presets": ["react", "es2015"],

【讨论】：

谢谢，但我没有使用 Webpack。我的文件也是app.js

@GiannisDallas 请看看***.com/questions/36609910/react-without-webpack

礼物的顺序是否应该反过来：["es2015", "react"]？以便 React 转译在 es2015 之前进行（因为在 reverse order 中应用了预设）。

【参考方案2】：

为了大家的信息，我找到了答案。 .babelrc 必须是

    "presets": [
        "@babel/react"        
    ]