简介
在前端开发过程中,我们经常使用一些 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 来安装该包,输入如下命令:
--- ------- ------------------------------------------- ----------
配置
使用 .babelrc 配置
在.babelrc
文件中,我们可以添加如下配置:
- ---------- - --------------------- - ---------- - ----------- ------ - ---------- --- -- --- - -- -- ---------- - ---------------------------------------------- -- --- ------ ----- --------------------------- --------- ------ ---------------------- - -
这将会在 babel编译的过程中调用 kylin-babel-plugin-transform-runtime-nebula 进行优化。在配置文件中需要添加如下 options 参数:
seajs
:表示 nebulajs 的依赖路径,一般指向用于加载 nebulajs 的 seajs
举个例子,假设我们的项目目录结构如下:
- --- ------------ -- --- --- --- -- ----- --- ------------
对于该项目在 windows 系统下的 .babelrc 配置如下:
- ---------- - ---------------------------- -------- --------- -- ---------- - - ---------------------------------------------- - -------- ----------------------------------------------------- - - -- ------ - ------ - ---------- - ------------------------ - - - -
使用 gulp-babel 配置
对于使用 gulp 进行编译的情况,配置也要进行相应调整。理论上,我们需要提前从 node_modules 中提取预设的配置,然后将文件指向原始组件的 es5 版本。整个流程如下:
--------------- -- -- - ----- ------------ - - -------- - --------------------------------------------- -------- ---------- -- -------- - ---------------------------------------------------------------- - ------ ------------------------------------------------------ --- -- -- ------ ----------------------- ------------------------ -------------------------- ------------------------- ---------------------------- ------------------------------- ---
使用
在项目代码中,我们需要使用 es6 import
语法,然后便可以使用特殊的 import 'babel-polyfill'
语句来加载 babel-runtime 的运行时库:
------ ----------------- ------ ------------------- ------ ------ - --------- - ---- -------- ------ - ---- - ---- --------------- ------ - ---------------- -------------- - ---- ---------- ------ - -------- --------- - ---- ----------- ------ - ---------- - ---- ------------------------ ------ - ------------ - ---- ---------
注意,我们不应该再在脚本的顶部使用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