zoukankan      html  css  js  c++  java
  • 你好,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学习之旅。
    image

    2020年,加油!

  • 相关阅读:
    Dobbo介绍
    Java反射
    Rocket MQ简介
    logback异步日志
    Java Arrays.asList
    图解Javascript——作用域、作用域链、闭包
    android源码-安卓源码-Android源码下载-安卓游戏源码
    Ghost版Win8.1系统企业版下载
    3dmax详细讲解全套攻略在线视频教程
    网站分析师如何让分析报告更具价值
  • 原文地址:https://www.cnblogs.com/bai1218/p/12152647.html
Copyright © 2011-2022 走看看