javascript - Transpile typescript 在浏览器中使用

Question

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

我通过 browserify 和 tsify 做到了这一点。我的麻烦是我的代码在全局命名空间中不可访问。在 <script> 中加载脚本标签会执行它，当然，但是如果我打算将它像函数库一样加载，可以在内联 <script> 中使用怎么办？ s 或类似的？

更新

一个例子是

index.ts

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

使用以下 conf 编译生成以下 javascript

tsconfig.json

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

index.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

Answer 1

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

当使用 RequireJS 时，您只需传递编译器选项:

-module UMD

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

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

然后按需异步加载模块，一切顺利。