babel笔记

Babel是js的编译器，用来将ES6的代码转换成ES6之前的代码

Babel本身可以编译ES6的大部分语法，比如let、const、箭头函数、类。但是对于ES6新增的API，比如Set、Map、Promise等全局对象，以及一些定义在全局对象上的方法(比如Object.assign/Array.from)）都不能直接编译，需要借助其它的模块Babel一般需要配合Webpack来编译模块语法

一、使用babel编译ES6代码

文档：https://babeljs.io/setup

1.执行编译的命令

在package.json文件中添加执行babel的命令：

"script":{
	"build": babel src -d dist
}

此命令的-d是指–out-dir，意思是使用babel的命令将src下的文件编译输出到dist文件目录下

之后就可以直接使用npm run build命令执行编译

2.Bable的配置文件.babelrc

需要自己添加一个配置文件才能使用babel，需要先安装babel，使用命令npm install @babel/preset-env@7.11.0 --save-dev

创建配置文件.babelrc，并配置

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

babel-preset(预设)

如果我们一个个去安装使用插件，那么需要手动来管理大量的 babel 插件，我们可以直接给 webpack 提供一个 preset，webpack 会根据我们的预设来加载对应的插件列表，并且将其传递给 babel。

• 比如常见的预设有三个：
  • env
  • react
  • TypeScript
• 安装 preset-env：

npm install @babel/preset-env