什麼是Tangram?

Tangram [ 七巧板 ]

項目簡介

Github: github.com/itsonglei/T…javascript

項目目的

  • 將團隊內部多個腳手架,整理合一。

團隊將來只知道有 tangram install xx  tangram update xx  tangram run xx 便可。html

  • 經過 tangram作一些團隊私服組件管理
  • 實現便捷工具,提升研發效率

團隊成員在建立新功能時,都會頻繁的複製舊頁面的頁面配置,組件配置。咱們但願可以經過實現 tangram init page  or tangram init component 幫助到研發同窗,快速開發。前端

  • 預先研究 Lerna jest travis

項目架構

├─ node_modules				        -- 全局依賴包
├─ packages					-- Lerna 包目錄
	├─ cli					-- tangram/cli 包
		├─ .temp			-- 臨時文件存儲
		├─ bin				-- 可執行文件
		├─ dist				-- ts 輸出文件夾,可供 bin 直接使用
		├─ node_modules		        -- tangram/cli 依賴包
		├─ src				-- tangram/cli 包主要源碼(ts)
			├─ config		-- tangram/cli 項目配置
			├─ install		-- tangram/cli install 功能實現
			├─ util			-- tangram/cli 工具類
			├─ install.ts	        -- tangram/cli 入口
		├─ .babelrc			-- Babel 配置文件
		├─ package.json 	        -- tangram/cli 項目的配置信息文件
		├─ tsconfig.json	        -- ts 配置文件
├─ .czrc					-- changelog 插件依賴配置
├─ .eslintrc.js				        -- eslit 配置文件,主要是定義 globals
├─ .gitignore				        -- 忽略一些不須要提交的文件
├─ .travis.yml				        -- Travis CI 配置文件
├- CHANGELOG.md				        -- 更新迭代目錄
├─ jest.config.js			        -- jest 配置文件
├─ lerna.json				        -- Lerna 配置文件
├─ package.json				        -- 全局項目的配置信息文件
├─ PLAN.md					-- 羅列項目計劃
└─ README.md
複製代碼

知識點

lerna

你們回想下咱們在安裝 babel 的時候是經過什麼命令, npm install babel  仍是 npm install [@babel/babel-core](#)   ,一般咱們都是經過npm install [@babel/babel-core](#)安裝babel 相對應的模塊的,這是因爲 babel 進行了分包管理的緣故。java

Lerna是一個工具,它優化了使用git和npm管理多包存儲庫的工做流。
引入lerna後,它爲開發人員提供了一種管理多packages javascript項目的方式。node

下面是一些特性git

  1. 自動解決packages之間的依賴關係
  2. 經過git 檢測文件改動,自動發佈
  3. 根據git 提交記錄,自動生成CHANGELOG
  4. 採用Independent模式
  5. eslint規則檢查
  6. prettier自動格式化代碼
  7. 提交代碼,代碼檢查hook
  8. 遵循semver版本規範

Travis CI

Travis CI 提供的是持續集成服務(Continuous Integration,簡稱 CI)。它綁定 Github 上面的項目,只要有新的代碼,就會自動抓取。而後,提供一個運行環境,執行測試,完成構建,還能部署到服務器。
持續集成指的是隻要代碼有變動,就自動運行構建和測試,反饋運行結果。確保符合預期之後,再將新代碼"集成"到主幹。
持續集成的好處在於,每次代碼的小幅變動,就能看到運行結果,從而不斷累積小的變動,而不是在開發週期結束時,一會兒合併一大塊代碼。github

Jest

Jest 是 Facebook 出品的一個測試框架,相對其餘測試框架,其一大特色就是就是內置了經常使用的測試工具,好比自帶斷言、測試覆蓋率工具,實現了開箱即用。
而做爲一個面向前端的測試框架, Jest 能夠利用其特有的快照測試功能,經過比對 UI 代碼生成的快照文件,實現對 React 等常見框架的自動測試。typescript

Jest既簡單又強大,內置支持如下功能:npm

  • 靈活的配置:好比,能夠用文件名通配符來檢測測試文件。
  • 測試的事前步驟(Setup)和過後步驟(Teardown),同時也包括測試範圍。
  • 匹配表達式(Matchers):能使用指望expect句法來驗證不一樣的內容。
  • 測試異步代碼:支持承諾(promise)數據類型和異步等待async / await功能。
  • 模擬函數:能夠修改或監查某個函數的行爲。
  • 手動模擬:測試代碼時能夠忽略模塊的依存關係。
  • 虛擬計時:幫助控制時間推移。

TypeScript

TypeScript 是有類型定義的 JS 的超集,包括 ES五、ES5+ 和其餘一些諸如泛型、類型定義、命名空間等特徵的集合,爲了大規模 JS 應用而生編程

優勢:

  • 始於JavaScript,歸於JavaScript,typescript是JavaScript的超集,因此它能夠重用JavaScriptd代碼,使用JavaScript的庫
  • JavaScript用的優勢它都有,跨瀏覽器、跨操做系統等
  • 面向對象的編程思想,強大的類型檢查
  • 開源大法好

項目已開源,還在創做初期,但願你們踊躍提交 issue 或 pull request。

相關文章
相關標籤/搜索