如何與一個普通的HTML網站共享一個反應項目的打字稿功能？

Question

我想將一個復雜的打字稿導出函數分享到一個簡單的HTML-javascript網站

我嘗試使用npm tsc將文件轉換為javascript，但生成的文件具有“導出”功能，可在瀏覽器控制台中創建錯誤。

myFunction.ts

export const getTest = (test: any) => {
    // Change test object
    return test;
};

生成了myFunction.js

Object.defineProperty(exports, "__esModule", { value: true });
exports.getTest = function (test) {
    // Change test object
    return test;
};

當我嘗試在HTML文件中包含帶有腳本標記的文件時，瀏覽器控制台實際上警告我“未捕獲的ReferenceError：導出未定義”。

我究竟做錯了什么？

Answer 1

為了使用原始的myFunction.ts文件，您需要做的就是：

刪除鍵入並將擴展名更改為.js ：

export const getTest = (test) => {
    // Change test object
    return test;
};

然后，在該文件的HTML文件的<script>標記中，確保將type屬性設置為module如下所示：

<script type="module" src="myFunction.js"></script>

最后，您需要在要使用它的位置import該功能。

只要您考慮瀏覽器兼容性，就應該這樣做：

ES6模塊

為了最終明確這一點，這里有一個Plunkr來展示我的意思。

Answer 2

export關鍵字創建一個模塊，該模塊只能與模塊系統（如webpack）一起使用。

要么使用一個模塊系統或丟棄export創建一個用於創建全局名稱一個正常的文件。