前言

首先，你说你不知道babel是啥，影不影响你干活？大概率是不会影响，因为很多人的工作就是一个螺丝钉，只需要按部就班的实现业务就好了，往往对于一些偏工程化的东西不想了解或者说是不知道该从何入手。在我个人的认知里，我认为作为一名程序员，应该对三大方向上随着年限的增长有一个逐步稳定的提升（如果我不能有所提升，那不是等待公司fire掉我，一定是我先fire掉公司）。基础、业务、工程化 基础 是什么，基础好比你是一名web前端，你应该提升你的js css的能力以及各种框架的能力，包括不限于vue生态（或react等）、小程序生态等，这些是你应该具备的最基础的素质，我见过太多人连最基本的js或者css写的一塌糊涂就开始写项目了，公司关注的是什么？是你能不能实现，你各种搜索最终是实现了，等待你的将会是各种bug的修复，这就是为什么会出现改1个bug出来N个bug的原因，因为你的基础不牢。 业务 是什么？业务就是给客户实现的各种功能，不同的场景需要用到什么技术，随着项目的推进，你可以总结出各种应对的方案，在下次遇到类似的场景的时候可以快速实现。 工程化 又是什么?工程化我这里理解为是你的架构能力，正如我开头所问的，你不知道babel影不影响你干活？某些事情是有人给你做了，你才能在那儿安安心心的写业务，这不是凭空就在那儿的你一定要清楚。

babel的概念

老规矩，写此文之前我都会先看看之前作者的写作思路，所以你可以看到我的浏览器页签的状态现在是这样的:

首先你想知道掌握一项技能，得先知道它的概念吧，babel是一个独立存在的东西，它不依赖于webpack，但是在工程化的开发中，往往会利用webpack结合babel去使用。其次，你要掌握它的思想，也是学习了webpack的思想，自己作为一个基座，你想要实现什么功能，就通过presets或者plugins来扩展，像不像webpack的loader和plugin，对吧，所以思想很关键。那么来看下官方对于babel的定义吧:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments

babel主要是用作把es6语法转换成兼容性的代码的一个工具。当然了，它还可以通过扩展来进行一些jsx以及ts的转换，我们这里不展开。 概念你清楚了，那看看细节，presets是预设，它是一堆plugins的集合。那plugins又是干啥的，也是用作代码转换的，比如你想要自己实现定制化的功能就可以通过插件来实现，如果说presets预设里包含了plugins的功能，那么plugins是不需要再次单独配置的。 关于概念相关的我们最后再了解一下presets以及plugins的执行顺序(我图中标注的1234的顺序):

babel的使用

理解一定是概念结合操作你才能更清晰，来吧， 1.安装先：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2.创建babel.config.json并加入配置

3.配置启动命令

4.那咱们敲几行代码转转呗(左为源码，右为转换后代码):

babel转换了个寂寞？ 原来是ie没了啊，那咱们为了演示babel的效果，配置里给ie强行加上（当然实际开发中不要加ie 重要的事情说一遍！）

再转：

哦豁，果然es6转es5了，那细心的你一定发现了，我前面一直没提的corejs是干啥玩意的，先别急，再敲两行转换：

哦豁，你会发现转换出来的代码给我引进来两个依赖，所以引出了core-js,它的存在是为了兼容浏览器而存在的，他包含所有的api兼容的实现，就是说你这个Promise在低版本浏览器木得，它给你造了一个，所以如果你的运行时依赖如果没有core-js这个依赖的话，你的js可以运行吗？当然是跑不起来。 安装core-js：

版本依赖大于咱们babel中设置的3.6.5，node运行一下咱们得dist目录下的index.js，成功。

babel与webpack搭配

既然你了解了babel，那么与webpack的结合使用那么便是轻松地事情，先来到文档:

点击进入：

可以看到在webpack的使用babel也是非常的简单，babel作为loader被webpack调用，如果你对webpack的loader概念还不熟悉可以翻看我之前写的文章，通过正则匹配js，调用babel-loader实现对js代码的转换，如何配置babel和我们上方的写法是一样的，需要注意的一点是，同样的我们也需要在webpack中安装core-js（一定要明确是运行时依依赖，而不是开发时依赖），因为在最终你打包好的js中，它会把你用到的一些JS的API的兼容方法打包进去。

高手

我是怎么评判一个人是不是真正的高手，如果你掌握一项技能，并且可以站在别人的角度上，以自己的学习过程来分析，如何让对方避免走弯路还能听懂并且掌握，这就是真正的高手。如果你说了一通，别人依然不能形成他自己的理解，那就不是真正的高手，让社会进步的一定不是一两个人的努力，一定是很多很多人一起努力的结果，我知道做这件事很难，因为真正有这种share思想的人一定是有奉献精神的人。

尾声

坚持很容易，但是躺平很难，一路走来，在code的路上也有七八年了，这么多年的几乎都是全程在单兵作战，也走了很多弯路，因为在自学的过程中也会看些教程和文章，很多人要么是直接给你念文档，要么是给你来一套难以理解的原理讲解，这些东西往往对于一个刚刚接触的人来说是很难消化的，我写文章的目的就是让更多的人可以接触某项技能的时候有一个从0到1的过程，因为我一直认为从0到1很难，但是从1到100反而要容易得多。如果你在阅读完此文在你脑中可以对某个概念形成一个完整的脉络，那么就是此文的意义。