最简单es6 7 等转es5 babel配置

安装

es6 7等转译 es5

yarn add @babel/core @babel/cli @babel/preset-env

配置

1. 新建 .babelrc
2. 添加内容如下：
   presets：一组 Babel 插件和/或 [options] 配置的可共享模块
   plugins：插件

preset-env：https://www.babeljs.cn/docs/babel-preset-env

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

demo

src/index.js

const a = () => {
  console.log(222)
}
a()
class Foo {
  method() {}
}

终端输入：npx babel src --out-dir build
解释下：执行babel转译，将src文件夹下js的文件，转译输出到 build（自动创建）文件夹下

image.png

生成如下代码：

image.png

箭头函数和class关键字都已经转成es5

结合webpack

有2种方式在webpack中，配置babel

安装

yarn add @babel/core @babel/cli @babel/preset-env babel-loader
// 如果需要转react则在加 @babel/preset-react

2种方式都需要如下基础webpack.config.js 配置：

module:{
    rules:[
      {
        test: /\.js$/,
        use: ['babel-loader'] 
      }
    ]
  }

第一种 新建.babelrc

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

在执行webapck打包的时候，会自动读取.babelrc的配置

第二种配置都集中webpack中配置

module:{
    rules:[
      {
        test: /\.js$/,
        use: {
          loader:'babel-loader',
          options:{
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins:[]
          }
        }
      }
    ]
  }

建议使用第一种配置方式