关于babel,你应该知道的一些事

Posted wangziqiang123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于babel,你应该知道的一些事相关的知识,希望对你有一定的参考价值。

概要

babel本身是一个工具,负责将es6/es7的代码转换成es5的代码,以便在现代浏览器里面运行,更重要的是,babel的扩展机制使其可以为React转换jsx,为Flow做静态语法分析。

babel由各种小模块组成,它通过预置一些插件来转换代码,我们接下来会谈到。

注意: 假设你本地安装了node和npm,且不排斥使用命令行工具,同时确保你的项目里面包含pajkage.json文件;

babel-cli

Babel CLI通过命令行实现代码的转换,你可以通过 npm install babel-cli -g 全局安装它,当然也可以在本地项目目录下执行 npm install babel-cli –save-dev 实现本地安装,

这里推荐项目本地安装的方式,主要有以下两个优势:

1.不同的项目本身对babel的版本依赖会有所差异,防止强依赖;
2.项目本身依赖的babel版本可以任意自由灵活管控;

项目安装完 babel-cli 依赖之后,你就可以在控制台输入以下指令:

1
babel example.js --out-file compiled.js

指令每部分的含义:

  • babel 调用babel cli;
  • example.js 指定的需要转换的es6/es7文件;
  • –out-file babel 编译选项,代表编译完的文件输出信息,可以简写成 -o,如果需要编译目录文件,则输出项用 –output-dir ,可以简写成 -d;
  • compiled.js - 指定输出的文件名;

每次改完代码都敲一遍指令,显然是件繁琐的事,我们可以通过给package.json的scripts配置一条构建任务指令,实现该步骤的自动化:

1
2
3
4
5
6
7

...
"scripts":
"build": "babel ./src -d ./lib -w"

...

以上-w指令代表babel会监视src目录下的文件变化,如变化就执行重新编译该代码并输入到lib目录下;

babel-register

babel-register 通过绑定node的require函数,通过钩子函数实现在线代码转换;这种方式不推荐在生产环境使用,由于实时代码转换会带来性能的损耗而导致体验低下,所以更优的方式是代码部署前先完成代码的转换;

不过开发环境使用还是很方便的,可以实现直接编译并执行代码,那如何使用babel-register呢?
首先需要通过以下指令安装 babel-register

1
npm install babel-register --save-dev

创建一个简单es6/es7文件 index.js:

1
2
const sayHello = () => console.log('hello');
sayHello();

创建新文件去require index.js文件 register.js:

1
2
require('babel-register');
require('index.js');

当我们运行 node register.js时,控制台会输出 hello;

babel-node

如果想快速的执行一个需babel转换的文件,最好的方式是使用 babel-node 命令, 该方式同样不建议在生产环境使用,理由同上,安装了babel cli天然就携带了babel-node,如何使用呢?

首先 创建一个简单es6/es7文件 index.js:

1
2
const sayHello = () => console.log('hello');
sayHello();

接下来直接 babel-node index.js ,接下来就可以在控制台看到 hello 的输出;

Configuring Babel

正如之前所说,如果你不告知babel该做什么,babel本事不会做任何事情,除了将文件从一个地方挪到另一个地方,所以我们必须给babel提供presets和plugins配置来告知babel如何工作。

.babelrc

.babelrc 文件是babel的配置文件,大概的文件结构如下

1
2
3
4

"presets": [],
"plugins": []

现在假设我们要通过babel的配置文件告知babel将一份基于标准 es6 React的代码转成es5,如何做?

  1. 首先我们需要安装es2015的preset和React的preset;
1
2
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
  1. 更新 .babelrc , 添加preset配置即可;
1
2
3
4

"presets": ["es2015", "react"],
"plugins": []

那如果我们的代码文件里面用了许多es6草案阶段(Draft)的语法时,babel需要额外添加什么preset呢,众所周知,一个标准的js规范需要经历5个阶段(Strawman, Proposal, Draft, Candidate, Finished),才会最终纳入标准,而草案阶段是很有可能最终纳入标准的, babel通过预置不同阶段的preset完成相应转换工作,主要有以下4个:

  • babel-preset-stage-0
  • babel-preset-stage-1
  • babel-preset-stage-2
  • babel-preset-stage-3

之所以没有 babel-preset-stage-5 , 是因为它就是 babel-preset-es2015

以上每个stage的preset都依赖它后一个preset,例如babel-preset-stage-1依赖于 babel-preset-stage-2 和 babel-preset-stage-3

所以要支持草案阶段的语法只要先安装对应的preset,

1
npm install babel-preset-stage-2

然后更改babel配置文件即可:

1
2
3
4

"presets": ["es2015", "react", "stage-2"],
"plugins": []

babel-polyfill

babel-polyfill 会模拟整个es6环境,例如在没有polyfill的情况下,以下代码:

1
2
3
function () 
return Array.from(arguments).map((a) => a + 2);

会转换成

