我可以使用 requirejs 在 TypeScript 代碼中加載模塊嗎？

我正在使用 TypeScript 和 RequireJS。我想將我的函式庫代碼作為模組導入，以避免將所有內容變成全域變數。我的問題是，TypeScript 文件中任何對 import 或 export 的使用都會將整個文件變為模組。對於我的應用程式代碼來說，這意味著它不能被直接調用。

這是一個範例應用程式。

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My Test App</title>
        <script src="require.js"></script>
        <script src="app1.js"></script>
        <script src="app2.js"></script>
    </head>
</html>

tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false
    }
}

greeter.ts

export function greet(name: string) {
    alert(`Hello ${name}`);
}

app1.ts

import { greet } from './greeter';
greet('alice');

app2.ts

import { greet } from './greeter';
greet('bob');

tsc 執行沒有問題，但這是我作為輸出得到的其中一個檔案。

tsc 輸出：app1.js

define(["require", "exports", './greeter'], function (require, exports, greeter_1) {
    "use strict";
    greeter_1.greet('alice');
});

那行不通。來自 require.js

請務必通過 RequireJS API 加載所有調用 define() 的腳本。不要在 HTML 中手動編寫 script 標籤來加載包含 define() 調用的腳本。

那麼我該如何說服 TypeScript 編譯器生成沒有 define() 調用的輸出呢。在 app1.ts 中，我並不打算定義一個模組，只是使用其他模組。對此來說，require() 似乎更合適。是否有方法讓 import 編譯成 require()？

答案＃1

如果你有單一模組要啟動你頁面上需要載入的所有內容，你可以使用 data-main。如果你需要用多個模組來啟動載入，則使用 require 來載入模組：

<script src="require.js"></script>
<script>
  require(["app1", "app2"]);
</script>

你可能習慣總是傳遞單一字串參數給 require，但這是 AMD。原生的 AMD require 將依賴陣列作為第一個參數，並且可選的回呼函式作為第二個參數。

如果你正在使用 require.config，你可以使用 deps 選項達到相同的目的：

<script src="require.js"></script>
<script>
  require.config({
    // You could have more config here... in addition to:
    deps: ["app1", "app2"]
  });
</script>

目前沒有辦法讓 tsc 輸出 require 而不是 define。我不會抱著希望等待這樣的功能被加入，因為已經有現成的方法可以達到這個功能所能帶來的相同結果。

答案＃2

修理

從你已經找到的文件中：

請確保透過 RequireJS API 載入所有呼叫 define() 的腳本。

也來自文件的 start 頁面： http://requirejs.org/docs/start.html

並且只需像這樣使用 requirejs 調用來引用 require.js，以加載你的腳本：

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

^這是應該載入你的應用程式入口點的 script 標籤。

那我該如何說服 TypeScript 編譯器產生不含 define() 調用的輸出呢。

是的。但是如果你想要使用 requirejs，那麼這就是錯誤的問題。修復方法如我所說，即使用 正確的 script 標籤。