網站搜尋

javascript - 如何從多個編譯為 AMD 模組的 TypeScript 類創建單一 AMD 模組?


我正在嘗試創建一個單一的 AMD 庫(模塊)文件,它是由許多小文件(TypeScript 文件編譯成 JavaScript-AMD 模塊)構建而成的。

問題是:

  1. 我在類別之間有循環依賴。(父類需要知道子類,子類也需要知道父類)
  2. 我想要移除所有的 define() 和 require() 調用,除了針對 "myLibrary" 的主要 define。

建立單一檔案的主要原因:

  1. 加載時間(不應使用 requirejs 來引用所有小文件)
  2. 無法透過 AMD 模組解決的循環依賴

我主要的問題是:

  • 有工具可以做到這個嗎? r.js(grunt-contrib-requirejs)讓我失望,它把所有內部對 define() 的調用都保留了下來。

我目前的專案布局類似於以下範例:

root
|-- myLibrary
|   |-- packageA
|   |   |-- ClassA1.ts
|   |   +-- ClassA2.ts
|   |-- packageB
|   |   |-- ClassB1.ts
|   |   +-- ClassB2.ts
|   |-- packageA.ts
|   +-- packageB.ts
+-- myLibrary.ts

myLibrary.ts 的程式碼非常簡單如下:

export import packageA = require("./packageA");
export import packageB = require("./packageB");

它僅僅編譯成像這樣的 AMD 模組:

define(["require", "exports", "./myLibrary/packageA", "./myLibrary/packageB"], function (require, exports, packageA, packageB) {
    exports.packageA = packageA;
    exports.packageB = packageB;
});

這些套件檔案的結構都是相同的。例如 packageA.ts 看起來是這樣的:

// Typescript source:
export * from "./packageA/ClassA1";
export * from "./packageA/ClassA2";

// Compiled as Javascript:
define(["require", "exports", "./packageA/ClassA1", "./packageA/ClassA2"], function (require, exports, ClassA1_1, ClassA2_1) {
    function __export(m) {
        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
    }
    __export(ClassA1_1);
    __export(ClassA1_2);
});

目前得到的是:

define("myLibrary/packageA/ClassA1",["require", "exports"], function(require, exports) {
    var MyClassA1 = (function() {
        // The content of the class ...
    })();
    exports.MyClassA1 = MyClassA1;
});
define("myLibrary/packageA/ClassA2", ...

// The other stuff ...    

define(["require", "exports", "./myLibrary/packageA", "./myLibrary/packageB"], function (require, exports, packageA, packageB) {
    exports.packageA = packageA;
    exports.packageB = packageB;
});

我渴望的是:

define(["require", "exports"], function(require, exports) {
    //... The entire code of packageA without define or require.
    var packageA = ...;
    //...
    export.packageA = packageA;
    export.packageB = packageB;
});

答案#1

他們的產品路線圖中已經有模組打包的計畫。

由於在撰寫本文時我們使用的是 TypeScript 1.6,而他們說這將會在 1.7 中實現,你將需要等待下一個版本,應該很快就會發布。

答案#2

在使用 --module amd 或 --module system 的同時指定 --outFile,將會把編譯中的所有模組連接成一個包含多個模組閉包的單一輸出檔案。

請查看輸出文件 + amd。