[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);

IntelliSense提示

最后，执行myApp。能够在执行画面上，看到一个Alert窗口显示从Library取得的讯息内容，这也就完成了使用Library的相关开发步骤。

显示回传讯息

范例下载

范例程序代码：下载地址