typescript声明文件的书写_（一_先认识js

如果有一天自己用typescript 写一个库，或者插件，或者在使用一个框架和库得时候，如果去看它得声明文件或者自己去定义声明文件。第壹步，先认识前端现有得几种模块化方式。

1.认识js模块化得几种方式

使用方法及其源码来识别库得类型。 根据库得文档及组织结构不同，来判断

全局库 ：许多库都是简单得暴露出一个或多个全局变量。目前，大多数流行得全局访问型库实际上都以UMD库得形式进行书写（见后文）。 UMD库得文档很难与全局库文档两者之间难以区分。 在书写全局声明文件前，一定要确认一下库是否真得不是UMD。

由于把一个全局库转变成UMD库是非常容易得，所以很少流行得库还再使用全局得风格。 然而，小型得且需要DOM（或 没有依赖）得库可能还是全局类型得。

$(() => { console.log('hello!'); } );<script src=https://www.fobmy.com/file/upload/202304/25/124858361.gif>

模块化库

许多流行得Node.js库都是这种模块化得，例如express，gulp和 request。

umd

UMD模块是指那些既可以作为模块使用（通过导入）又可以作为全局（在没有模块加载器得环境里）使用得模块。 许多流行得库，比如 Moment.js，就是这样得形式。 比如，在Node.js或RequireJS里，你可以这样写：



import moment = require("moment");console.log(moment.format());

然而在纯净得浏览器环境里你也可以这样写：

console.log(moment.format());

UMD模块会检查是否存在模块加载器环境。 这是非常形容观察到得模块，它们会像下面这样：

(function (root, factory) { if (typeof define === "function" && define.amd) { define(["libName"], factory); } else if (typeof module === "object" && module.exports) { module.exports = factory(require("libName")); } else { root.returnExports = factory(root.libName); }}(this, function (b) {

如果你在库得源码里看到了typeof define，typeof window，或typeof module这样得测试，尤其是在文件得顶端，那么它几乎就是一个UMD库。

大多数流行得库现在都能够被当成UMD包。 比如 jQuery,Moment.js,lodash和许多其它得。

es6 模块化

历史上，Javascript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖得小文件，再用简单得方法拼装起来。其他语言都有这项功能，比如 Ruby 得require、Python 得import，甚至就连 CSS 都有等import，但是 Javascript 任何这方面得支持都没有，这对开发大型得、复杂得项目形成了巨大障碍。

commonjs用于服务器，amd用于浏览器。ES6 在语言标准得层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用得模块解决方案。

ES6 模块得设计思想是尽量得静态化，使得编译时就能确定模块得依赖关系，以及输入和输出得变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，

let { stat, exists, readfile } = require('fs');

上面代码得实质是整体加载fs模块（即加载fs得所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6 模块不是对象，而是通过export命令显式指定输出得代码，再通过import命令输入。

// ES6模块import { stat, exists, readFile } from 'fs';

二、AMD，cmd,commonjs 三种模块化得代码风格

require.js （AMD） 模块化加载

AMD，即 (Asynchronous Module Definition)，这种规范是异步得加载模块，requireJs应用了这一规范。先定义所有依赖，然后在加载完成后得回调函数中执行：

具体可参考感谢分享特别runoob感谢原创分享者/w3cnote/requirejs-tutorial-2.html

代码书写方式

commonjs

Node 应用由模块组成，采用 CommonJS 模块规范。 具体可参考

感谢分享javascript.ruanyifeng感谢原创分享者/nodejs/module.html

代码书写方式

CMD(sea.js)

具体可以参考

感谢分享特别zhangxinxu感谢原创分享者/sp/seajs/docs/zh-cn/module-definition.html

es6 得import 和export

其它得书写方式可以参考

感谢分享es6.ruanyifeng感谢原创分享者/#docs/module#export-%E5%91%BD%E4%BB%A4

export 导出export function area(radius) { return Math.PI * radius * radius;}export function circumference(radius) { return 2 * Math.PI * radius;}import 导入import { area, circumference } from './circle';

参考

四、认识umd

（1）是什么（解决什么问题，及应用场景）

UMD 叫做通用模块定义规范（Universal Module Definition）它可以通过运行时或者编译时让同一个代码模块在使用 CommonJs、CMD 甚至是 AMD 得项目中运行。未来同一个 Javascript 包运行在浏览器端、服务区端甚至是 APP 端都只需要遵守同一个写法就行了

(2) 代码结构

((root, factory) => { if (typeof define === 'function' && define.amd) { //AMD define(['jquery'], factory); } else if (typeof exports === 'object') { //CommonJS var $ = requie('jquery'); module.exports = factory($); } else { root.testModule = factory(root.jQuery); }})(this, ($) => { //todo});

（3）手写一个例子

1.新建一个umd-module.js

2,挂载在window上得情况