將 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）的說明。