[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
// export
export * 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" /> // 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的相关开发步骤。
显示回传讯息
范例下载
范例程序代码:下载地址
最新文章
- Windows on Device 项目实践 1 - PWM调光灯制作
- vs2015 安装之后安装MSSM 2016 导致 vs启动报错 System.ArgumentException 已添加了具有相同键的项,ActivityLog.xml
- MWeb 1.3.7 发布!增加发布到 Wordpress 等支持 MetaWeblog API 的服务,如:Wordpress 博客、新浪博客、cnblogs、oschina。
- 样例20-汽车SHOW
- [WPF学习笔记]动态加载XAML
- DELPHI7如何调用带参数的JAVA WebService
- (七)Android中AIDL的应用与理解
- Hibernate 报错:this project is not a myeclipse hibernate project . assuming hibernate 3 cap
- Swing布局管理器
- activity-alias使用
- 一秒搞定mysql的远程登录
- Redis 配置内容总结
- C++ Primer 笔记——控制内存分配
- 使用html5 Canvas绘制线条(直线、折线等)
- JS判断是否有js、css文件的引入方法
- jenkins X实践系列(1) —— 背景知识
- Lua 变量名词
- mybatis-generator eclipse插件 使用方法
- 12th 对礼物挑选小工具的WBS功能分解
- Eclipe快捷键
热门文章
- Underscore.js使用
- 集群下session共享问题的解决方案.
- 2013 duilib入门简明教程 -- 完整的自绘标题栏(8)
- Linux核心源码阅读方法
- 深入理解滚动scroll
- alert()与console.log()的区别
- ASP.NET Core的配置(3): 将配置绑定为对象[下篇]
- Create Volume 操作(Part II) - 每天5分钟玩转 OpenStack(51)
- 解决Onedrive经常无法访问的问题
- php后管理分类导航菜单