Babel基础入门
- 说明
- 一、入门系列
- (1)概述
- (2)demo
- 1、初始化package文件
- 2、安装babel命令行工具
- 3、安装babel转译器
- 4、配置.babelrc文件
- 5、创建要转译的js文件
- 6、开始编译
- (3)其他转译器
说明
更新时间:2022-02-03
本文主要基于babel官网进行学习,同时综合了网上的很多相关教程,本文会持续更新,不断地扩充
本文仅为记录学习轨迹,如有侵权,联系删除
注意:学习本文之前建议先具备有ES6与js相关知识,本文主要基于babel官网进行学习,地址:https://www.babeljs.cn/docs/
一、入门系列
(1)概述
- 什么是Babel?
Babel 是一个 JavaScript 编译器,可以将ES6语法转成ES5语法 - 为啥要转成ES5?
目前的浏览器大多支持ES5的语法规范,但是却不是所有的浏览器都支持ES6语法规范,所以就有了Babel,用于将ES6转成ES5好被现在很多主流的浏览器支持 - Babel转译器
首先需要知道的是,要想把ES6转换ES5,需要一个叫转译器的东西。而转义器则是由一系列的插件组成,例如将ES6新增的箭头函数转成ES5可以识别的普通函数,需要用transform-es2015-arrow-functions这个插件进行转译,除此之外还有其他的插件,如果要完成ES6转换ES5这个过程,则需要依赖很多插件,于是,出现了一种做法就是将所有的转译插件都集成在一起,组成一个转译器。 - 转译器分类
分类 | 说明 |
语法转译器 | 负责转译js最新的语法,并不负责转译js新增的api和全局对象。这类转译器包括babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等,以后可能还会有新的转译器加入 |
补丁转译器 | 负责转译js最新的api和全局对象。比如浏览器不支持String新增的String.padStart方法和Promise全局对象。通过babel-profill转译,我们可以通过其他代码来让浏览器实现类似String.padStart和Promise的功能。 |
jsx和flow插件 | 这类转译器用来转译JSX语法和移除类型声明的,使用Rect的时候你将用到它,转译器名称为babel-preset-react |
(2)demo
1、初始化package文件
项目的创建都是基于node环境构建的,所以需要提前安装好node环境,首先进入一个空的文件夹,并初始化package文件,命令如下:
npm init
安装完之后的目录:
package.json内容如下:
{
"name": "babel-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "最强菜鸟",
"license": "ISC"
}
2、安装babel命令行工具
安装的方式建议本地安装,只需要在自己需要的用到babel的目录下执行以下命令即可
npm install --save-dev babel-cli
安装完之后的目录如下:
重点是package.json文件,内容如下:
{
"name": "babel-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "最强菜鸟",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0"
}
}
3、安装babel转译器
命令如下:
npm install babel-preset-env --save-dev
此时package.json内容如下:
{
"name": "babel-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "最强菜鸟",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
}
4、配置.babelrc文件
使用如下命令进行.babelrc文件的创建
type nul>.babelrc
创建的目录如下:
在.bablerc文件里面配置一下我们刚才安装的转译器
{
"presets":["env"]
}
“presets”:[“env”]:代表我们刚才安装的转译器(babel-preset-env)的名称
5、创建要转译的js文件
为了方便管理,我们在同级目录下创建一个src目录,用来存放我们的js代码,并且在src目录里面创建index.js文件,在里面写ES6规范的代码
index.js内容如下:
let fun1 = (str)=>{
console.log("str = ",str)
return str
}
class User{
constructor(){
this.name="最强菜鸟"
}
getName(){
console.log(`my name is ${this.name}`);
return this.name
}
}
const u = new User();
u.getName();
6、开始编译
首先在package.json文件里面添加编译的命令
"build": "babel src -d lib"
添加后的package.json内容如下:
{
"name": "babel-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
"author": "最强菜鸟",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
}
注意上面的main配置,有几个需要注意的
(1)main:index.js文件,就是我们刚才创建要转译的文件名
(2)build:babel src -d lib,表示的是要转译的文件位于src目录,并且转译后生成的文件放在lib文件夹里面
最后执行编译的命令:
npm run build
转译后的文件位于lib里面的index.js
转译后的index.js内容如下:
至此,ES6转ES5过程结束
(3)其他转译器
- babel-preset-env
最常用的转译器。通过在.babelrc中配置env选项,可以让代码兼容不同版本的浏览器或者node。浏览器或者node已经支持的语法将不再转译了,不支持的才转译。如果不配置env选项,该转译器等同于babel-preset-latest。
.babelrc配置实例如下:
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}
- babel-preset-es2015
将es2015版本的js代码转译为es5代码,对于es2016版本的代码或者es2017版本的代码不转译。 - babel-preset-react
剥离流类型并将JSX转换为createElement调用,主要在转译react代码的时候使用。