javascript - Transpilera typescript för användning i webbläsare

Jag försöker skriva min frontend-kod i Typescript och vill exportera koden, så att min webbläsare kan ladda den i <script src="..."></script>.

Jag gjorde det genom browserify och tsify. Mitt problem är att ingen av min kod är tillgänglig i det globala namnområdet. Att ladda skriptet i en <script>-tagg kommer visserligen att köra det, men vad händer om jag avser att det ska laddas som ett bibliotek av funktioner som kan användas i inline <script>-taggar eller liknande?

Uppdatering

Ett exempel skulle vara

index.ts

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

Kompilering med följande konfiguration producerar följande JavaScript

tsconfig.json

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

index.js

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

Det här är okej. Men om index.js importerar något, t.ex. min notification-funktion, då får jag det här

(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");
    }
});

Nu är foo innesluten i ett visst omfång, och är inte tillgänglig när jag laddar det på min webbplats: <script src="require.js" data-main="index"></script>

foo is undefined

Svar #1

Tills moduluppladdning blir en inbyggd JavaScript-funktion i webbläsare kan du använda ett bibliotek som RequireJS eller SystemJS för att ladda moduler.

När du använder RequireJS, skickar du helt enkelt kompilatoralternativet:

-module UMD

Och sedan peka RequireJS på din huvudfil:

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

Moduler laddas sedan asynkront vid behov och livet är gott.

Relaterade artiklar