将 React JSX 组件转换为 ES5 usign babel

Question

我正在尝试将 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;

有些部分发生了变化，但不是全部，我还需要做些什么来转换import 、 export以及我将使用的任何未来钩子？

Answer 1

Babel 不做模块捆绑，因为你需要像Webpack或Rollup这样的模块捆绑器。 它们与 Babel 集成，让 Babel 处理各种 JavaScript 转换，而捆绑器处理模块转换并将事物捆绑到少量文件中。

FWIW, https://create-react-app.dev/ will do a full project skeleton for you with Webpack, Babel, ESLint, TypeScript if you want it, ... CRA manages your project for you, but at any time you可以“弹出”以获取可以调整的硬编码配置文件。

自动化程度较低，但 Rollup 具有快速入门和与 Babel 集成以及添加对等依赖项（如 React）的说明。