你好,babel

简介: 你好,babel

写在前面

其实学babel是本人2019年Q3的一个计划,因为当时自己做的一个项目需要自己去配babel,也遇到了一些困难,发现自己对babel的了解还是很少的,所以决定好好看下babel;可是后来解决了当时的问题后,由于业务需求很多再加上自己懒了(这才是最终的原因),学习babel的事也就不了了之了。。。拖到了现在0.0

已经进入2020年了,还没有来得及总结自己的19年,但是2020年我要立下一个早该做到的flag,今年的Q1本人要彻底搞懂babel,也不说彻底搞懂啦,最起码本人要做到团队所有的babel问题我都可以直接解决。

其实我也不是为了搞懂babel而想着去学,我最近也看了一些关于babel的博客,慢慢的发现babel其实很有意思,去研究一个东西对自己的技术成长也会有提升,话不多说学就完了,奥利给!

对babel的基本理解

其实在学babel之前我也做了一些功课,对babel也有一些基本的理解,我先基本的谈谈我对最基本的理解

babel是什么?

babel就是一个转换器,它可以把高阶ES2015+版本的代码转换成浏览器可以解析的代码(向后兼容)。

为什么要用babel?

本人是做前端的,主要就是在用js,js版本也是一年比一年在更新,每次更新都会出一些更方便好用的方法,到现在ECMAScript已经到了ES10了,已经迭代了10个版本;不过现在多数浏览器支持的主流js语言是ES2014语法,有很多对ES2015以及ES2015+的一些语法是不支持的,也就是你用这些语法有部分浏览器是不支持的,就会报错。

但是高阶语法就是很方便啊,我就是想用,怎么办?这个时候为什么要用babel就很明显了,就是用它来把ES2015+的语法编译成浏览器能识别的通用语言,举个最简单的例子:

// babel编译前,ES2015箭头函数
(n) => { return n + 1 }
// babel编译后,ES2014函数
function (n) { return n + 1 }

babel如何工作的?

看了一些关于babel的博客,我觉得babel就是一个插件集合,里面有一个个的插件。

babel将代码解析成AST(抽象语法树),然后用一个个对应的插件修改AST,将修改好的AST输出。

babel的一些其他的特性

babel默认是只会去转义js语法的,不会去转换新的API,比如像Promise、Generator、Symbol这种全局API对象,babel是不会去编译的;

这个时候就需要使用babel的babel-polyfill或者babel-runtime库 和 babel-plugins-transform-runtime插件结合使用按需添加polyfill。

写在最后

本人现在学习一门技术分三步(以这次学习babel为例):

  1. 先看关于babel的博客文章,对babel有个基本的认知;
  2. 列下babel学习目录思维导图;
  3. 对着自己列的思维导图把babel文档过一遍;
  4. 去了解babel究竟是如何把高阶语法编译成浏览器能识别的语法的。

我对自己学一门技术的步骤有点疑问,总感觉这样去学效率不高,总感觉哪里有点不对,但我也说不上来哪点不对,如果谁有建议什么的还望提给我,抱拳了


在最后列下我自己学习babel的目录脑图,我将开启我的babel学习之旅。


2020年,加油!

相关文章
|
JavaScript 前端开发 编译器
分享:Babel7的配置
分享:Babel7的配置
291 0
|
21天前
|
JavaScript 前端开发 IDE
ESLint
【10月更文挑战第14天】
29 12
|
15天前
|
JavaScript 前端开发
将 Babel 插件应用于实际项目中
【10月更文挑战第25天】如果在应用插件过程中出现问题,可以检查 Babel 配置是否正确、插件的依赖是否安装完整、构建工具的集成是否正确等,逐步排查和解决问题。通过以上步骤,就可以将 Babel 插件成功应用到实际项目中,实现特定的代码转换和功能增强。
|
6月前
|
编解码 JSON JavaScript
babel的学习
babel的学习
43 0
|
前端开发 JavaScript
nuxt3:postcss-pxtorem
nuxt3:postcss-pxtorem
474 0
nuxt3:postcss-pxtorem
|
JavaScript API
十问babel,用最简单的话说清楚babel(二)
十问babel,用最简单的话说清楚babel
106 0
|
Web App开发 移动开发 JavaScript
十问babel,用最简单的话说清楚babel(一)
十问babel,用最简单的话说清楚babel
275 0
|
JavaScript 前端开发 编译器
什么是 Babel?
什么是 Babel?
157 0
什么是 Babel?
|
JSON 自然语言处理 JavaScript
浅谈babel原理
很早之前就听同事分享了babel原理,其核心就是 AST(Abstract Syntax Tree),今天将自己所了解的知识点简单整理记录一下。
|
前端开发 JavaScript 测试技术
postcss及其插件autoprefixer、postcss-preset-env、stylelint的使用
postcss及其插件autoprefixer、postcss-preset-env、stylelint的使用
292 0