仓库说明

该仓库为前端架构师级别的一些项目实战。

项目

实战一 >> project_1

(一）主要要求

• 使用gulp搭建自动化构建流程，监控并编译文件变化
• 使用koa2搭建Nodejs开发环境
• 使用mvc开发模式，并尝试细化
• 检测和区分开发环境/上线环境，并对上线环境进行流清洗
• 做容错，使用腾讯公益404链接及打印错误日志
• 使用js和jsx检查工具对js和jsx文件进行检查
• 生成开发文档

(二）工具/技术

• gulp >> 自动化构建工具
• gulp-babel >> es6编译工具babel
• gulp-watch >> 文件变化监视工具
• gulp-rollup + rollup-plugin-replace >> 流清洗
• gulp-eslint >> js和jsx检查工具
• koa2 >> Nodejs开发框架
• koa-simple-router >> 路由
• koa-swig >> 当前主流的模板引擎swig
• koa-static >> 静态文件处理器
• cross-env >> 环境监测工具
• lodash >> 常见数据类型的处理工具
• log4js >> 打印日志
• jsdoc >> 文档生成工具

实战二 >> project_2

一、主要要求

1)前端

• 使用webpack监控并打包编译前端文件
• 使用typescript编写前端
• 使用postcss进行css编译
• 组件化开发模式
• 使用happypack、optimization等加速webpack编译
• 代码压缩
• 能满足多页与单页需求

2）后台

• 使用gulp搭建自动化构建流程，监控并编译后端文件变化
• 使用koa2搭建Nodejs开发环境
• 使用依赖注入、基于注解的注入
• 使用mvc开发模式，并尝试细化
• 检测和区分开发环境/上线环境，并对上线环境进行流清洗
• 做容错，使用腾讯公益404链接及打印错误日志

3）其他

• 使用livereload自动刷新
• 使用js和jsx检查工具对js和jsx文件进行检查
• 生成开发文档

(二）工具/技术

1）前端

• typescript >> 主流框架
• postcss >> 目前最热的CSS代码转换工具
• webpack + webpack-cli >> 主流的自动化构建工具
• happypack >> 加速webpack编译工具
• reflect-metadata >> 映射工具
• inversify >> 依赖注入工具
• html-webpack-plugin >> 简化Html创建的工具
• extract-text-webpack-plugin >> 文本提取工具
• webpack-livereload-plugin >> 自动刷新工具
• html-minifier >> 文件压缩工具

2）后台

• gulp >> 自动化构建工具
• gulp-babel >> es6编译工具babel
• gulp-watch >> 文件变化监视工具
• gulp-rollup + rollup-plugin-replace >> 流清洗
• koa2 >> Nodejs开发框架
• koa-simple-router >> 路由
• koa-swig >> 当前主流的模板引擎swig
• koa-static >> 静态文件处理器
• lodash >> 常见数据类型的处理工具

3）其它

• gulp-eslint >> js和jsx检查工具
• yargs-parser >> 命令行参数解析工具
• cross-env >> 环境监测工具
• log4js >> 打印日志
• jsdoc >> 文档生成工具

本仓库最新更新日期：

2018年11月