Question

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

我是通过browserify和tsify的方式做到的。我的麻烦是我的代码不能在全局命名空间中访问。将脚本加载到<script>标记中肯定会执行它，但如果我打算将其加载为可以在内联<script>或类似内容中使用的函数库，该怎么办？

更新

一个例子是

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>

然后按需异步加载模块，生活也很好。

用于浏览器

1 个答案: