Question

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

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

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

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

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

有关此切换的一些文档here

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

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

希望您能找到这个有用的

Typescript编译器 - 捆绑外部库

1 个答案: