年底了, 开源一套我们的大前端架构 aotoo-hub, 小伙伴们都用得很爽的.
GitHub https://github.com/webkixi/aotoo-hub -- 听说 star 的人明年会发财
文档 http://www.agzgz.com
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 OS X
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, 鉴于本人有社交懒癌, 问题不一定能及时回答, 平时毕竟工作有点多.
来源: https://juejin.im/post/5c1e02036fb9a049ee80716e