在瀏覽器中使用的轉發打字稿

我想在打字稿中編寫我的前端代碼並希望導出代碼，即我的瀏覽器可以在 <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

來源

2016-04-21 Eldamir

要清楚，你有多個打字稿文件，並且你正在使用browserfy來編譯它們。然後，你希望這些功能在全球範圍內可用？ – vintem

直到模塊加載土地本地JavaScript功能，您可以使用諸如RequireJS或SystemJS之類的庫來加載模塊。

使用RequireJS，你只需通過編譯器選項：

-module UMD

然後在你的主文件指向RequireJS：

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

模塊，然後異步加載需求和生活是美好的。

來源

2016-04-21 12:14:02 Fenton

模塊加載甚至是需要的嗎？如果我的主文件導入/需要某些文件，而不是將「require」語句留在傳輸代碼中，則不能將所需文件連接在一起 – Eldamir

是 - 模塊加載是如此可派生的，它正在成爲一種本地ECMAScript功能。文件mergining只會讓你到目前爲止...... https://www.stevefenton.co.uk/2016/02/bundling-is-the-new-parrot-word/ *「捆綁和模塊加載之間的區別是不太明顯在量表的最左邊（即少量的代碼），並且大量地結束，以偏向量表最右側的模塊。「* – Fenton

好讀。所以現在我的靜態文件夾中有.ts源文件和require.js。我用'-module UMD'編譯了.ts文件。現在我用require.js加載已編譯的.js文件，正如你向我展示的那樣。但是，我仍然無法訪問這些功能。他們似乎在隱藏的範圍內 – Eldamir

在瀏覽器中使用的轉發打字稿

回答

相關問題