React Create App 中的 npm build 和 babel 问题答案

【问题标题】：Problem with npm build and babel in React Create AppReact Create App 中的 npm build 和 babel 问题
【发布时间】：2020-07-25 05:10:38
【问题描述】：

我正在设置一个新的 React 应用程序，我已经有一段时间没有做过了，并且遇到了一个我认为很简单的问题。当我运行 npm run build 时，我收到此错误：

SyntaxError: /Users/.../Projects/MyProject/frontend/src/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:5):

   6 | function App() {
   7 |   return (
>  8 |     <div className='App'>
     |     ^
   9 |       <header className='app-header'>
  10 |         <h1>Welcome!</h1>

我正在使用 Javascript 和 Flow。我按照说明让 Flow 工作，其中包括安装 Babel。我觉得这就是问题所在。

这是我的package.json 文件：

{
  "name": "frontend",
  "main": "lib/index.js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "flow-bin": "^0.130.0",
    "node-sass": "^4.14.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "babel src/ -d lib/",
    "prepublish": "npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "flow": "flow"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/preset-flow": "^7.10.4"
  }
}

谁知道问题出在哪里？

【问题讨论】：

您遵循了什么指示？我用npx create-react-app 制作了项目，然后刚刚将flow 包安装为官方site suggests，现在JSX 语法和流类型都可以正常工作，没有任何错误。

标签： reactjs npm babeljs flowtype

【解决方案1】：

我尝试了以下方法，它“似乎”工作：

在我的 React 项目的根目录中，我重新添加了一个名为 .babelrc 的文件。仅此一项就很奇怪，因为我读过 Babel 6 及更高版本不支持此文件。这个文件的内容是：

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

现在npm run build 没有任何错误。在我的/lib 目录中创建了一些文件，但我仍然需要测试它们是否正常工作。

【讨论】：

如果你想使用 create-react-app，你不应该需要这个文件，因为它应该在内部附带。但无论如何，babel 6+ 可以使用 .babelrc .babelrc.js 或 babel.config.js