如何将TypeScript项目编译为单个JS文件,以便在浏览器中使用

时间:2017-06-07 17:35:19

标签: javascript typescript systemjs

我必须为我正在处理的一个小项目编写一个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。

1 个答案:

答案 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];
}