标签：ES6 入门 Babel 转译 基础 js preset env babel
Babel基础入门
说明
更新时间: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代码的时候使用。
标签：ES6,入门,Babel,转译,基础,js,preset,env,babel 来源： https://blog.csdn.net/qq_40298902/article/details/122779053
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。