转译打字稿以在浏览器中使用

Transpile typescript for use in browser

本文关键字：浏览器      更新时间：2023-09-26

我正在尝试用 Typescript 编写我的前端代码，并希望导出我的浏览器可以加载的代码 <script src="..."></script> .

我是通过浏览器化和 tsify 的方式这样做的。我的麻烦是在我的代码上无法访问全局命名空间。当然，在 <script> 标签中加载脚本将执行它，但是如果我打算像可以在内联 <script> s 或类似函数库一样加载它怎么办？

更新

一个例子是

索引.ts 

function foo(): void {
    console.log("bar");
}

使用以下 conf 进行编译会生成以下 JavaScript

tsconfig.json

{
    "compilerOptions": {
        "module": "UMD",
        "target": "es5",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    }
}

索引.js

function foo() {
    console.log("bar");
}

这很好。但是，如果 index.js 导入一些东西，例如我的 notification 函数，那么我得到这个

(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", "./notifications"], factory);
    }
})(function (require, exports) {
    "use strict";
    var notifications_1 = require("./notifications");
    notifications_1.notification("blerp");
    function foo() {
        console.log("bar");
    }
});

现在foo被包装在某个范围内，当我在我的网站上加载它时不可用：<script src="require.js" data-main="index"></script> 

foo is undefined

在模块加载作为原生 JavaScript 功能登陆浏览器之前，您可以使用 RequireJS 或 SystemJS 等库来加载模块。

使用 RequireJS 时，只需传递编译器选项：

-module UMD

然后将 RequireJS 指向您的主文件：

<script src="require.js" data-main="app"></script>

然后按需异步加载模块，寿命很好。

相关文章：