年底了,開源一套我們的大前端架構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,鑑於本人有社交懶癌,問題不一定能及時回答,平時畢竟工作有點多.