摘要：年底了，開(kāi)源一套我們的大前端架構(gòu)，小伙伴們都用得很爽的。聽(tīng)說(shuō)的人明年會(huì)發(fā)財(cái)文檔是一套正式上線的大前端解決方案。是一套前端端彼此相親相愛(ài)不分離，你中有我，我中有你的大前端解決方案。

年底了，開(kāi)源一套我們的大前端架構(gòu)aotoo-hub，小伙伴們都用得很爽的。

GITHUB -- 聽(tīng)說(shuō)star的人明年會(huì)發(fā)財(cái)
文檔

aotoo-hub是一套正式上線的大前端解決方案。迭代的這2年多的時(shí)間，從webpack-1熬到了webpack-4，從純前端腳手架到融合node端的整體方案，從繁復(fù)到精簡(jiǎn)，重構(gòu)的次數(shù)不要太多。簡(jiǎn)單、易用、易部署的一體化大前端開(kāi)發(fā)體驗(yàn)是aotoo-hub始終的追求，我們不是在重構(gòu)，就是在重構(gòu)的路上(保持一致性)。

aotoo-hub是一套前端、node端彼此相親相愛(ài)不分離，你中有我，我中有你的大前端解決方案。前端負(fù)責(zé)靜態(tài)資源編譯與分享，node端負(fù)責(zé)服務(wù)、路由與渲染，模板則起到橋接兩端的作用(結(jié)構(gòu)、樣式、渲染)，最終http服務(wù)將渲染完成的模板投送到客戶端瀏覽器上。

完整的大前端方案需要解決前端、node兩端各自的開(kāi)發(fā)、部署難的問(wèn)題，并且需要將兩端融合為一套有機(jī)的整體，同時(shí)還能兼顧到工程化實(shí)現(xiàn)。aotoo-hub開(kāi)發(fā)迭代的過(guò)程中我們始終秉持著下面這些原則

盡量多的支持多種開(kāi)源框架，使我們能夠?yàn)椴煌瑯I(yè)務(wù)選擇合適的開(kāi)源框架。aotoo-hub現(xiàn)在支持react，vue，小程序(alpha)，未來(lái)也許能夠加入app的相關(guān)框架，比如RN或者FLUTTER？

前端與node的有機(jī)融合不止是一種更好的體驗(yàn)，同時(shí)前端、node端能夠共享靜態(tài)資源，部署同構(gòu)組件，簡(jiǎn)化resful的路由等，一體化的設(shè)計(jì)使得項(xiàng)目的開(kāi)發(fā)、部署、維護(hù)都變得簡(jiǎn)單且易于維護(hù)。也許你會(huì)用到egg，nest等node框架作為后端支撐，maybe更好的方案是java, go, php等的框架。

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

啟動(dòng)默認(rèn)項(xiàng)目

# 安裝aotoo-cli
$ npm install -g aotoo-cli  # aotoo -V檢驗(yàn)是否安裝成功

# 新建workspace
$ aotoo init oneWorkspace  #創(chuàng)建目錄oneWorkspace，并初始化項(xiàng)目環(huán)境

# 啟動(dòng)默認(rèn)項(xiàng)目  
$ cd oneWorkspace
$ aotoo dev

新建項(xiàng)目

# 安裝aotoo-cli
$ npm install -g aotoo-cli  # aotoo -V檢驗(yàn)是否安裝成功

# 新建workspace
$ aotoo init oneWorkspace  #創(chuàng)建目錄oneWorkspace，并初始化項(xiàng)目環(huán)境

# 新建項(xiàng)目
$ cd oneWorkspace
$ aotoo create newProject  # 創(chuàng)建一個(gè)項(xiàng)目，名稱為newProject

# 啟動(dòng)項(xiàng)目開(kāi)發(fā)版本
$ aotoo dev newProject  # then open browse http://localhost:3000

# 編譯項(xiàng)目
$ aotoo build newProject # 靜態(tài)資源會(huì)cdn化

# 啟動(dòng)生產(chǎn)項(xiàng)目
$ aotoo build newProject
$ aotoo start newProject  # 使用node啟動(dòng)
$ pm2 start index.js -- --start newProject  # 使用pm2啟動(dòng)生產(chǎn)項(xiàng)目

對(duì)吧，命令行應(yīng)該不算復(fù)雜。好了，這里大概對(duì)aotoo-hub進(jìn)行了一些介紹，接著和大家說(shuō)說(shuō)創(chuàng)建項(xiàng)目的流程及初始化項(xiàng)目的文件構(gòu)成

mac osx

linux

windows，主要是/和的問(wèn)題

node-gyp

node-pre-gyp

$ npm install -g node-gyp
$ npm install -g node-pre-gyp

新建workspace其實(shí)就是一個(gè)準(zhǔn)備編譯環(huán)境的過(guò)程，我們會(huì)準(zhǔn)備編譯文件，項(xiàng)目目錄，項(xiàng)目配置文件

# 新建命名空間
$ aotoo init wp-1

aotoo.config.js
aotoo-hub的配置文件，可以在這里設(shè)置項(xiàng)目初始目錄，版本號(hào)等等配置信息，配置內(nèi)容大致如下

