f2e-server

基于Node.js的前端开发服务器
  1. 开发背景
  2. 竞品分析
  3. 基本功能
  4. 实现原理
  5. 中间件
  6. 在线PPT模板开发

开发背景

前端开发基本需求 & 日渐复杂的开发场景
  • 基本的静态文件服务器 Server
  • 自动刷新 livereload
  • 代码转换校验 compile & lint
    • CoffeeScript/ES-Next/TypeScript/JSX => JS
    • LESS/SASS => CSS
    • Jade(Pug)/Template => HTML
    • ...
  • 代理接口调试 Proxy
  • 文件压缩合并优化 Uglify Minify Bundle
  • ...

竞品分析

前端开发环境变化历程的缩影
  1. YUI Compressor
    Java开发的老牌资源压缩工具，一度成为jQuery之类的一等JS库默认压缩工具
  2. NPM Scripts
    通过alias方式执行shell命令，依赖另外的shell满足基本构建需求
  3. Grunt
    任务管理模式，开始基于Nodejs完成服务端构建任务
  4. Gulp
    任务管理模式，支持了文件读写监听等模式、支持流式处理资源
  5. FIS3
    混合资源输入输出模式，基本上开箱即用、默认集成大量常用前端工具
  6. Webpack
    模块化打包工具，所有资源都通过JS模块化bundle
  7. Rollup
    ES模块打包工具 Tree Shaking and Scope Hoisting

f2e-server 更接近 FIS3 的方式

基本功能

f2e-server 核心功能表
  • 基础服务器
  • 资源压缩
  • 自动刷新
  • ES、LESS、EJS 编译支持
  • include belong 支持
  • 代理
  • 扩展支持

实现原理 - 输入

资源加载到内存: 文件过滤和文件监听需要在资源加载流程中处理

f2e-build-into.png

实现原理 - 输出

资源资源存储到文件系统

f2e-build-out.png

实现原理 - HTTP

HTTP-Server 对接持久化接口 & 新增接口

f2e-build-http.png

实现原理 - Middleware

中间件模式: 中间件管理器实现各种接口的 链式(Promise链式)封装 onGet/onSet/buildFilter/outputFilter 同时支持build模式

f2e-middle-base.png f2e-middle-other.png

内置中间件 - include

  1. 基本思路: onSet 接口修改文本替换
  2. 注意事项: buildWatcher 如果是被引用的资源也需要重新构建 母文件

f2e-middle-include-1.png f2e-middle-include-2.png

内置中间件 - livereload

  1. 只在HTTP-Server 开发环境下可用、不得设置 onSet & onGet
  2. 使用 ServerSentEvent 支持。 实时性强、单向推送、适合livereload场景。

f2e-middle-livereload.png

其他中间件 - f2e-middleware

其他中间件
  1. babel 【内置】Babel 编译支持
  2. less 【内置】Less 编译支持
  3. template 【安装依赖】Lodash template 实现
  4. markdown marked 封装
  5. proxy 基于 request 实现代理
  6. qrcode 一个简单的字符串转二维码图片的接口实现
  7. typescript TypeScript 单文件编译实现
  8. sass Sass 编译支持
  9. rollup Rollup 支持
  10. webpack Webpack
  11. authority 公司内部使用的轻量级 权限验证、权限-角色-用户管理 通用组件
  12. markdown-ppt MarkdownPPT 基于marked简单在线PPT演示

MarkdownPPT

MarkdownPPT 当前在线PPT实现原理

f2e-middle-markdown-ppt.png