一、转换ES2015+

安装

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

babel.config.json

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
      }
    ]
  ]
}

执行

npx babel src --out-dir lib

二、转换React

安装

npm install --save-dev @babel/core @babel/cli  @babel/preset-react
npm install -S react-core react-dom

babel.config.json

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

或者：

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement
        "pragmaFrag": "DomFrag", // default is React.Fragment
        "throwIfNamespace": false // defaults to true
      }
    ]
  ]
}

src/index.js

import React, { Component } from 'react'

export class App2 extends Component {
    render() {
        return (
            <div>
                hello
            </div>
        )
    }
}

export default App2

三、转换TypeScript

npm install --save-dev @babel/preset-typescript