6-to-library 中文文档教程

Question

6-to-library

此库已弃用。事实证明，核心 6to5 团队正在并行处理相同的功能. 从2.7.0版本开始，6to5在只导出default时直接导出一个模块。

---

库作者的 6to5 格式化程序。

Installation

> npm install 6-to-library

Usage

1. Write your library

假设您的库应该将字符串的第一个字母大写。 您在文件 es6/up-first-letter.js 中用 ES6 编写：

export default function (string) {
  return string.charAt(0).toLocaleUpperCase() + string.substr(1);
  }

2. Transpile through 6to5's CLI

$ 6to5  --modules 6-to-library  --out-file index.js  es6/up-first-letter.js

确保全局安装了 6to5，或者运行本地 node_modules/6to5/bin /6to5/index.js 代替。

 …or programatically:

将选项 modules: "6-to-library" 添加到您的 require("6to5").transform 调用中。 您也可以将此选项直接传递给 gulp-6to5 或 grunt-6to5。

3. Publish your library

npm publish、git push 或您通常执行的任何操作。

4. Profit!

在您的用户安装您的库后，他们可以做任何他们习惯的事情。 无需任何变压器。

在节点中使用 CommonJS：

var upFirstLetter = require("up-first-letter");
upFirstLetter("ęéë");  // » "Ęéë"

在浏览器中使用全局变量：

<script src="bower_components/up-first-letter/index.js"></script>
<script>
  upFirstLetter("ęéë");  // » "Ęéë"
</script>

将 AMD 与 RequireJS 结合使用：

require(["up-first-letter/index"], function (upFirstLetter) {
  upFirstLetter.default("ęéë");  // » "Ęéë"
  });

并使用闪亮的新 ES6 模块：

import upFirstLetter from "./up-first-letter/es6/up-first-letter";
upFirstLetter("ęéë");  // » "Ęéë"

Example

您可以查看 npm 模块 as，使用 6-to-library 格式化程序构建。

How does it work

Export/import names

“ECMAScript 6 支持单一/默认导出样式，并为导入默认样式提供最甜美的语法。” 我们这样做相同。 如果您只导出默认值，您的库将像上面的示例一样无缝运行。

否则，您必须通过说明符引用每个导出：

// original.js
export default 1;
export const two = 2;

// CommonJS
var one = require('original').default;
var two = require('original').two;

// Globals
var one = original.default;
var two = original.two;

Global names

当既不支持 AMD 也不支持 CommonJS 时，全局对象的属性将用作每个单独文件的命名空间（通常是 window 或 global ）。

对象的名称​​导出到 全局范围是模块文件的基本名称，驼峰式。

从全局范围导入 的对象的名称是默认导入的说明符（仅当您使用语法 import foo from "bar" 时），或者引用文件的驼峰命名。

// my-module.js
import $ from "jquery";  // Maps to window.$
import {default as module} from "other-module";  // Maps to window.otherModule
export default "exported value";  // Maps to window.myModule

The inner workings

在您的转译文件中，您会得到 UMD 模块定义的变体，量身定制以无缝支持所有端点。

对于输入文件 my-module.js：

import {foo as bar} from "./foo-bar";
import baz from "bar";

export default baz[bar];

您会得到以下输出：

(function (global, factory) {
  var root, exportsName, factoryArguments;

  // AMD
  if (typeof define === "function" && define.amd) {
    define(["exports", "./foo-bar", "bar"], factory);

  } else {

    // CommonJS
    if (module && typeof module.exports !== "undefined") {
      factoryArguments = [module.exports, require("./foo-bar"), require("bar")];
      root = module;
      exportsName = "exports";

    // Globals
    } else {
      factoryArguments = [global.myModule = {}, global.fooBar, global.baz];
      root = global;
      exportsName = "myModule";
    }

    factory.apply(null, factoryArguments);

    // If only the default value is exported, may the good be done.
    if (Object.keys(root[exportsName]).length == 1 && root[exportsName].propertyIsEnumerable("default")) {
      root[exportsName] = root[exportsName]["default"];
    }
  }
})(this, function (exports, _fooBar, _baz) {
  "use strict";

  var _interopRequire = function (obj) {
    return obj && (obj["default"] || obj);
  };

  // Here comes your code. Not much of it in this example.
  var bar = _fooBar.foo;
  var baz = _interopRequire(_baz);

  exports["default"] = baz[bar];
});

（为清楚起见添加了注释和空格。）

License

麻省理工学院 © Tomek Wiszniewski。