[TypeScript] 創建與使用AMD Library

時間 2019-12-05

標籤 typescript 創建使用 amd library 简体版

原文原文鏈接

[TypeScript] 創建與使用AMD Library

前言

使用Visual Studio開發TypeScript項目時，開發人員能夠將可重用的程序代碼，封裝爲AMD Library來提供其餘開發人員使用。本篇文章介紹如何將可重用的程序代碼封裝爲AMD Library，主要爲本身留個紀錄，也但願能幫助到有須要的開發人員。(本篇文章使用TypeScript 1.8開始提供的功能，請先升級再進行後續開發步驟。)css

創建

首先開啓Visual Studio來創建一個新項目：「myLibrary」，專案類型選擇爲：具備TypeScript的HTML應用程序，而且清除項目預先創建的內容檔案。這個項目用來封裝可重用的程序代碼，提供其餘開發人員使用。html

創建項目git
項目結構github

接着在項目裏，加入一個與項目同名的文件夾：「myLibrary」。而且在該文件夾內，加入提供其餘開發人員使用的程序代碼類別：「MyClass」。 (若是有更多共享類別，也是建置在myLibrary文件夾內。)ajax

myLibrary\MyClass.tsapp

export class MyClass {

    // methods
    public getMessage(): string {

        return "Clark";
    }
}

項目結構post

再來還須要在項目根目錄下，創建一個與項目同名的ts檔：「myLibrary.ts」，用來匯出項目裏的類別。(若是有更多共享類別，也是加入到myLibrary.ts裏匯出。)ui

myLibrary.ts3d

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

項目結構code

完成類別創建以後，接着調整項目的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" />

// import
import * as myLibrary from "myLibrary";

使用AMD Library中的程序代碼

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

// alert
alert(message);

完整的app.ts

// reference
/// <reference path="./lib/myLibrary.d.ts" />

// import
import * as myLibrary from "myLibrary";


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

// alert
alert(message);