用 TypeScript 写一个轻量级的 UI 框架之二：项目结构、构建

刺骨的言语ヽ痛彻心扉 2023-01-07 04:56 160阅读 0赞

# 模块管理 #

一个框架或者库，自然有些纲领性的内容先要谈谈，这里就展开为大家介绍。

## 用不用包管理？ ##

答案是否定的。对此，我们沿用老一套的做法，浏览器直接 `<script src="xxx.js">` 引入 \*.js 文件。但不代表不使用模块化管理，一个 ts 文件就是一个类，一个小模块，一个文件夹就是一个大模块。对于页面引用，你要确保所依赖的模块有哪些，然后通过 `<script src="xxx.js">` 引入。这听上去很落后，也很原始，也可能会吓跑初来乍到想了解的朋友，但请君少安毋躁，且听我说，是基于下面几个理由的。

*  前端包管理，模块管理缺乏统一标准，复杂异常，还是那句，笔者不想踩入那个坑，AMD、UMD、Common.js、ES import 好烦……
 *  ts 默认机制下，所有 \*.ts 对象都是全局的，无须声明 import 即可引用，非常方便，VS Code 可以智能提示和编译。
 *  前面说，要逐个引入依赖 js。实际上，那是使用方式中其中之一；推荐的方式是打包到一个大 all.js，或者精简集合，再少量引入所需的 js，这样 http 请求也不会过多。

多一事还不如少一事，我知道很多人会难以认同和接受。且容我再三“辩解”：之所以定位于“轻量级”，就是为了避免问题复杂化。希望大家可以理解。

## 完整引入 or 按需引入？ ##

所以问题归根结底，就是完整引入 or 按需引入的问题。当前的答案是两者兼之，综合使用，更视乎场景而言（开发 or 线上）。

*  对于十分通用的底层库，完整引入
 *  零散的组件，可以按需单独引入

## all.js 的文件顺序 ##

一个 ts 文件中，通常是一个类或者是一个 Vue 组件。简单的 Vue 组件还好，无关顺序的，除了字面量的 JSON 声明就是 Function 包裹着的，加载 js 时就算没它所依赖的对象也不会报错。但一个类，如果依赖的对象 undefinded，肯定报错。例如 Vue 组件的混合 `mixins: [aaa, bbb]`，如果 aaa 晚于这个组件加载，肯定报错，又不能让 `mixins` 包裹在函数里面延时执行。所以这种情况下就有加载顺序的要求了。

我们采用 gulp.js 打包，希望拼接文件内容 `a.js + b.js + ……= all.js` 即可。某些模块全是 Vue 组件，那就无关顺序；部分组件要求顺序的，就在 gulp.js 打包配置指定一下，这个 gulp 也是支持的。

## 压缩和 SourceMap ##

编写好 ts 后，后台立刻编译为 js，再弄个页面进行测试。投入项目引入的话，就执行构建（build），打包为 `all.js`。生成环境引入的是压缩好的 `all.min.js`，线上调试会引入 source map。

Less.js 有 source map，ts 组件也有 source map。如果可以按 F12 然后看到的是 Less 和 TypeScript 源码，不是挺好的么，不知这个小小愿望可否实现？

# 项目结构 #

## 源码空间介绍 ##

对了，到现在还没介绍这个 UI 框架的名字，就叫：aj-ts 吧，aj 是 ajaxjs 的缩写。ajaxjs 别看它带有 js 字眼实际是笔者的拙作：一个包含 Java 服务端的全栈框架，故：

*  [https://gitee.com/sp42\_admin/ajaxjs/tree/master/aj-ts][https_gitee.com_sp42_admin_ajaxjs_tree_master_aj-ts] 是 UI 源码空间没错，但上一层的就是：
 *  [https://gitee.com/sp42\_admin/ajaxjs/][https_gitee.com_sp42_admin_ajaxjs] 这个全栈框架了

顺便吐槽一下 Git，好像仍不支持一个空间多个项目单独检出（指定某个子目录）。SVN 就可以了。这个 gitee 空间我打开了 SVN 的开关，所以同时兼容 SVN 管理。笔者日常还是 SVN 多。

## 目录结构 ##

aj-ts 目录结构, 具体如下：  
![在这里插入图片描述][20210115201225208.png]

*  `src` 目录是 ts 源码，里面的 `less` 目录是样式 Less 源码。每一个目录是大模块；
 *  `dist` 是编译后的 \*.js，里面的 `css` 目录是编译后的 *.css；*.min.js 是压缩后的 js；
 *  大模块的会打包为一个 xxx.js，例如 widget 的是 widget.js 和 widget.min.js。框架里所有的 js 统统打包为一个全集 all.js；
 *  CSS 的统一打包为 all.css 和 all.min.css，没有单独打包各个模块出来；
 *  `sourcemap` 目录为 Source Map，js 和 css 的皆有；
 *  `demo` 既是演示的网页，也是各个 UI 组件的测试用例。  
    aj-ts 内建一个简易的 node 写成的 Web Server，WebRoot 指向这个目录，也就是说，项目本身也是一个 web 目录，故根目录有一个 `index.html`，便是项目主页，指向的 demo 就是 `demo` 目录的各种组件演示。WebServer 提供这几种服务：测试用例、开发期间编译 ts/less 返回 js/css 给外部调用。

# 项目环境与构建 #

构建要尽可能简单，前面已经交待过选型的理由，选择 Gulp.js 做构建。

关于 gulp 的准备工作，参加笔者博文[《Gulp.js 探险》][Gulp.js]。配置好环境后，可执行命令行：

gulp

便会监视 src 源码，一有变化即进行编译。同时还会启动一个静态 WebServer，默认端口 8888（WebServer 源码在 `src/nodejs/static-server`）。

总的来说，Gulp 构建提供的服务有这些：

*  开发期间编译 ts/less 供外部调用，通过内置的 Web Server 提供 HTTP 暴露。
 *  打包构建，合并源码为 all.js/all.css。压缩源码和生成 SourceMap。

所以对应这两种场景有不同的 Gulp Task 任务函数，在 gulpfile.js 里修改。

# 小结 #

Node + VS Code 固然是前端之必备，但笔者还是浅尝辄止，不敢贸然深入，没有使用 vue 全家桶之类的，本着“够用就好”思想实践。

下篇博文中进入源码讲解的部分，一行一行 show code（献丑了！）。

[https_gitee.com_sp42_admin_ajaxjs_tree_master_aj-ts]: https://gitee.com/sp42_admin/ajaxjs/tree/master/aj-ts
[https_gitee.com_sp42_admin_ajaxjs]: https://gitee.com/sp42_admin/ajaxjs/
[20210115201225208.png]: /images/20221119/33b3a229052d4b3b81a552f3eebdd964.png
[Gulp.js]: https://zhangxin.blog.csdn.net/article/details/112410859