aotoo-hub，一体式大前端架构

共计 5292 个字符，预计需要花费 14 分钟才能阅读完成。

年底了，开源一套我们的大前端架构 aotoo-hub，小伙伴们都用得很爽的。
GITHUB — 听说 star 的人明年会发财 文档
aotoo-hub 是一套正式上线的大前端解决方案。迭代的这 2 年多的时间，从 webpack- 1 熬到了 webpack-4，从纯前端脚手架到融合 node 端的整体方案，从繁复到精简，重构的次数不要太多。简单、易用、易部署的一体化大前端开发体验是 aotoo-hub 始终的追求，我们不是在重构，就是在重构的路上(保持一致性)。
aotoo-hub 是一套前端、node 端彼此相亲相爱不分离，你中有我，我中有你的大前端解决方案。前端负责静态资源编译与分享，node 端负责服务、路由与渲染，模板则起到桥接两端的作用(结构、样式、渲染)，最终 http 服务将渲染完成的模板投送到客户端浏览器上。
完整的大前端方案需要解决前端、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

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

三、启动项目
单项目启动
# 开发编译，并启动前端
$ 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，鉴于本人有社交懒癌，问题不一定能及时回答，平时毕竟工作有点多.