年底了，開源一套我們的大前端架構aotoo-hub，小夥伴們都用得很爽的。
aotoo-hub是一套正式上線的大前端解決方案。迭代的這2年多的時間，從webpack-1熬到了webpack-4，從純前端腳手架到融合node端的整體方案，從繁複到精簡，重構的次數不要太多。簡單、易用、易部署的一體化大前端開發體驗是aotoo-hub始終的追求，我們不是在重構，就是在重構的路上(保持一致性)。
aotoo-hub是一套前端、node端彼此相親相愛不分離，你中有我，我中有你的大前端解決方案。F妹負責靜態資源編譯與分享，N哥負責服務、路由與渲染，它們共同建設著模板，在這世界上綻放著它們的美與才華。
突然發現我腦洞也蠻大的，說回來，完整的大前端方案需要解決前端、node兩端各自的開發、部署難的問題，並且需要將兩端融合為一套有機的整體，同時還能兼顧到工程化實現。aotoo-hub開發迭代的過程中我們始終秉持著下面這些原則
通用性
儘量多的支援多種開源框架，使我們能夠為不同業務選擇合適的開源框架。aotoo-hub現在支援react，vue，小程式(alpha)，未來也許能夠加入app的相關框架，比如RN或者FLUTTER？
融合性
前端與node的有機融合不止是一種更好的體驗，同時前端、node端能夠共享靜態資源，部署同構元件，簡化resful的路由等，一體化的設計使得專案的開發、部署、維護都變得簡單且易於維護。也許你會用到egg，nest等node框架作為後端支撐，maybe更好的方案是java, go, php等的框架。
易用性
aotoo-cli是專門為aotoo-hub打造的一套命令工具，使得aotoo-hub更容易上手了，還是寫寫code演示一下
啟動預設專案
# 安裝aotoo-cli
$ npm install -g aotoo-cli # aotoo -V檢驗是否安裝成功
# 新建workspace
$ aotoo init oneWorkspace #建立目錄oneWorkspace，並初始化專案環境
# 啟動預設專案
$ cd oneWorkspace
$ aotoo dev
複製程式碼新建專案
# 安裝aotoo-cli
$ npm install -g aotoo-cli # aotoo -V檢驗是否安裝成功
# 新建workspace
$ aotoo init oneWorkspace #建立目錄oneWorkspace，並初始化專案環境
# 新建專案
$ cd oneWorkspace
$ aotoo create newProject # 建立一個專案，名稱為newProject
# 啟動專案開發版本
$ aotoo dev newProject # then open browse http://localhost:3000
# 編譯專案
$ aotoo build newProject # 靜態資源會cdn化
# 啟動生產專案
$ aotoo build newProject
$ aotoo start newProject # 使用node啟動
$ pm2 start index.js -- --start newProject # 使用pm2啟動生產專案
複製程式碼對吧，命令列應該不算複雜。好了，這裡大概對aotoo-hub進行了一些介紹，接著和大家說說建立專案的流程及初始化專案的檔案構成
準備
支撐系統
- mac osx
- linux
windows，主要是/和\的問題
全域性環境
- node-gyp
- node-pre-gyp
$ npm install -g node-gyp
$ npm install -g node-pre-gyp
複製程式碼一、新建workspace
新建workspace其實就是一個準備編譯環境的過程，我們會準備編譯檔案，專案目錄，專案配置檔案
# 新建名稱空間
$ aotoo init wp-1
複製程式碼
aotoo.config.js
aotoo-hub的配置檔案，可以在這裡設定專案初始目錄，版本號等等配置資訊，配置內容大致如下
const path = require('path')
const pakg = require('./package.json')
const ROOT = __dirname
const version = pakg.version
module.exports = {
// 版本資訊，由package.json的version來指定
// 預設情況下，所有專案產出的版本號都會依據這個version值
// 版本資訊會被用於生成dist下的版本目錄
version: version,
// node的環境變數NODE_ENV
mode: process.env.NODE_ENV,
// workspace的根目錄地址
// 會用在aotoo安裝外掛時，及node端(目錄層級很深)掉用
ROOT: ROOT,
// 所有專案的原始根目錄
src : path.join(__dirname, 'src'),
// 配置預設專案資訊
// 小程式專案必須使用這個配置
// 當我們不使用start, name等命令選項時，aotoo-hub會查詢該屬性下startup為true的專案，並嘗試啟動
// 當我們配置好預設專案後，命令列可以簡化projectName
apps: [
{
// 專案名稱，與src專案專案目錄一致
// 任何專案都必須有自己唯一的名稱
name: 'aotooSample',
// 是否啟動該專案
startup: true,
// 指定專案源源目錄
src: path.join(ROOT, 'src/aotooSample'),
// 預設靜態資源輸出地址為 src/dist
// 這裡可以手動指定希望輸出的目錄
// dist
// 指定專案埠地址
// 指定專案埠，可為null，系統自動分配埠地址
port: 8400
}
]
}
複製程式碼build目錄
包含所有的編譯檔案
src目錄
src是預設aotoo-hub的源目錄，所有新建專案都會在次目錄下生成專案資料夾
aotooSmple目錄
是我們的一個demo專案，是aotoo-hub的預設專案，以供參考
# 啟動預設專案，開發模式
$ aotoo dev
複製程式碼二、新建專案
下面我們開始新建一個專案
$ cd wp-1
$ aotoo create newProject
複製程式碼專案初始目錄
完整專案目錄
初始目錄是一個精簡版的專案，保留了最基礎的檔案及目錄，完整目錄如下
wp-1
└── src
└── newProject
├── component //元件目錄
│ └── ......
├── ssr/sync // 同構模組目錄
│ └── ......
├── dist // 靜態檔案輸出目錄
│ └── ......
├── js // 前端業務js目錄
│ └── index.js
├── css // 前端業務css目錄
│ └── index.styl
├── html // 前端業務模板目錄，一般的模板都會自動生成，如需要自定義幕版，則根據同名規則自定義生成相關模板
│ └── index.html
└── server // node端的原始碼目錄
│── pages // koa2的control層目錄
│ └── index.js
└── plugins // 自定義外掛目錄，適用於node端
└── ......
複製程式碼注意
所有以下劃線開始的檔案、目錄在編譯時會被忽略，如
_abc/或者_abc.js
configs目錄
專案環境配置資料夾，存放多個環境配置檔案，如測試1，測試2，生產等環境配置，所有環境配置在應用是會與公共的default.js配置檔案合併
js目錄
存放公共JS，業務JS目錄
-
vendors目錄
公共JS，公共CSS，自動被模板引入。我們將公共JS分為兩個部分vendors.js，common.js，公共CSS只有一個common.css
vendors.js: 主要內容為框架原始碼，如react, vue, react-router等
common.js: 根據業務JS由webpack自動生成
common.css:vendors.js中引入的*.styl(aotoo-hub只支援stylus)，webpack會將其分離成common樣式，該檔案也會被模板自動引入
dist: 編譯生成dist/**/js/vendors.js -
js/*.js
所有的模板，樣式自動生成的依據，因為js目錄下的所有檔案都被當成獨立的業務JS檔案，會被各個業務頁面自動呼叫
dist: 編譯生成dist/**/js/*.js -
html目錄
非必要目錄，主動生成，aotoo-hub會自動生成模板檔案(依據js/*.js)，幷包含一個id=root的div。
特殊模板需求，請依照*.js的同名檔案新建，如src/../js/abc.js對應src/../html/abc.html
dist: 編譯生成dist/**/html/*.html -
css目錄
非必要目錄，被動生成，aotoo-hub會自動生成樣式檔案(依據js/*.js引入的stylus檔案)
dist: 編譯生成dist/**/css/*.css -
component目錄
非必要目錄，元件存放目錄，一個別名目錄，我們在node端，前端可以方便引入元件
import someComponent from 'compoent/someComponent'
...
複製程式碼- sync目錄
非必要目錄，同構業務模組存放目錄，一個別名目錄，我們在node端，前端可以方便引入元件
import someMoudle from 'sync/someMoudle'
...
複製程式碼-
server
node端服務檔案
aotoo-hub的node端基於開源庫aotoo-koa-server實現。
預設新建的專案是一個純前端專案，但某些專案有SEO需求，需要我們啟動node端來渲染頁面# 帶node端啟動專案 $ aotoo dev newProject --server 複製程式碼
新專案有預設的demoindex頁面，新專案的node端會自動幫你把所有的node端需要的環境搭建好，同時建立了pages/index.js這個預設的demoindex頁面- configs.js
這個檔案每次啟動時會根據src/newProject/configs/目錄下的環境配置自動建立，因此如果修改配置請移步src/newProject/configs/中 - index.js & lib.js
aotoo-hub為你將server環境都配置在lib.js中，如果你需要擴充套件配置，如使用新的koa2的外掛，建議修改index.js檔案，參考lib.js的寫法 - pages/*.js
這裡是node端業務js，與src/js/*.js對應同一個業務，且同名，如src/newProject/js/abc.js=>server/pages/abc.js
- configs.js
// server/pages/abc.js
// 該檔案為koa2框架MVC中的contro層檔案
// aotoo-hub接管了渲染方法，因此你只需返回渲染所需的資料部分，oridata
/*
*
* oridata {JSON} 系統傳遞變數，用於渲染模板，需要return oridata
* ctx {context} koa2的ctx變數
*
*
* get: method = GET
* post: method = POST
* put: method = PUT
*/
module.exports = function (oridata) {
return {
get: function name(ctx) {
oridata.title = 'aotoo-hub 多專案全棧腳手架'
oridata.root = '123'
ctx.redirect('/docs')
// return oridata
},
post: function name(ctx) {
return oridata
}
}
}
複製程式碼-
dist
前端靜態資源編譯後的檔案存放位置
- 1.0.3/
版本目錄，根據aotoo.config中的版本資訊- dev/
該專案處於開發模式，生產模式使用/pro目錄- html/
html模板編譯輸出目錄 - mapfile.json
資源對映檔案
- html/
- dev/
- 1.0.3/
三、啟動專案
單專案啟動
# 開發編譯，並啟動前端
$ aotoo dev newProject
# 如果需要node端(該命令一次生效，終生有效，且後續啟動時不需要引數 `--server`)
# 開發編譯，並啟動Node端
$ aotoo dev newProject --server
# 生產編譯
$ aotoo build newProject
# 只啟動node端(編譯完成)
$ aotoo start newProject
# 帶環境編譯或啟動
$ aotoo start newProject --config env_test
複製程式碼多專案啟動
生產環境支援多開專案，且會為每個專案自動分配埠(未指定)，開發模式則受制於nodemon對多開不友好的功能，會報錯(pm2替代就可以)，啟動多開也很簡單，可以參考上面aotoo.config.js的配置，
將startup: false設定為 startup: true就好了，啟動時不用指定專案名稱，如aotoo dev，或者指定一組專案名稱，如：aotoo dev --name aaa --name bbb
今天對aotoo-hub有一個大概的介紹，有問題請提issue，鑑於本人有社交懶癌，問題不一定能及時回答，平時畢竟工作有點多.