Babel 是什么？

Babel · The compiler for writing next generation JavaScript

Babel 作为一个工具，其实只要跟着它官网文档过一遍就知道它怎么用了。

一句话，Babel 能把你写的 JS 变成其他版本的 JS。

这样一来，你就可以写 IE 不支持的 JS 语法了，因为最终会被翻译成 IE 支持的语法。

比如你写 ES6

// src/index.js
[1,2,3].map(n => n + 1);

Babel 可以把它翻译成 ES5

// lib/index.js
[1,2,3].map(function(n) {
  return n + 1;
});

如何安装

进入你的项目目录，用这句话安装 Babel：

npm install --save-dev babel-cli babel-preset-latest

然后新建一个文件，命名为 .babelrc，文件内容如下：

{
  "presets": ["es2015"]
}

然后在 package.json 里面添加一个 script：

"scripts": {
    "build": "babel src -d lib"
},

然后运行命令

npm run build

那么 src/index.js 就会被翻译成 lib/index.js。

如何实时翻译

怎么能做到我每次改 src/index.js ，lib/index.js 就自动变化呢？

只需要在上面的 script 里面加一个 --watch 选项即可：

这是 package.json 文件
 
{
  ...
  "scripts": {
    "build": "babel --watch src -d lib"
  },
  ...
}

你也用 Babel 来试试 ES2016+ 的语法吧！

饥人谷一直致力于培养有灵魂的编程者，打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实，他们以饥人谷为起点，足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程：加微信 xiedaimala03，官网:https://jirengu.com

本文作者：饥人谷方应杭老师