标签：插件 浏览器 babel js 语法 ES2015 你好
写在前面
其实学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为例)：
- 先看关于babel的博客文章，对babel有个基本的认知；
- 列下babel学习目录思维导图；
- 对着自己列的思维导图把babel文档过一遍；
- 去了解babel究竟是如何把高阶语法编译成浏览器能识别的语法的。
我对自己学一门技术的步骤有点疑问，总感觉这样去学效率不高，总感觉哪里有点不对，但我也说不上来哪点不对，如果谁有建议什么的还望提给我，抱拳了
在最后列下我自己学习babel的目录脑图，我将开启我的babel学习之旅。
2020年，加油！
标签：插件,浏览器,babel,js,语法,ES2015,你好 来源： https://www.cnblogs.com/bai1218/p/12152647.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。