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

模块管理

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

用不用包管理?

答案是否定的。对此,我们沿用老一套的做法,浏览器直接 <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 服务端的全栈框架,故:

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

目录结构

aj-ts 目录结构, 具体如下:
在这里插入图片描述

  • 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

便会监视 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(献丑了!)。

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页