Typescript编译器 - 捆绑外部库

Question

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

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

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

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

tsconfig.json

{
    "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未定义 。

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 with module = amd （tsc src / app.ts -m amd --outfile build / app.js）

此方法不仅不捆绑immutableJs而且抛出错误：未定义define。

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等，这一点非常重要。

有人能帮帮我吗？

提前致谢，

TF！

Answer 1

刚注意到你的帖子，免责声明，我是打字稿捆绑的作者。 您可以使用以下内容捆绑ImmutableJS。

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

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

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

上面的行导致以下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）中找到的大多数声明，并允许该捆绑包有效地从环境中提取模块（全局变量名称）。

希望你觉得这很有帮助