aotoo-hub:一體化的大前端架構方案

天天修改發表於2018-12-22

年底了,開源一套我們的大前端架構aotoo-hub,小夥伴們都用得很爽的。

GITHUB -- 聽說star的人明年會發財
文件

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的路由等,一體化的設計使得專案的開發、部署、維護都變得簡單且易於維護。也許你會用到eggnest等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
複製程式碼

img

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
複製程式碼

專案初始目錄

aotoo-hub:一體化的大前端架構方案

完整專案目錄

初始目錄是一個精簡版的專案,保留了最基礎的檔案及目錄,完整目錄如下

  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.jscommon.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
    複製程式碼

    aotoo-hub:一體化的大前端架構方案

    新專案有預設的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
    // 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
    前端靜態資源編譯後的檔案存放位置

    aotoo-hub:一體化的大前端架構方案

    • 1.0.3/
      版本目錄,根據aotoo.config中的版本資訊
      • dev/
        該專案處於開發模式,生產模式使用/pro目錄
        • html/
          html模板編譯輸出目錄
        • mapfile.json
          資源對映檔案

三、啟動專案

單專案啟動

# 開發編譯,並啟動前端
$ 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,鑑於本人有社交懶癌,問題不一定能及時回答,平時畢竟工作有點多.

相關文章