[TypeScript] 建立與使用AMD Library

標籤：

[TypeScript] 建立與使用AMD Library前言

使用Visual Studio開發TypeScript項目時，開發人員可以將可重用的程式碼，封裝為AMD Library來提供其他開發人員使用。本篇文章介紹如何將可重用的程式碼封裝為AMD Library，主要為自己留個紀錄，也希望能協助到有需要的開發人員。(本篇文章使用TypeScript 1.8開始提供的功能，請先升級再進行後續開發步驟。)

建立

首先開啟Visual Studio來建立一個新項目：「myLibrary」，專案類型選擇為：具有TypeScript的HTML應用程式，並且清除項目預先建立的內容檔案。這個項目用來封裝可重用的程式碼，提供其他開發人員使用。

• 建立項目

• 項目結構

接著在項目裡，加入一個與項目同名的檔案夾：「myLibrary」。並且在該檔案夾內，加入提供其他開發人員使用的程式碼類別：「MyClass」。 (如果有更多共用類別，也是建置在myLibrary檔案夾內。)

• myLibrary\MyClass.ts

  export class MyClass {    // methods    public getMessage(): string {        return "Clark";    }}

• 項目結構

再來還需要在項目根目錄下，建立一個與項目同名的ts檔：「myLibrary.ts」，用來匯出項目裡的類別。(如果有更多共用類別，也是加入到myLibrary.ts裡匯出。)

• myLibrary.ts

  // exportexport * from "./myLibrary/myClass";        

• 項目結構

完成類別建立之後，接著調整項目的TypeScript建置設定。將項目設定為，在建置時：編譯為AMD模組、輸出單一檔案、並且產生宣告檔案。

• TypeScript建置設定

完成設定步驟後，存檔並且編譯項目，就可以在項目的bin目錄下取得編譯完成的AMD Library內容檔：myLibrary.d.ts、myLibrary.js、myLibrary.js.map。

• 產出AMD Library

使用

接著開啟Visual Studio來建立一個新項目：「myApp」，這個項目用來說明，如何使用封裝為AMD Library的程式碼。

• 建立項目

• 項目結構

建立項目之後，接著調整項目的TypeScript建置設定。將項目設定為，在建置時：編譯為AMD模組。

• TypeScript建置設定

完成項目設定之後，加入一個「lib」檔案夾。並且把myLibrary項目所產出的AMD Library的三個檔案，加入到這個lib檔案夾中。

• 加入AMD Library

加入AMD Library之後，接著在項目預設的index.html裡面，加入下列程式碼，使用RequireJS掛載AMD Library，並且執行預設的app.ts內容。

• 掛載AMD Library

  <!-- require --><script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>    <script>    require.config({        paths: {            "myLibrary": "lib/myLibrary"        }    });</script>

• 執行app.ts

  <!-- start --><script>    require(["app"]);</script>

• 完整的index.html

  <!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8" />    <title>TypeScript HTML App</title>    <link rel="stylesheet" href="app.css" type="text/css" />    <!-- require -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>        <script>        require.config({            paths: {                "myLibrary": "lib/myLibrary"            }        });    </script>    <!-- start -->    <script>        require(["app"]);    </script></head><body>    <h1>TypeScript HTML App</h1>    <div id="content"></div></body></html>

接著在app.ts裡面，加入下列程式來使用Library裡面所封裝的程式碼。(編寫程式碼的時候，可以發現myLibrary支援IntelliSense提示。)

• 參考AMD Library

  // reference/// <reference path="./lib/myLibrary.d.ts" />// importimport * as myLibrary from "myLibrary";

• 使用AMD Library中的程式碼

  // testvar x = new myLibrary.MyClass();var message = x.getMessage();// alertalert(message);

• 完整的app.ts

  // reference/// <reference path="./lib/myLibrary.d.ts" />// importimport * as myLibrary from "myLibrary";// testvar x = new myLibrary.MyClass();var message = x.getMessage();// alertalert(message);

• IntelliSense提示

最後，執行myApp。可以在執行畫面上，看到一個Alert視窗顯示從Library取得的訊息內容，這也就完成了使用Library的相關開發步驟。

• 顯示回傳訊息

範例下載

範常式序代碼：

[TypeScript] 建立與使用AMD Library