1
2
3
4
5
function () 
return Array.from(argument).map(function (a)
return a + 2;
);

这段代码其实在很多浏览器(低版本的qq浏览器,百度浏览器等)下并不能正常工作,由于它们的js内核并不支持Array.from api:

1
Uncaught TypeError: Array.from is not a function

为了解决这个问题,我们需要添加一个polyfill, 一个polyfill本身就是一个代码片段,它实现了当前js运行环境未实现的本地api,babel采用corejs作为它的polyfill,采用 regenerator支持generators和async函数;

要支持babel polyfill功能,首先需要安装它:

1
npm install babel-polyfill --save-dev

然后在任何需要用到polyfill的文件的顶部引用该文件:

1
import 'babel-polyfill';

babel高级配置

很多人只是用babel 内置些 presets去完成一些工作,但其实babel的能力远不仅如此:

手工配置插件

babel的presets本身就是一系列预置的插件,如果你想添加一些特殊的支持,你可以手工添加额外的插件,例如你想让你的代码支持es7 的decorators,你只要先安装对应的decorators插件:

1
npm install babel-plugin-transform-decorators --save-dev

然后添加到.babelrc文件中即可:

1
2
3
4

"presets": ["es2015"],
"plugins": ["transform-decorators"]

你可以在babel官网查看babel 官方插件列表,你也可以在npm仓库查看开源社区贡献的babel插件列表

有些插件还可以额外添加一些配置项,例如很多插件会包含一个 “loose” 配置项用来指定 丢弃一些标准规范的行为,以便生成更简单,更健壮的代码;

1
2
3
4
5

...
plugins: ["transform-es2015-classes", "loose": true ]
...

分环境配置babel

babel有很多插件提供了对开发过程中的支持,同时也有很多插件提供了对生产环境的代码优化,你可以通过指定不同环境动态加载不同的babel插件:

1
2
3
4
5
6
7
8
9
10
11

"presets": ["es2015"],
"env":
"development":
"plugins": [...]
,
"production":
"plugins": [...]



当前的上下文环境是根据 process.env.BABEL_ENV 获取的,若没有,则尝试从 process.env.NODE_ENV 获取,若NODE_ENV也没有,则默认是 development 环境;

以下是分别在Unix和Windows系统上设置环境变量的方式:

Unix:

1
2
$ BABEL_ENV=development
$ NODE_ENV=development

Windows:

1
2
$ SET BABEL_ENV=development
$ SET NODE_ENV=development

当然更好的方式是使用类似cross-env的npm 包,它可以让你通过脚本参数指定环境变量。

构建自己的babel配置

每次写相同的babel配置文件其实很浪费时间,所以我们需要构建自己的presets模块

假设有如下的 .babelrc

1
2
3
4

"presets": ["es2015", "react"],
"plugins": ["transform-decorators"]

接下来你要做的就是命名该项目 babel-preset-* ,然后创建两个文件:
一个 package.json 文件:

1
2
3
4
5
6
7
8
9
10

"name": "babel-preset-awesome",
"version": "1.0.0",
"author": "Kliment Petrov <kleopetroff@gmail.com> (http://kleopetrov.me)",
"dependencies":
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-plugin-transform-decorators": "^6.6.5",


然后,创建一个 index.js 文件并导出 .babelrc 的上下文,将文件中的preset和插件改为用require的方式调用:

1
2
3
4
5
6
7
8
9
10
11
module.exports 

presets: [
require("es2015"),
require("react")
],
plugins: [
require("transform-decorators")
]


最后将它发布到npm仓库即可;

其它工具

babel也可以和其它工具例如 linting,代码风格 配合一起使用

Linting

最有名的Linting工具非eslint莫属,babel将其整合到官方支持,首先,我们需要安装对应的包:

1
npm install eslint babel-eslint --save-dev

接下来,在你的项目下创建 .eslintrc 文件,并做配置:

1
2
3
4
5
6

"parser": "babel-eslint",
"rules":
...


最后在你的package.json配置lint脚本,然后执行npm run lint即可:

1
2
3
4
5
6
7

...
"scripts":
"lint": "eslint ./src/*.js*"

...

编辑器插件

由于babel使用者越来越多,各大ide也提供了相应的babel插件支持

总结

babel和其周边的生态在当今web开发中扮演越来越重要的角色,通过这篇文章的介绍,你可以通过配置尽情的使用最新的js规范及周边技术(JSX, Flow, 等等),话不多说,赶快开始吧!

原文:大专栏  关于babel,你应该知道的一些事


以上是关于关于babel,你应该知道的一些事的主要内容,如果未能解决你的问题,请参考以下文章

关于消息队列,你必须知道的一些事

关于高并发和秒杀系统,你知道的和不知道的一些事

关于高并发和秒杀系统,你知道的和不知道的一些事

关于babel你需要知道的事情

HTTP,HTTP2.0,SPDY,HTTPS你应该知道的一些事

HTTP,HTTP2.0,SPDY,HTTPS你应该知道的一些事