首页 > 代码库 > Babel指南——基本环境搭建

Babel指南——基本环境搭建

2024-08-20 20:15:09   224人阅读

ECMAScript的现状

ECMAScript，本身是一个脚本语言的设计规范，基于此规范，有许多为人熟知的语言，如JavaScript、ActionScript等。而时至几年前，随着Node.js的出现，以及HTML5带来的诸多新WebAPI，让JavaScript一下子提升到一个无比重要的位置。时至那个阶段，我们可以统称当时为ECMAScript5（ES5）。

那之后，很快就开始了对ECMAScript 2015（ES6）的制定，ES6一洗JS过去诸多的奇淫巧技、含糊不清的地方，带入了很多现代编程语言的特性，而且其推行的速度远比HTML5和CSS3要快。而在今天讨论ES6的时候，实际上ECMAScript 2016（ES7）已经在制定中（目前其实主要是修正和弥补ES6的不足），很多已经可以使用在实际生产环境中。

然而如上所述，即使是ES6，仍然有许多不足之处，所以急匆匆的ES7上线了，纵然你在使用ES6了，但是以今天的技术发展速度来说，既然ES7有了修正案，尽早的切入到ES7才能跟得上时代的步伐。

而JavaScript是一门需要环境依托运行的语言，无论是Browser环境下，还是服务器环境下，都需要环境的支持。下面这个列表，可以看到你的浏览器，和当前市面可支持JavaScript环境对ES6的支持情况：

https://kangax.github.io/compat-table/es6/

Babel

这时候，如果希望尝试使用ES6/ES7的，则可以使用Babel这个转译器。Babel本身的设计，就是针对JavaScript（所有需要转换为JavaScript）进行设计的。所以如官网的宣传语所说：

Babel transforms your JavaScript

Babel的官方网站： babeljs.io

Babel本身的设计是基于node.js环境下运行使用的，你也可以将babel-core用于浏览器环境。同时，有一个叫做 babel-standalone 的开源项目，则支持非node.js环境下使用Babel。

所以本文注重说明的是，基于node.js环境下配置和使用Babel的说明。

从深到潜，可以简单的将node.js下的配置使用情况区分为：CLI => 各种环境配置（GULP、IDE等）。

CLI环境

一般来说，使用Babel都是在各种环境内使用的，而很少直接使用CLI模式，但是这个模式能帮助理解Babel的基本配置。Babel有一大堆转换器插件，所以搞清楚他的配置方式是很必要的。

官方的博客有一篇基础环境下的安装说明： https://babeljs.io/blog/2015/10/31/setting-up-babel-6 ，这个篇章我只是将这个教程作为简单的翻译。

Babel基本安装

你有两个选项，全局的npm环境安装babel-cli，或当前项目下安装babel-core：

`shell
npm install --global babel-cli
// or
npm install --save-dev babel-core

`

添加插件（Plugins）

你可以在项目的根目录添加一个 .babelrc 文件（json格式）。

假定你需要一叫做 es2015-arrow-functions 的特性支持：

`shell
npm install --save-dev babel-plugin-transform-es2015-arrow-functions

`

注意，这是在当前项目目录添加的npm。

并修改 .babelrc 文件，将这个插件注册：

`json
{
"plugins": ["transform-es2015-arrow-functions"]
}

`

Babel提供了许多ES7的插件，具体可以查询官网的插件列表： Babel Plugins List。

插件的命名机制

这里特别说明一下，Babel的插件名的命名机制的问题

首先，你可以在 Babel Plugins List 查询到插件的列表，你会看到以下的内容：

技术分享

可以看到插件名称，是诸如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping等。

其次，对应的在 Babel的github上的项目 中的 packages目录 下，上述的几个插件，名称则对应为：

`shell
es2015-arrow-functions        => babel-plugin-transform-es2015-arrow-functions
es2015-block-scoped-functions => babel-plugin-transform-es2015-block-scoped-functions
es2015-block-scoping          => babel-plugin-transform-es2015-block-scoping

`

