安装

babel常用包

1. @babel/core: babel 编译器核心 api
2. @babel/preset-env: 各个版本 javaScript 的编译语法解析（es6、7、8 到 es5）
3. @babel/preset-react: 编译 jsx 语法
4. : 编译 ts 语法
5. babel-loader: 所有代码文件通过 babel-loader 交给 babel 去处理
6. babel-plugin-import: antd 项目按需加载

如果是 react-native 项目，需要处理 flow 语法，安装@babel/preset-flow

普通js项目

安装

yarn add -D babel-loader @babel/core @babel/preset-env

.babelrc

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

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: ['babel-loader'],
      }
    ],
  }
}

普通ts项目

安装

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-typescript

.babelrc

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

webpack.config.js 同上

react项目

上述补充安装

yarn add -D @babel/preset-react

.babelrc

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

webpack.config.js 同上

flow项目

上述补充安装

yarn add -D @babel/preset-flow

.babelrc

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

webpack.config.js 同上