Javascript 使用babel将React JSX组件转换为ES5

我正在尝试将JSX React组件转换为ES5中可用的React组件

因此，我在我的存储库的根添加了带有npm的babel

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "ssh://xxx"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react-app": "^3.1.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-react-jsx": "^7.12.12",
    "babel-core": "^7.0.0-bridge.0"
  }
}

然后我像这样执行观察者

npx babel --watch Components\ --out-dir React\ --presets react-app/prod

我最初的React JSX组件如下所示：

import React from 'react';
import Button from '@material-ui/core/Button';

const NeoFormulaire = () => {
  return (
    <Button color='secondary' variant='outlined'>
      Bouton test 2
    </Button>
  );
};

export default NeoFormulaire;

import React from 'react';
import Button from '@material-ui/core/Button';

var NeoFormulaire = function NeoFormulaire() {
  return React.createElement(
    Button,
    { color: 'secondary', variant: 'outlined' },
    'Bouton test 2'
  );
};

export default NeoFormulaire;

---

有些部分改变了，但不是全部，我还需要做些什么来传输导入，导出，以及将来我将使用的任何挂钩？

巴贝尔不做模块绑定，因为您需要像或这样的模块绑定器。它们与Babel集成，让Babel处理各种JavaScript转换，而绑定器处理模块转换，并将内容绑定到少量文件中

FWIW，将为你做一个完整的项目框架与网页包，巴贝尔，ESLint，打字脚本，如果你想它。。。CRA为您管理您的项目，但您可以随时“弹出”以获取硬编码的配置文件，您可以进行调整

---

自动化程度较低，但Rollup具有用于和添加like React的命令和说明。

通常使用将其转换为客户端捆绑包，例如（也可以使用应用Babel Transfilation）。