如何在项目中手动配置Babel转码器

前言

Babel是一个ES6转码器,可以将ES6代码转为ES5代码。因为现在各个浏览器或者终端对ES6的支持并不完全同步,所以当你的代码中使用了ES6语法,就有可能发生问题。Babel会在打包的时候将ES6转换成ES5,保证代码的健壮性。接下来我们看看如何在项目中配置Babel:


第一步:创建package.json

打开命令行工具进入项目文件,输入"npm init" 项目下创建package.json,package.json中,至少要有两部分内容"name"与"version"。


第二步:创建Babel的配置文件.babelrc

在项目根目录创建名为.babelrc的配置文件,.babelrc文件用于设置转码规则和插件,基本格式如下:

{

    "presets":[ ],  // 设置转码规则

    "plugins":[ ]  // 插件

}


第三步:项目安装babel包

npm install –save-dev babel-core babel-preset-env babel-preset-stage-2

babel-core

babel-core的作用是把 js 代码分析成 ast ,方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的,如箭头函数,rest 参数,函数默认值等,这种语言层面的不兼容只能通过将代码转为 ast,分析其语法后再转为低版本 js。

babel-preset-env

这个preset比较特殊, 需要了解一下历史背景。最初,为了让开发者能够尽早用上新的JS特性,babel团队开发了babel-preset-latest。这个preset比较特殊,它是多个preset的集合(es2015+),并且随着ECMA规范的更新更增加它的内容。

随着时间的推移,babel-preset-latest 包含的插件越来越多,这带来了如下问题:

1、加载的插件越来越多,编译速度会越来越慢;

2、随着用户浏览器的升级,ECMA规范的支持逐步完善,编译至低版本规范的必要性在减少(比如ES6 -> ES5),多余的转换不单降低执行效率,还浪费带宽。

因此babel官方推出了babel-preset-env插件。它可以根据开发者的配置,按需加载插件。配置项大致包括:

1、需要支持的平台:比如node、浏览器等。

2、需要支持的平台的版本:比如支持node@6.1等。

默认配置的情况下,它跟 babel-preset-latest 是等同的,会加载从es2015开始的所有preset。

babel-preset-stage-2

首先我们了解一个东西:

stage-x:指处于某一阶段的js语言提案

Stage 0 - 设想(Strawman):只是一个想法,可能有 Babel插件。

Stage 1 - 建议(Proposal):这是值得跟进的。

Stage 2 - 草案(Draft):初始规范。

Stage 3 - 候选(Candidate):完成规范并在浏览器上初步实现。

Stage 4 - 完成(Finished):将添加到下一个年度版本发布中。

使用babel-preset-stage-x这个preset是为了扩大可编译ECMAScript语法的范围,babel-preset-env这个preset只会编译Stage 4 的ECMAScript。其实babel-preset-stage-x不是必须的。

接下来我们将preset文件配置到配置文件中:

{    

    "presets":[

        "env", // babel-preset-后面部分作为配置名称

        "stage-2"

    ],  // 设置转码规则    

    "plugins":[ ]  // 插件

}


第四步:项目中安装babel-cli, package.json配置编译命令

输入npm install --save-dev babel-cli安装babel-cli, 然后改写package.json:在scripts中加入 "build": "babel src -d lib"

src:放置原js的文件夹路径

lib:放置转换后js的文件路径(没有的话会自动创建)

这样一来就能通过build命令进行转码了!