Question

我正在尝试编译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代码，而我的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正确地编译了代码，因此我很确定代码本身没有错。随时可以对其进行审核。

能否请您确定错误？是否缺少或不需要依赖？非常感谢。

Answer 1

对于所有人的信息，我找到了答案。 .babelrc必须为

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

Answer 2

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

您可以使用此扩展名，但需要在Webpack配置中添加它

Webpack配置：

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

如果您喜欢.babelrc，那么

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

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

2 个答案: