JavaScript babel 怎么用

你有没有过这样的经历：写了一段最新的JS代码，在自己的电脑上跑顺了，发给同事或者放到网站上，对方的浏览器却跳出个“语法错误”的提示？不是你写错了，是浏览器的“理解能力”没跟上——就像你给只会说方言的长辈说网络热词，得先把话转成他能懂的版本才行。这时候，Babel就成了那个“方言翻译官”。

很多人听Babel觉得“玄乎”，其实它的作用特别接地气：把新的JS代码，转换成所有浏览器都能看懂的“老版本JS”。比如你用了ES6的箭头函数，或者ES7的async/await，老浏览器根本不认，Babel就把箭头函数转成普通函数，把async/await转成老版本的Promise，这样不管是十年前的浏览器还是现在的新浏览器，都能正常跑。

第一步：准备“翻译工具”——安装Babel

Babel是个工具包，得先装到电脑上。现在最常用的是npm装，你得先装个Node.js（就像你得先装微信才能发消息），打开电脑的命令行，敲两行简单的代码就行。敲完后，你的项目里会多一个node_modules文件夹，里面全是Babel的翻译插件，还有个package.json文件，用来记你装了啥工具。

别担心太复杂，新手不用搞懂这些文件夹的细节，只要按顺序敲命令就行，就像你按App Store的提示点“安装”，不用知道App是怎么写的，能用就行。

第二步：设置“翻译规则”——配Babel配置文件

装完工具，得告诉Babel“要翻译成啥样的方言”，这就需要一个叫.babelrc的配置文件。这个文件就像翻译官的“工作手册”，比如你要给长辈翻译，就用“普通话转方言”的规则；如果要给年轻人，就不用太老的规则。

举个例子，如果你要兼容主流的浏览器，就加一行规则，告诉Babel“把最新的JS转成能适配Chrome、Firefox这些常用浏览器的代码”。还有个常用的插件@babel/preset-env，它就是个“万能规则包”，能自动识别你需要兼容的浏览器，不用自己一条一条写规则，省了好多麻烦。

第三步：开始“翻译工作”——运行Babel转代码

配置好规则，就可以让Babel干活了。还是在命令行里敲一行命令，Babel就会自动把你项目里的JS代码，从src文件夹（你的源代码）里找出来，翻译成兼容的代码，放到dist文件夹（翻译后的成品）里。

比如你写了这样一段ES6的箭头函数：

const add = (a, b) => a + b;

Babel转完之后，就变成了老浏览器能懂的普通函数：

const add = function(a, b) { return a + b; };

是不是特别直观？就像把“yyds”转成“永远的神”，大家都能看懂。

新手常踩的“小坑”

很多新手第一次用会犯两个错：一是忘了装@babel/cli这个命令行工具，结果敲命令的时候Babel不认；二是没配对规则，比如只装了Babel核心工具，没装@babel/preset-env，转出来的代码老浏览器还是不认。

其实还有更简单的用法，比如用Vue、React这些框架的小伙伴，框架已经把Babel集成好了，你只要正常写代码，框架会自动帮你转，不用单独装Babel，就像你用外卖App，不用自己找骑手，App已经搞定了所有步骤。

总结一下，Babel的用法就是“装工具、设规则、转代码”三步，核心就是解决新JS和老浏览器的“沟通问题”。下次再遇到浏览器报错“语法错误”，别着急改代码，先想想是不是需要用Babel“翻译”一下，让代码能在更多地方跑起来。