Babeljs 入门

作者:刘专,日期:2018 年 05 月 13 日

最简形式

安装命令行工具和 env 预设值。

$ npm install --save-dev babel-cli babel-preset-env

创建 .babelrc 文件。

{
    "presets": ["env"]
}

视频页面有很多高质量视频,可以仔细观摩学习。

Polyfill

由于 Babel 只转译新语法(比如箭头函数),为了使用新的全局属性(比如 Promise)或原生方法(比如 String.padStart),可以使用 babel-polyfill。该 polyfill 用到了 core-jsregenerator

安装

$ npm install --save-dev babel-polyfill

使用

只需在程序的入口文件引入即可。

JSX 和 Flow

Babel 可以转译 JSX 语法,也可以移除类型标注。使用 React 预设值即可。

安装

$ npm install --save-dev babel-preset-react

使用

"react" 加入到 .babelrc 文件的 presets 数组。

插件系统

Babel 本身就是由插件构成。它是一个编译器,从高层结构上看,它对代码的处理可以分为 3 个阶段:解析(parsing)、转换(transforming)和输出(generation)。

Babel 默认情况下没有任何作用,可以用伪代码表示为:const babel = code => code;,即解析代码,然后将输入的代码原封不动输出。

需要为 Babel 配备不同的插件,它才可以有效工作(这些插件改变第二阶段的工作内容,即 transforming)。

TODO:解释什么是 presets?

REF