再次，这些插件写入到 .babelrc 的配置文件中的名称，则对应为：

`shell
es2015-arrow-functions        => transform-es2015-arrow-functions
es2015-block-scoped-functions => transform-es2015-block-scoped-functions
es2015-block-scoping          => transform-es2015-block-scoping

`

为了统一称呼，我们定义如下：

插件名- 形如：es2015-arrow-functions、es2015-block-scoped-functions、es2015-block-scoping

插件（安装）包名- 形如：babel-plugin-transform-es2015-arrow-functions、babel-plugin-transform-es2015-block-scoped-functions、babel-plugin-transform-es2015-block-scoping

配置名- 形如：transform-es2015-arrow-functions、transform-es2015-block-scoped-functions、transform-es2015-block-scoping

一般来说，在 .babelrc 中，或者是gulp中，或者是使用 babel-standalone 的在线转译功能，都使用的是 配置名 。一定要区分这三者的区别，不然很容易出错。

Babel预设值（Presets）

目前作为Babel官方的预设，主要包含以下的内容：

  • es2015
  • react
  • stage-0
  • stage-1
  • stage-2
  • stage-3

这些预设，包含了相关所需的插件包，在你的babel配置中（.babelrc），可以混合多个preset使用，同时还可以在此基础上追加plugin。

使用预设置，和插件的用法类似，先执行npm安装所需的包，然后在配置中加载：

`shell
npm install --save-dev babel-preset-es2015 babel-preset-react

`

在 .bablerc 文件中

`json
{
"presets": ["es2015", "react"]
}

`

gulp中使用

要在gulp中使用Babel是一个很简单的事情， 官方提供了简单教程 ，这里我就不翻译了，因为很简单。

特别说明一下的是，如果你需要在gulp使用Babel的某个插件，必须npm安装在当前项目中，而不能使用global。也即：

npm install babel-preset-es2015 --save-dev

。

gulp支持使用 .bablerc 。

在IDE环境中使用

这里以WebStorm为例， 官网提供了教程 ，但其实JetBrians系列的IDE提供了一个叫做File Wathcer的机制的东西，支持实时修改文件的同时，即可自动对译出目标的文件，包括js、css等。这里主要介绍一下如何使用File Watcher。

首先，你需要全局安装babel-cli：

`shell
npm install --global babel-cli

`

其次，在WebStorm（JB家全系IDE通用），打开File -> Settings -> Tools -> File Watcher：

技术分享

点击右上角的 + ，会看到如下的界面：

技术分享

选择 Babel 项：

技术分享

这里， File Type ，你可以选择ECMAScript 6，这样可以让你的项目保持对JS文件不进行处理。如下：

技术分享

对于 Arguments ，你可以进行修改，具体的参数命令，可以参考 Babel Options，比如：

--source-maps --out-file $FileNameWithoutExtension$.js $FilePath$

。

至此，你可以在WebStorm的项目添加一个.es6的文件，每次保存的时候（你按Ctrl + S），他都会自动转译出一个.js文件出来。

使用babel-standalone实时转译

上面已经介绍过了， babel-standalone 提供了接近于官方Babel同步的版本，并可以在非node.js的环境中使用，而且这个类库整合了babel大部分的插件。

你可以通过bower进行安装：

`shell
bower install babel-standalone --save

`

安装完毕后，直接在你的项目使用即可，他的转译参数，和 .babelrc 保持基本的一致。

`javascript
defined([‘babel-standalone‘], function(babel) {
var code = ‘let helloWorld = "hello world"; alert(helloWorld)‘;
var options = {
presets: [‘es2015‘],
plugins: [‘transform-es2015-modules-amd‘]
}
eval(babel.transforms(code, options));
})

Babel指南——基本环境搭建


联系
我们