npm 包 broccoli-es6-module-transpiler 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

broccoli-es6-module-transpiler 是一个用于将 ES6 模块转换为 AMD 模块的工具。它可以在构建时将 ES6 模块转换为另一种通用的模块格式。

安装

首先，你需要安装 broccoli-es6-module-transpiler，可以使用 npm 包管理器进行安装。

npm install --save-dev broccoli-es6-module-transpiler

使用方法

可以将 broccoli-es6-module-transpiler 与 broccoli 或 ember-cli 一起使用。下面我们以 broccoli 为例，介绍如何使用该工具。

使用 `broccoli-cli` 命令行工具

在你的项目根目录下创建 Brocfile.js 或 Brocfile.js 文件。
在 Brocfile.js 文件中引入 broccoli-es6-module-transpiler。

const es6Transpiler = require('broccoli-es6-module-transpiler');

使用 esTranspiler 函数创建一个模块实例。

var inputTrees = ['app'];
var outputDir = 'public';
var appJs = es6Transpiler(inputTrees, {
  // options
});

返回模块实例。

module.exports = appJs;

在 `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）。

var appJs = es6Transpiler(input, {
  moduleName: 'my-new-name',
});

amdNameResolver

该选项设置了一个函数，用于映射模块的名称。不过，使用 moduleName 选项通常更为便利。

var appJs = es6Transpiler(input, {
  amdNameResolver: function(moduleName) {
    return 'myapp/' + module.replace(/^app\//, '');
  },
});

globals

该选项定义了 ES6 模块中任何全局变量的名称和对应的 AMD 模块名。

var appJs = es6Transpiler(input, {
  globals: {
    'jquery': 'jQuery'
  },
});

exports

该选项定义了 ES6 模块中的 export 导出项，把它们映射到指定的 AMD 模块。

-- -------------------- ---- -------
--- ----- - -------------------- -
  -------- -
    ------------ -
      ----------
      -------------
      -----------
    -
  -
---

formatter

该选项为 ES6 模块代码生成器指定了格式化程序。如果要添加自定义的格式化程序，请继承 AmdFormatter 类，并覆盖 AmdFormatter.prototype.header 和 AmdFormatter.prototype.footer 方法。

const es6Transpiler = require('broccoli-es6-module-transpiler');
const CustomFormatter = require('./my-custom-formatter');

var appJs = es6Transpiler(input, {
  formatter: new CustomFormatter()
});

示例代码

下面是一个简单的示例代码，实现了一个计算器，该计算器通过 ES6 模块的方式导出和使用。

-- -------------------- ---- -------
-- -------------------------
----- ---------- - -
  ------ -- -
    ------ - - --
  --

  ----------- -- -
    ------ - - --
  --

  ----------- -- -
    ------ - - --
  --

  --------- -- -
    ------ - - --
  --
--

------ ------- -----------

-- -----------
------ ---------- ---- -----------------------

----------------------------- ----

使用 broccoli-es6-module-transpiler 将上面的代码转换为 AMD 模块：

-- -------------------- ---- -------
-- -------------------------
-------------------------------- --- ---------- -
  --- ---------- - -
    ---- ----------- -- -
      ------ - - --
    --
    --------- -------- --- -- -
      ------ - - --
    --
    --------- -------- --- -- -
      ------ - - --
    --
    ------- ----------- -- -
      ------ - - --
    -
  --
  ------ -----------
---

-- -----------
------------------ --------------------------- -------- ------------ -
  ----------------------------- ----
---

总结

broccoli-es6-module-transpiler 是一个非常方便的工具，可以让你不用手动地将 ES6 模块转换为 AMD 模块。在构建过程中使用它，可以自动将你的模块从 ES6 转换到 AMD 格式，为你的项目打下良好的基础。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5341

npm 包 broccoli-es6-module-transpiler 使用教程

简介

安装