npm 包 kylin-babel-plugin-transform-runtime-nebula 使用教程

简介

在前端开发过程中,我们经常使用一些 ES6 语法及新的 API,如Promise、箭头函数、解构赋值等等,但是这些ES6特性并不是所有的浏览器都支持,为此我们需要借助 babel 来进行代码转换。而 babel 在转换代码的时候需要引入一些运行时库,其中之一就是 babel-runtime。但是 babel-runtime 本身只提供了对 ES6 语法的支持,对于一些新 API,如 Object.assignPromise 等,却需要另外的 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/runtimeseajs-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


猜你喜欢

  • npm 包 lb-component-passport 使用教程

    简介 lb-component-passport 是一个基于 LoopBack 的认证和授权组件库。它提供了一系列的组件,包括登录组件、注册组件、忘记密码组件等,用于快速搭建认证和授权系统。

    3 年前
  • npm 包 adsbexchange-js-utility 使用教程

    简介 npm 包 adsbexchange-js-utility 是一款基于 ADS-B 数据的 JavaScript 库,可以方便地获取航班信息。该库支持节点版本 8.x 及以上和浏览器环境。

    3 年前
  • npm 包 cms-editor 使用教程

    在前端开发领域,CMS (Content Management System) 是一个非常常见且重要的概念。它可以让开发者更高效地管理各种内容,如文章、图片、视频等等。

    3 年前
  • npm 包 hookis 使用教程

    在前端开发中,我们经常需要使用一些开源工具或者 npm 包来提高我们的开发效率。其中一个常用的 npm 包就是 hookis。 hookis 是一个轻量级的钩子库,适用于 JavaScript 和 ...

    3 年前
  • npm 包 repolar-parse 使用教程

    在前端开发中,我们经常需要处理和操作数据。其中,对于数学公式和数据可视化的处理,我们需要使用到 polar coordinate。repolar-parse 是一个 npm 包,它可以方便地将 pol...

    3 年前
  • NPM 包 Notistack2 的使用教程

    在前端开发中,我们经常需要使用到一些强大而方便的工具。其中,Notistack2 就是一个非常好用的通知栏库,可以让我们快速地添加、管理、展示消息通知。在本文中,我们将详细介绍如何使用 Notista...

    3 年前
  • npm 包 babel-plugin-decorators-inject 使用教程

    在 JavaScript 中,装饰器(decorators)是一个非常实用的特性。装饰器能够简洁地引入一些横切关注点(cross-cutting concerns),如日志记录、缓存、权限等等。

    3 年前
  • npm 包 react-data-grid-wow 使用教程

    在前端开发中,表格是一个经常需要使用的组件。但是如果每次都需要手写表格的样式和交互逻辑,会相当繁琐。这时,我们可以使用一些表格组件库来简化我们的开发流程。其中,react-data-grid-wow ...

    3 年前
  • npm 包 sequentialize 使用教程

    在前端开发过程中,我们经常需要处理多个异步函数的调用顺序问题。这时候,一个名为 Sequentialize 的 npm 包就可以派上用场了。Sequentialize 可以按照指定的顺序执行异步函数,...

    3 年前
  • npm 包 @hokid/generator-sazy 使用教程

    前端开发人员经常需要使用许多 npm 包来构建和管理项目。本文将介绍一个名为 @hokid/generator-sazy 的 npm 包,它可以帮助我们简化项目的构建和维护过程。

    3 年前
  • npm 包 @hokid/generator-vuetut 使用教程

    在前端开发中,Vue.js 已经成为了非常受欢迎的框架之一,它可以帮助我们快速构建用户界面。而在编写 Vue.js 应用程序时,我们经常需要编写大量的测试代码来确保应用程序的正确性和稳定性。

    3 年前
  • npm 包 @harrison-ifeanyichukwu/xml-serializer 使用教程

    介绍 在前端开发中,我们常常需要将数据以 XML 格式进行传输。但是,将数据转换为 XML 格式并非是一件容易的事情。由于 XML 的规范较为复杂,需要遵循一定的语法规则,因此我们需要借助一些工具来帮...

    3 年前
  • npm 包 @koehlerb/feathers-datastore 使用教程

    在前端开发中,我们经常需要对数据进行增删改查的操作,而 @koehlerb/feathers-datastore 正是一个帮助我们完成这些操作的 npm 包。本文将介绍该包的使用教程。

    3 年前
  • npm 包 @matthewp/display-drawer 使用教程

    在前端开发中,我们经常需要在页面中展示大量的数据,对于用户来说,看到一块巨大的数据很容易让其感到困惑和不知所措。为了解决这个问题,我们可以使用抽屉式展示组件,将数据分层次展示,以提高用户的可读性和可视...

    3 年前
  • npm 包 sectionize 使用教程

    在前端开发中,我们常常需要对文章或者页面进行分段展示和样式调整。而在这个过程中,我们会发现一个名叫 sectionize 的 npm 包,它可以帮助我们快速地将页面内容分段。

    3 年前
  • npm 包 @dilan2/ckeditor5-build-imageupload 使用教程

    前言 在前端开发中,富文本编辑器是一个常见的需求。其中,CKEditor 是一个流行的开源富文本编辑器。为了扩展 CKEditor 的功能,社区开发了许多插件,而这些插件通常以 npm 包的形式发布。

    3 年前
  • npm包gendiff-emk使用教程

    随着前端开发变得越来越复杂,代码的维护过程变得越来越困难。为了避免出现问题,我们需要对代码进行更加严格的测试和检查。 其中之一就是比较两个文件之间的差异,并且将其以一种易于阅读的方式展示出来。

    3 年前
  • npm 包 api-console-dev-preview 使用教程

    在前端开发中,调试 API 是非常常见的任务。一个好的 API 调试工具可以提高我们的开发效率。而 npm 包 api-console-dev-preview 就是一款非常好的 API 调试工具。

    3 年前
  • npm 包 images-drop-area-component 的使用教程

    前言 在前端开发过程中,图片上传是一个常见需求,在以往的实现方式中,最常用的是利用 input 标签进行文件选择,再通过 ajax 或 form 表单提交实现上传。

    3 年前
  • npm 包 node-red-contrib-gitlab 使用教程

    当今时代,GitLab 已成为一个非常流行的代码托管平台,而且在使用中发现,部署与配置都比较方便。为了方便开发人员更好的使用 GitLab,npm 上已有了一个名为 node-red-contrib-...

    3 年前

相关推荐

    暂无文章