11-webpack-babel处理高级语法

这里问题,解决方法,实现方法
https://www.babeljs.cn/docs/setup/#installation
https://babeljs.io/docs/en/

语法转换:箭头函数
API转换:ES6中提供的新的数组相关方法,新的字符串相关方法

一.问题

我们通过webpack可以将ES6的一部分高级语法转换为浏览器可以识别的低级语法,比如:
import
let say=name=>console.log(name)
但是任然有一部分ES6高级语法无法通过webpack识别,比如:
class Person{
name
}
let p=new Person()

二.解决方法

通过安装babel-loader,转换器并且在webpack中配置,可以得到很好的效果

三.实现方法

• 安装babel
  • npm i babel-loader @babel/core @babel/cli @babel/preset-env
  • npm i @babel/plugin-transform-runtime @babel/runtime @babel/plugin-proposal-class-properties
• 创建处理ES6高级语法的loader规则
  • test:/.js$/,use:'babel-loader',exclude:/node_modules/

• 在根目录下创建babel配置文件file-.babelrc
  {
  "presets":["@babel/env"],
  "plugins":["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
  }

  
  image.png
  image.png
  image.png
  image.png
  image.png
  image.png
  image.png
  image.png