const path = require("path")
const pakg = require("./package.json")
const ROOT = __dirname
const version = pakg.version
module.exports = {

  // 版本信息，由package.json的version來(lái)指定
  // 默認(rèn)情況下，所有項(xiàng)目產(chǎn)出的版本號(hào)都會(huì)依據(jù)這個(gè)version值
  // 版本信息會(huì)被用于生成dist下的版本目錄
  version: version,

  // node的環(huán)境變量NODE_ENV
  mode: process.env.NODE_ENV,

  // workspace的根目錄地址
  // 會(huì)用在aotoo安裝插件時(shí)，及node端(目錄層級(jí)很深)掉用
  ROOT: ROOT,

  // 所有項(xiàng)目的原始根目錄
  src : path.join(__dirname, "src"),

  // 配置默認(rèn)項(xiàng)目信息
  // 小程序項(xiàng)目必須使用這個(gè)配置
  // 當(dāng)我們不使用start, name等命令選項(xiàng)時(shí)，aotoo-hub會(huì)查找該屬性下startup為true的項(xiàng)目，并嘗試啟動(dòng)
  // 當(dāng)我們配置好默認(rèn)項(xiàng)目后，命令行可以簡(jiǎn)化projectName
  apps: [
    {
      // 項(xiàng)目名稱，與src項(xiàng)目項(xiàng)目目錄一致
      // 任何項(xiàng)目都必須有自己唯一的名稱
      name: "aotooSample",

      // 是否啟動(dòng)該項(xiàng)目
      startup: true,  

      // 指定項(xiàng)目源源目錄 
      src: path.join(ROOT, "src/aotooSample"), 

      // 默認(rèn)靜態(tài)資源輸出地址為 src/dist
      // 這里可以手動(dòng)指定希望輸出的目錄
      // dist

      // 指定項(xiàng)目端口地址
      // 指定項(xiàng)目端口，可為null，系統(tǒng)自動(dòng)分配端口地址
      port: 8400  
    }
  ]
}

build目錄
包含所有的編譯文件
src目錄
src是默認(rèn)aotoo-hub的源目錄，所有新建項(xiàng)目都會(huì)在次目錄下生成項(xiàng)目文件夾
aotooSmple目錄
是我們的一個(gè)demo項(xiàng)目，是aotoo-hub的默認(rèn)項(xiàng)目，以供參考

# 啟動(dòng)默認(rèn)項(xiàng)目，開(kāi)發(fā)模式
$ aotoo dev

下面我們開(kāi)始新建一個(gè)項(xiàng)目

$ cd wp-1
$ aotoo create newProject

初始目錄是一個(gè)精簡(jiǎn)版的項(xiàng)目，保留了最基礎(chǔ)的文件及目錄，完整目錄如下

  wp-1
    └── src
        └── newProject 
                ├── component  //組件目錄
                │    └── ......  
                ├── ssr/sync  // 同構(gòu)模塊目錄
                │    └── ......  
                ├── dist      // 靜態(tài)文件輸出目錄 
                │    └── ......  
                ├── js        // 前端業(yè)務(wù)js目錄
                │    └── index.js  
                ├── css       // 前端業(yè)務(wù)css目錄
                │    └── index.styl
                ├── html      // 前端業(yè)務(wù)模板目錄，一般的模板都會(huì)自動(dòng)生成，如需要自定義幕版，則根據(jù)同名規(guī)則自定義生成相關(guān)模板
                │    └── index.html
                └── server    // node端的源碼目錄
                      │── pages  // koa2的control層目錄
                      │    └── index.js
                      └── plugins // 自定義插件目錄，適用于node端
                          └── ......

注意
所有以下劃線開(kāi)始的文件、目錄在編譯時(shí)會(huì)被忽略，如_abc/或者_abc.js
configs目錄
項(xiàng)目環(huán)境配置文件夾，存放多個(gè)環(huán)境配置文件，如測(cè)試1，測(cè)試2，生產(chǎn)等環(huán)境配置，所有環(huán)境配置在應(yīng)用是會(huì)與公共的default.js配置文件合并
js目錄
存放公共JS，業(yè)務(wù)JS目錄

vendors目錄

公共JS，公共CSS，自動(dòng)被模板引入。我們將公共JS分為兩個(gè)部分vendors.js，common.js，公共CSS只有一個(gè)common.css
vendors.js: 主要內(nèi)容為框架源碼，如react, vue, react-router等
common.js: 根據(jù)業(yè)務(wù)JS由webpack自動(dòng)生成
common.css: vendors.js中引入的*.styl(aotoo-hub只支持stylus)，webpack會(huì)將其分離成common樣式，該文件也會(huì)被模板自動(dòng)引入
dist: 編譯生成 dist/**/js/vendors.js

