Typescript Compiler - 捆绑外部库

Question

我一直在尝试将我的 TypeScript“应用程序”捆绑到一个 javascript 文件中。

我没有使用任何捆绑器，而是 TSC（使用 TypeScript 2.2）。除了我自己的 ts 文件之外，我的应用程序还使用了 immutablejs 等外部模块。

我阅读了所有可能的线程、文档，但找不到仅使用 TSC 将外部模块（来自 node_modules ）捆绑到我编译/转译的 javascript 文件的方法。

在下面，您可以找到我的最新代码/配置示例以及我的尝试结果。

配置文件

{
    "compilerOptions": {
        "target":           "es5",
        "module":           "system",
        "removeComments":   true,
        "sourceMap":        true,
        "allowJs":          true
    }
}

app.ts - 注意：./something.ts 已成功绑定。

/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />

import * as something from "./something";
import * as Immutable  from "immutable";

console.log( something.test );

const map1 = Immutable.Map( { a: 1, b: '2', c: 'cu' });
console.log( map1.get( 'a') )

1#：使用 tsc-bundle ( https://www.npmjs.com/package/typescript-bundle )

这种方法不仅没有捆绑 immutableJs 还抛出了错误：require is not defined。

var dragonfly = (function () {
  var main = null;
  var modules = {
      "require": {
          factory: undefined,
          dependencies: [],
          exports: function (args, callback) { return require(args, callback); },
          resolved: true
      }
  };
  function define(id, dependencies, factory) {
      return main = modules[id] = {
          dependencies: dependencies,
          factory: factory,
          exports: {},
          resolved: false
      };
  }
  function resolve(definition) {
      if (definition.resolved === true)
          return;
      definition.resolved = true;
      var dependencies = definition.dependencies.map(function (id) {
          return (id === "exports")
              ? definition.exports
              : (function () {
                  if(modules[id] !== undefined) {
                    resolve(modules[id]);
                    return modules[id].exports;
                  } else return require(id)
              })();
      });
      definition.factory.apply(null, dependencies);
  }
  function collect() {
      Object.keys(modules).map(function (key) { return modules[key]; }).forEach(resolve);
      return (main !== null) 
        ? main.exports
        : undefined
  }

  define("something", ["require", "exports"], function (require, exports) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      exports.test = "oie";
  });
  define("app", ["require", "exports", "something", "immutable"], function (require, exports, something, Immutable) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      console.log(something.test);
      var map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' });
      console.log(map1.get('a'));
  });
  //# sourceMappingURL=app.js.map
  return collect(); 
})();

#2 - 使用 TSC with module = system ( tsc src/app.ts -m system --outfile build/app.js )

这个方法也没有捆绑 immutableJs ，但也抛出了错误：系统未定义

System.register("something", [], function (exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var test;
    return {
        setters: [],
        execute: function () {
            exports_1("test", test = "oie");
        }
    };
});
/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
System.register("app", ["something", "immutable"], function (exports_2, context_2) {
    "use strict";
    var __moduleName = context_2 && context_2.id;
    var something, Immutable, map1;
    return {
        setters: [
            function (something_1) {
                something = something_1;
            },
            function (Immutable_1) {
                Immutable = Immutable_1;
            }
        ],
        execute: function () {/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
            console.log(something.test);
            map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' });
            console.log(map1.get('a'));
        }
    };
});

#3 - 使用 tsc 和 module = amd ( tsc src/app.ts -m amd --outfile build/app.js )

这种方法不仅没有捆绑 immutableJs 还抛出错误：define is not defined。

define("something", ["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports.test = "oie";
});
/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
define("app", ["require", "exports", "something", "immutable"], function (require, exports, something, Immutable) {
    "use strict";
    exports.__esModule = true;
    console.log(something.test);
    var map1 = Immutable.Map({ a: 1, b: '2', c: 'cu' });
    console.log(map1.get('a'));
});

结论：对于我的项目的未来来说，能够在不需要这些流行的捆绑器（如 webpack、browserify、gulp 等）的情况下捆绑外部库非常重要......

有没有人可以帮助我？

提前致谢，

特！

Answer 1

刚刚注意到你的帖子和免责声明，我是 typescript-bundle 的作者。您可以将 ImmutableJS 与以下内容捆绑在一起。

tsc-bundle --project ./tsconfig.json --importAs immutable=Immutable

关于此开关的一些文档在这里

这将创建一个额外的解析器，尝试解析窗口对象的不可变性。如果您在页面中包含依赖脚本（通过标签<script>）并且需要在捆绑包中引用全局名称（在本例中为不可变）（并且您需要使用从 @ 中提取的 .d.ts 文件），则通常会出现这种情况types/* 环境模块名为“immutable”）

上面的行产生以下resolve()函数。

  function resolve(definition) {
      if (definition.resolved === true)
          return;
      definition.resolved = true;
      var dependencies = definition.dependencies.map(function (id) {
          return (id === "exports")
              ? definition.exports
              : (function () {
                  if(modules[id] !== undefined) {
                    resolve(modules[id]);
                    return modules[id].exports;
                  } else if(id === "immutable") {
                    return window["Immutable"];
                  } else {
                    try {
                      return require(id);
                    } catch(e) {
                      throw Error("module '" + id + "' not found.");
                    }
                  }
              })();
      });
      definition.factory.apply(null, dependencies);
  }

这适用于您在 npm @types/* 存储库（假设为 UMD）中找到的大多数声明，并允许捆绑包有效地从环境（全局变量名称）中提取模块。

希望您觉得这有帮助