这里问题,解决方法,实现方法
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
