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）中找到的大多數聲明，並允許該捆綁包有效地從環境中提取模塊（全局變量名稱）。

希望你覺得這很有幫助