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

時間 2019-11-29

原文原文鏈接

年末了，開源一套咱們的大前端架構aotoo-hub，小夥伴們都用得很爽的。php

GITHUB -- 據說star的人明年會發財
文檔css

aotoo-hub是一套正式上線的大前端解決方案。迭代的這2年多的時間，從webpack-1熬到了webpack-4，從純前端腳手架到融合node端的總體方案，從繁複到精簡，重構的次數不要太多。簡單、易用、易部署的一體化大前端開發體驗是aotoo-hub始終的追求，咱們不是在重構，就是在重構的路上(保持一致性)。html

aotoo-hub是一套前端、node端彼此相親相愛不分離，你中有我，我中有你的大前端解決方案。F妹負責靜態資源編譯與分享，N哥負責服務、路由與渲染，它們共同建設着模板，在這世界上綻開着它們的美與才華。前端

忽然發現我腦洞也蠻大的，說回來，完整的大前端方案須要解決前端、node兩端各自的開發、部署難的問題，而且須要將兩端融合爲一套有機的總體，同時還能兼顧到工程化實現。aotoo-hub開發迭代的過程當中咱們始終秉持着下面這些原則vue

通用性

儘可能多的支持多種開源框架，使咱們可以爲不一樣業務選擇合適的開源框架。aotoo-hub如今支持react，vue，小程序(alpha)，將來也許可以加入app的相關框架，好比RN或者FLUTTER？java

融合性

前端與node的有機融合不止是一種更好的體驗，同時前端、node端可以共享靜態資源，部署同構組件，簡化resful的路由等，一體化的設計使得項目的開發、部署、維護都變得簡單且易於維護。也許你會用到egg，nest等node框架做爲後端支撐，maybe更好的方案是java, go, php等的框架。node

易用性

aotoo-cli是專門爲aotoo-hub打造的一套命令工具，使得aotoo-hub更容易上手了，仍是寫寫code演示一下react

啓動默認項目linux

# 安裝aotoo-cli
$ npm install -g aotoo-cli  # aotoo -V檢驗是否安裝成功

# 新建workspace
$ aotoo init oneWorkspace  #建立目錄oneWorkspace，並初始化項目環境

# 啓動默認項目 
$ cd oneWorkspace
$ aotoo dev
複製代碼

新建項目webpack

# 安裝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
複製代碼

1、新建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
複製代碼

2、新建項目

下面咱們開始新建一個項目

$ 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

// 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
      資源映射文件

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，鑑於本人有社交懶癌，問題不必定能及時回答，平時畢竟工做有點多.