TypeScript UMD “module”和“define”都是未定义的

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

本文关键字:未定义 UMD module TypeScript define      更新时间:2023-09-26

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

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

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

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

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

您可以在此 StackOverflow 线程中阅读有关模块捆绑器的更多信息:使用 babel 时需要 js 吗?

编辑

今天(2016 年 9 月)汇总插件打字稿插件就像一个魅力!这绝对是现在推荐的方式。