我必须为我正在处理的一个小项目编写一个Javascript SDK。为此,我曾想过创建一个TypeScript项目并将其编译为单个Javascript文件,因此我的SDK用户可以将该文件注入其网页。
但是,我刚才知道如果我使用import
并尝试编译为单个文件,那么它只支持SystemJS。
那么,如何将TypeScript项目编译为单个JS文件,以便在浏览器中使用?
在浏览器中使用,我的意思是如果我在TypeScript中创建一个类App
,那么我可以在开发控制台中执行此操作:
var x = new App();
我现在已经待了一个多小时了,我发现的一切似乎都表明这是不可能的。
修改: This 并非真正回答我的问题。就像我在示例中所说的那样,我需要的功能是,如果在我的TypeScript项目中有一个名为App
的类,它应该对浏览器可见,并且具有相同的名称,所以我可以在var x = new App()
中执行我的开发控制台。 (或者用户可以在注入我的SDK文件后注入的JS文件中执行此操作)。答案就是告诉你如何在SystemJS中创建一个outfile。
答案 0 :(得分:0)
为此你可以使用webpack,它是一个Node.JS实用程序,它试图捆绑类似Node.JS的模块。 Webpack不会自动将模块导出到全局对象,而是生成(或尝试生成)替换Node.JS的默认require
的函数,该函数用于执行入口模块和其他模块,因此您可以修改此函数用于导出全局对象中的每个模块(或每个模块的属性)。
(在TypeScript中,使用CommonJS模块。其次,在webpack中安装和使用ts-loader插件,这样你就可以直接从webpack编译TypeScript。)
也许这适用于Webpack 2.例如,您修改了__webpack_require__
函数。它不在全局对象中,因此您必须在function __webpack_require__
处干扰webpack生成的源代码:
function __webpack_require__(moduleId) {
// [...] (After the `if (installedModules...) ...`)
/*
* You don't have access to the module name, so export each
* property to the browser's global object.
*/
var exports = module.exports;
for (var key in exports)
window[key] = exports[key];
}