简介
在前端开发过程中，我们经常使用一些 ES6 语法及新的 API，如Promise、箭头函数、解构赋值等等，但是这些ES6特性并不是所有的浏览器都支持，为此我们需要借助 babel 来进行代码转换。而 babel 在转换代码的时候需要引入一些运行时库，其中之一就是 babel-runtime。但是 babel-runtime 本身只提供了对 ES6 语法的支持，对于一些新 API，如 Object.assign、Promise 等，却需要另外的 Promise 或者 Object.assign 实现。如果每个文件都都要 import Promise 或者 Object.assign 的话，那代码也会变得很臃肿，这时我们可使用 babel-transform-runtime 来解决这个问题。
而在使用使用 babel-transform-runtime 的时候，我们需要引入@babel/runtime的库并且在babel配置文件中配置 plugins。本文要介绍的是 Kylin-babel-plugin-transform-runtime-nebula，它是一个在 babel 编译时将 @babel/runtime 和 seajs-async 组合打包的插件，适用于阿里巴巴内部的 nebulajs 环境，我们可以通过一些简单的步骤来使我们的项目使用该插件。
安装
在安装之前，我们需要先安装好 babel-core，并且 babel-core 版本要在 6.x.x 及以上。
然后我们使用 npm 来安装该包，输入如下命令：
npm install kylin-babel-plugin-transform-runtime-nebula --save-dev
配置
使用 .babelrc 配置
在.babelrc文件中，我们可以添加如下配置：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
----------- ------ - ---------- --- -- ---
-
--
--
---------- -
----------------------------------------------
-- --- ------ ----- --------------------------- --------- ------
----------------------
-
-这将会在 babel编译的过程中调用 kylin-babel-plugin-transform-runtime-nebula 进行优化。在配置文件中需要添加如下 options 参数：
seajs：表示 nebulajs 的依赖路径，一般指向用于加载 nebulajs 的 seajs
举个例子，假设我们的项目目录结构如下：
. ├── node_modules // 依赖库 ├── src // 源代码目录 └── package.json
对于该项目在 windows 系统下的 .babelrc 配置如下：
-- -------------------- ---- -------
-
---------- -
----------------------------
--------
---------
--
---------- -
-
----------------------------------------------
-
-------- -----------------------------------------------------
-
-
--
------ -
------ -
---------- -
------------------------
-
-
-
-使用 gulp-babel 配置
对于使用 gulp 进行编译的情况，配置也要进行相应调整。理论上，我们需要提前从 node_modules 中提取预设的配置，然后将文件指向原始组件的 es5 版本。整个流程如下：
-- -------------------- ---- -------
--------------- -- -- -
----- ------------ - -
-------- -
---------------------------------------------
--------
----------
--
-------- -
---------------------------------------------------------------- -
------ ------------------------------------------------------
---
--
--
------ -----------------------
------------------------
--------------------------
-------------------------
----------------------------
-------------------------------
---使用
在项目代码中，我们需要使用 es6 import 语法，然后便可以使用特殊的 import 'babel-polyfill' 语句来加载 babel-runtime 的运行时库：
import 'babel-polyfill';
import 'reflect-metadata';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { doWeNeedToLogin, getCurrentUser } from 'ldk-sso';
import { request, emitEvent } from 'nebulajs';
import { dateFormat } from 'common/utils/utils.js';
import { EventEmitter } from 'events';注意，我们不应该再在脚本的顶部使用import Promise from 'promise-polyfill' 或者 import Object.assign from 'object-assign' 这些语句了，因为这些已经被kylin-babel-plugin-transform-runtime-nebula 包含了。
另外，该插件的另一个重要的特性是它使用了 seajs 进行模块化加载并处理了项目中的异步请求，这为我们解决了项目中的某些问题。而项目中如何使用 seajs 参见这里
示例代码
下面演示一段基于 React + Redux + React-Router 的代码：
-- -------------------- ---- -------
------ -----------------
------ - ------ - ---- ------------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ - ---------- -- ------- ------ ------ - ---- -------------------
------ ------- ---- -------------
------ ------- ---- -----------------------
------ -------- ---- ------------------------
------ -------- ---- ------------------------
------ ----- ---- ---------------------
------ ----- ---- ---------------------
------ --------- ---- -------------------------
------ --- ---- -------------------
------ - ---- ---------
------ - --- - ---- -----------
------------- ----- ------------------- ---
----- ----- - ------------
--------
----------------------
--
-------
--------- --------------
--------
--------
------ ----- -------- -------------------
------ ------------- -------------------
------ --------------- ---------------------
------ ----------- ----------------------
------ ----------- ----------------------
------ ----------- -----------------
------ -------------------------- -----------------------
---------
---------
------------
------------------------------
--扩展阅读
[1] https://babeljs.io/docs/plugins/transform-runtime/
[2] https://www.npmjs.com/package/kylin-babel-plugin-transform-runtime-nebula
[3] https://github.com/alibaba/nebulajs
[4] https://seajs.github.io/seajs/docs/#api
[5] https://github.com/TankC/zrender
[6] https://github.com/antvis/zrender
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a10