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

Question

我必须为我正在开发的一个小项目编写一个 Javascript SDK。为此，我曾考虑创建一个 TypeScript 项目并将其编译为单个 Javascript 文件，这样我的 SDK 的用户就可以将该文件注入(inject)到他们的网页中。

但是，我刚刚知道，如果我使用import，并尝试编译为单个文件，那么它只支持SystemJS。

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

通过在浏览器中使用，我的意思是，如果我在 TypeScript 中创建一个类 App，那么我可以在开发控制台中执行此操作:

var x = new App();

我已经研究了一个多小时了，我发现的一切似乎都表明这是不可能的。

<小时/>

编辑: This 没有真正回答我的问题。就像我在示例中所说的那样，我需要这样的功能:如果我的 TypeScript 项目中有一个名为 App 的类，那么它应该对具有相同名称的浏览器可见，因此我可以执行 我的开发控制台中的 var x = new App() 。 (或者用户可以在注入(inject)我的 SDK 文件后注入(inject)的 JS 文件中执行此操作)。这个答案只是告诉我们如何在 SystemJS 中创建一个输出文件。

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