TypeScript UMD 的“模块”和“定义”均未定义答案

【问题标题】：TypeScript UMD both 'module' and 'define' are undefinedTypeScript UMD 的“模块”和“定义”均未定义
【发布时间】：2016-07-18 11:30:46
【问题描述】：

我使用“-m umd”转译我的 TypeScript，因为我的项目包括服务器、客户端和共享代码。但是，客户端代码在浏览器中不起作用。浏览器甚至没有显示任何错误，我找到的断点也没有命中，所以我不得不删除 js-ts 映射。然后，我能够调试它，我发现了问题。

以下是UMD生成的代码：

(function (factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    }
    else if (typeof define === 'function' && define.amd) {
        define(["require", "exports", "./model"], factory);
    }
})(function (require, exports) {
    //my code
});

它不起作用，因为“模块”和“定义”都未定义。因此我的代码没有被执行，甚至没有任何异常。

怎么了？我怎样才能让它工作？

【问题讨论】：

你必须使用模块加载器。
@Tamas Hegedus 喜欢 SystemJS？所以在这种情况下我不需要使用 UMD。我认为 UMD 应该可以解决我这个问题。
UMD 统一了 AMD 和 CommonJS 模块，因此您可以将这些模块与其中任何一个一起使用。 SystemJS 也统一了 AMD 和 CommonJS，所以它可以加载任何一个。解决问题的唯一明确方法是使用纯 es6 模块并与 rollupjs 捆绑。我不知道 typescript 是否内置了类似 bundler 的汇总
浏览器根本不熟悉任何模块加载器。有一个系统模块加载器规范，但是因为它只是引入了一种模块格式而被放弃了。目前 MS Edge 是唯一能理解模块的浏览器，它使用标准的 es6 模块格式。对于其他所有浏览器，您必须要么使用加载器（比如带有 webpack、requirejs 或任何 AMD、systemjs 的加载器），要么与不依赖模块加载器的 rollupjs 捆绑。当然 AMD 适合更好的浏览器，因为它是异步的，但本身不支持。
本题相关：stackoverflow.com/questions/31593694/…

标签： javascript typescript typescript1.5 es6-module-loader umd

【解决方案1】：

今天没有一个浏览器原生地理解 AMD 模块。（事实上，在一些真正新的 MS Edge 版本中，除了标准 ES6 之外，没有任何模块格式。

因此，您必须将模块加载器与您的代码捆绑在一起。我建议你要么只使用 AMD 模块和轻量级 AMD 加载器，将你的模块和模块加载器连接在一个文件中，要么使用 RollupJS，它从标准 ES6 模块生成一个无加载器包。如果我没记错的话，rollup-plugin-typescript 插件不能很好地处理多个文件，所以我建议将带有 tsc 的 typescript 编译到 es6 模块中，然后在第二步中将其与 rollupjs 捆绑在一起。

您可以在此 StackOverflow 线程中阅读有关模块捆绑器的更多信息：Do I need require js when I use babel?

编辑

今天（2016 年 9 月）rollup-plugin-typescript 插件就像一个魅力！绝对是现在推荐的方式。

【讨论】：