js/*.js
所有的模板，樣式自動(dòng)生成的依據(jù)，因?yàn)閖s目錄下的所有文件都被當(dāng)成獨(dú)立的業(yè)務(wù)JS文件，會(huì)被各個(gè)業(yè)務(wù)頁(yè)面自動(dòng)調(diào)用
dist: 編譯生成 dist/**/js/*.js

html目錄
非必要目錄，主動(dòng)生成，aotoo-hub會(huì)自動(dòng)生成模板文件(依據(jù)js/*.js)，并包含一個(gè)id=root的div。
特殊模板需求，請(qǐng)依照*.js的同名文件新建，如src/../js/abc.js對(duì)應(yīng)src/../html/abc.html
dist: 編譯生成 dist/**/html/*.html

css目錄
非必要目錄，被動(dòng)生成，aotoo-hub會(huì)自動(dòng)生成樣式文件(依據(jù)js/*.js引入的stylus文件)
dist: 編譯生成 dist/**/css/*.css

component目錄
非必要目錄，組件存放目錄，一個(gè)別名目錄，我們?cè)趎ode端，前端可以方便引入組件

  import someComponent from "compoent/someComponent"
  ...

sync目錄
非必要目錄，同構(gòu)業(yè)務(wù)模塊存放目錄，一個(gè)別名目錄，我們?cè)趎ode端，前端可以方便引入組件

  import someMoudle from "sync/someMoudle"
  ...

server
node端服務(wù)文件
aotoo-hub的node端基于開(kāi)源庫(kù)aotoo-koa-server實(shí)現(xiàn)。
默認(rèn)新建的項(xiàng)目是一個(gè)純前端項(xiàng)目，但某些項(xiàng)目有SEO需求，需要我們啟動(dòng)node端來(lái)渲染頁(yè)面

  # 帶node端啟動(dòng)項(xiàng)目
  $ aotoo dev newProject --server

新項(xiàng)目有默認(rèn)的demoindex頁(yè)面，新項(xiàng)目的node端會(huì)自動(dòng)幫你把所有的node端需要的環(huán)境搭建好，同時(shí)創(chuàng)建了pages/index.js這個(gè)默認(rèn)的demoindex頁(yè)面

configs.js
這個(gè)文件每次啟動(dòng)時(shí)會(huì)根據(jù)src/newProject/configs/目錄下的環(huán)境配置自動(dòng)創(chuàng)建，因此如果修改配置請(qǐng)移步src/newProject/configs/中

index.js & lib.js
aotoo-hub為你將server環(huán)境都配置在lib.js中，如果你需要擴(kuò)展配置，如使用新的koa2的插件，建議修改index.js文件，參考lib.js的寫法

pages/*.js
這里是node端業(yè)務(wù)js，與src/js/*.js對(duì)應(yīng)同一個(gè)業(yè)務(wù)，且同名，如src/newProject/js/abc.js => server/pages/abc.js

    // server/pages/abc.js
    // 該文件為koa2框架MVC中的contro層文件
    // aotoo-hub接管了渲染方法，因此你只需返回渲染所需的數(shù)據(jù)部分，oridata
    /*
     * 
     * oridata {JSON} 系統(tǒng)傳遞變量，用于渲染模板，需要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 多項(xiàng)目全棧腳手架"
          oridata.root = "123"
          ctx.redirect("/docs")
          // return oridata
        }, 
        post: function name(ctx) {
          return oridata
        }
      }
    }

dist
前端靜態(tài)資源編譯后的文件存放位置

1.0.3/
版本目錄，根據(jù)aotoo.config中的版本信息

* dev/  
  該項(xiàng)目處于開(kāi)發(fā)模式，生產(chǎn)模式使用/pro目錄
    * html/  
      html模板編譯輸出目錄
    * mapfile.json  
      資源映射文件  

# 開(kāi)發(fā)編譯，并啟動(dòng)前端
$ aotoo dev newProject

# 如果需要node端(該命令一次生效，終生有效，且后續(xù)啟動(dòng)時(shí)不需要參數(shù) `--server`)
# 開(kāi)發(fā)編譯，并啟動(dòng)Node端
$ aotoo dev newProject --server

# 生產(chǎn)編譯
$ aotoo build newProject

# 只啟動(dòng)node端(編譯完成)
$ aotoo start newProject

# 帶環(huán)境編譯或啟動(dòng)
$ aotoo start newProject --config env_test

生產(chǎn)環(huán)境支持多開(kāi)項(xiàng)目，且會(huì)為每個(gè)項(xiàng)目自動(dòng)分配端口(未指定)，開(kāi)發(fā)模式則受制于nodemon對(duì)多開(kāi)不友好的功能，會(huì)報(bào)錯(cuò)(pm2替代就可以)，啟動(dòng)多開(kāi)也很簡(jiǎn)單，可以參考上面aotoo.config.js的配置，
將startup: false設(shè)置為 startup: true就好了，啟動(dòng)時(shí)不用指定項(xiàng)目名稱，如`
aotoo dev，或者指定一組項(xiàng)目名稱，如：aotoo dev --name aaa --name bbb`

今天對(duì)aotoo-hub有一個(gè)大概的介紹，有問(wèn)題請(qǐng)?zhí)醝ssue，鑒于本人有社交懶癌，問(wèn)題不一定能及時(shí)回答，平時(shí)畢竟工作有點(diǎn)多.