技術標籤：TypeScriptAJAXJS FrameworkDHTML & H5typescriptgulp

模組管理

一個框架或者庫，自然有些綱領性的內容先要談談，這裡就展開為大家介紹。

用不用包管理？

答案是否定的。對此，我們沿用老一套的做法，瀏覽器直接 <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 請求也不會過多。

多一事還不如少一事，我知道很多人會難以認同和接受。且容我再三“辯解”：之所以定位於“輕量級”，就是為了避免問題複雜化。希望大家可以理解。

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 是 UI 原始碼空間沒錯，但上一層的就是：
• https://gitee.com/sp42_admin/ajaxjs/ 這個全棧框架了

順便吐槽一下 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（獻醜了！）。