简介
broccoli-es6-module-transpiler 是一个用于将 ES6 模块转换为 AMD 模块的工具。它可以在构建时将 ES6 模块转换为另一种通用的模块格式。
安装
首先，你需要安装 broccoli-es6-module-transpiler，可以使用 npm 包管理器进行安装。
--- ------- ---------- ------------------------------
使用方法
可以将 broccoli-es6-module-transpiler 与 broccoli 或 ember-cli 一起使用。下面我们以 broccoli 为例，介绍如何使用该工具。
使用 broccoli-cli 命令行工具
- 在你的项目根目录下创建
Brocfile.js或Brocfile.js文件。 - 在
Brocfile.js文件中引入broccoli-es6-module-transpiler。
----- ------------- - ------------------------------------------
- 使用
esTranspiler函数创建一个模块实例。
--- ---------- - -------- --- --------- - --------- --- ----- - ------------------------- - -- ------- ---
- 返回模块实例。
-------------- - ------
在 ember-cli 中使用
可以将 broccoli-es6-module-transpiler 与 ember-cli 一起使用。在 ember-cli-build.js 文件中，添加如下代码：
----- -------- - --------------------------------------------
----- ------------- - ------------------------------------------
-------------- - ------------------ -
----- --- - --- ------------------ -
-- -------
---
----- --------- - -------------
----- ---------- - ------------------------ -
-- -------
---
------ -----------
--在 outputTree 变量中，将输入树和选项传递给 es6Transpiler 函数，从而将 ES6 模块转化为 AMD 模块。
选项
broccoli-es6-module-transpiler 提供了以下选项：
moduleName
该选项定义了要转换的模块的名称。如果未定义，则使用文件路径作为默认名称（例如：app/controllers/application.js）。
--- ----- - -------------------- - ----------- -------------- ---
amdNameResolver
该选项设置了一个函数，用于映射模块的名称。不过，使用 moduleName 选项通常更为便利。
--- ----- - -------------------- -
---------------- -------------------- -
------ -------- - ------------------------ ----
--
---globals
该选项定义了 ES6 模块中任何全局变量的名称和对应的 AMD 模块名。
--- ----- - -------------------- -
-------- -
--------- --------
--
---exports
该选项定义了 ES6 模块中的 export 导出项，把它们映射到指定的 AMD 模块。
--- ----- - -------------------- -
-------- -
------------ -
----------
-------------
-----------
-
-
---formatter
该选项为 ES6 模块代码生成器指定了格式化程序。如果要添加自定义的格式化程序，请继承 AmdFormatter 类，并覆盖 AmdFormatter.prototype.header 和 AmdFormatter.prototype.footer 方法。
----- ------------- - ------------------------------------------ ----- --------------- - --------------------------------- --- ----- - -------------------- - ---------- --- ----------------- ---
示例代码
下面是一个简单的示例代码，实现了一个计算器，该计算器通过 ES6 模块的方式导出和使用。
-- -------------------------
----- ---------- - -
------ -- -
------ - - --
--
----------- -- -
------ - - --
--
----------- -- -
------ - - --
--
--------- -- -
------ - - --
--
--
------ ------- -----------
-- -----------
------ ---------- ---- -----------------------
----------------------------- ----使用 broccoli-es6-module-transpiler 将上面的代码转换为 AMD 模块：
-- -------------------------
-------------------------------- --- ---------- -
--- ---------- - -
---- ----------- -- -
------ - - --
--
--------- -------- --- -- -
------ - - --
--
--------- -------- --- -- -
------ - - --
--
------- ----------- -- -
------ - - --
-
--
------ -----------
---
-- -----------
------------------ --------------------------- -------- ------------ -
----------------------------- ----
---总结
broccoli-es6-module-transpiler 是一个非常方便的工具，可以让你不用手动地将 ES6 模块转换为 AMD 模块。在构建过程中使用它，可以自动将你的模块从 ES6 转换到 AMD 格式，为你的项目打下良好的基础。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8bccdc64669dde5341