Typescript Compiler - bundle 外部库

Question

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

我没有使用任何 bundler ，而是使用 TSC(使用 TypeScript 2.2)。除了我自己的 ts 文件，我的应用程序还使用外部模块，例如 immutablejs。

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

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

tsconfig.json

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

app.ts - 注意:./something.ts 已成功 bundle 。

/// <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 )

这个方法不仅没有绑定(bind)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 )

此方法也没有 bundle immutableJs，但也抛出错误:System is not defined

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 )

该方法不仅没有绑定(bind)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'));
});

结论:能够 bundle 外部库而不需要这些流行的 bundler (如 webpack、browserify、gulp 等)对我的项目的 future 非常重要......

有谁能帮帮我吗？

提前致谢

TF!

Answer 1

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

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

有关此开关的一些文档 here

这将创建一个额外的解析器，尝试从窗口对象解析不可变的。如果您在页面中包含依赖脚本(通过 <script> 标记)并且需要在您的包中引用该全局名称(在本例中为不可变)(并且您需要使用 .d.ts 文件)，这通常是这种情况使用名为“不可变”的环境模块从@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)中找到的大多数声明相悖，并允许 bundle 有效地从环境中提取模块(全局变量名称)。

希望对你有帮助