TypeScript UMD 'module' 和 'define' 都未定义

Question

我使用“-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
});

它不起作用，因为 'module' 和 'define' 都未定义。因此我的代码没有执行，甚至没有任何异常。

怎么了？我怎样才能让它发挥作用？

Answer 1

今天 none 的浏览器原生理解 AMD 模块。（事实上 none 的模块格式，除了一些真正新版本的 MS Edge 中的标准 ES6。

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

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

编辑

今天（2016 年 9 月）rollup-plugin-typescript 插件非常棒！当然这是现在推荐的方式。

TypeScript UMD 'module' 和 'define' 都未定义

TypeScript UMD both 'module' and 'define' are undefined

javascript

typescript

typescript1.5

es6-module-loader

umd