Question

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

Answer 1

为此你可以使用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];
}

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

1 个答案: