Skip to content

Home

Jump to bottom
Furic Zhao edited this page Aug 17, 2018 · 21 revisions

塞伯坦（Cybertron）- CYB

CYB 是面向前端模块化工程的构建工具。主要目的是帮助开发者统一前端开发模式和项目开发结构，提高功能扩展和降低维护成本，自动化前端工作流，提高开发效率和开发质量。

项目背景

  • 很多团队开发模式落后、复杂项目功能迭代及代码维护困难。
  • 开发方案繁杂、标准不统一，团队协作、项目交接成本较高。
  • 大量机械重复的web开发工作流程，降低开发效率。
  • 业务繁重，大多团队无暇搭建多种类型项目通用的高效开发方案。
  • 现有构建工具在功能、扩展、适用性及常用开发场景解决方案落伍。

优势及目标

  • 借助ES6/ES7特性，统一前端模块化开发标准、提高扩展和维护性
  • 规范各种类型项目的开发结构、降低维护及沟通成本。
  • 自动化机械重复的前端开发工作流程、提高研发效率。
  • 集成业界先进的常用开发场景解决方案，以适用各种类型的项目开发。
  • 助力项目开发的技术选型，让团队研发人员更专注于业务逻辑的快速实现。

核心特性

完美支持三大技术平台

CYB支持快速创建基于Vue、React、jQuery技术平台的项目，并且很容易与其它第三方框架库集成，借助ES6/ES7的行业标准，统一开发模式和项目开发结构，简化前端开发的工作流程，帮助我们在瞬息万变、浩瀚无边的技术选型中恣意的扬帆远航。

Vue

CYB 支持Vue单文件组件形式的高级开发模式，结合Vue渐进式的特性和强大的模板视图层，可以最小成本改造旧应用或快速创建各种类型的新项目，加之Vue生态系统的支持，可以快速开发复杂的高性能单页或多页WEB应用程序。

React

CYB 支持React组件化开发模式，结合JSX赋予开发者许多的编程能力，依托Facebook的各种工具和框架，可以开发更加庞大的大型应用程序，加之同时适用于web和原生体验的React Native，可以大幅提高研发效率和降低开发成本。

jQuery

CYB 支持使用ES6/ES7的标准特性开发jQuery项目，jQuery庞大生态圈的众多功能强大的插件依然能够帮助我们大幅的提高研发效率、开发高质量的WEB应用。CYB可以帮助我们步入新时代的同时，继续做一个优雅高效的“jQuery美男子”。

功能模块化

CYB 支持使用ES6 Module来组织前端代码，支持使用ES5/ES6/ES7等标准特性开发项目，通过Babel编译完美运行在浏览器中。可以整合如Vue、React等MVVM框架实现单文件组件形式的高效开发体验。

模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能，所有的模块再进行统一的拼装和加载，成为一个整体，完成整个系统所要求的功能。 有关模块化的更多知识请参考：【https://github.com/fouber/blog】【https://www.zhihu.com/question/37011441】

结构规范化

CYB 将复杂的系统划分为功能页面(或组件)，将复杂的页面(或组件)划分为若干个模块，并且都有统一的文件结构，大大提高项目的功能扩展能力，以及项目后续的迭代维护成本。

统一项目开发结构

.
├── cyb.config.js
├── package.json
└── src
    ├── static
    │   ├── fonts
    │   ├── images
    │   └── styles
    │       ├── page1.scss
    │       └── page2.scss
    └── views
        ├── page1
        │   ├── index.html
        │   ├── index.js
        │   ├── service.js
        │   └── module
        │         ├── mod1
        │         │    └── index.js
        │         └── mod2
        │              └── index.js
        ├── page2
        │   ├── index.html
        │   ├── index.js
        │   └── module
        │         ├── mod1
        │         │    ├── index.js
        │         │    └── service.js
        │         └── mod2
        │              └── index.js
        │              └── service.js
        └── public
            └── module

为了提高项目的功能扩展和可维护性，以上是CYB建议的文件开发结构，每个项目团队可以根据团队情况，自行规划统一的详细的目录结构。

开发自动化

CYB 集成了大量应用场景的前端工作流程和业界先进的解决方案，并且任何机械的重复性的工作都交给CYB自动化完成，极大的提高项目的研发效率。

  • 自动化创建统一结构化项目、及统一结构化的项目页面。
  • 自动化搭建本地研发环境，快速响应文件更改并自动刷新浏览器。
  • 自动化在开发/测试过程中同步浏览器中滚动页面、点击等行为到其他浏览器和设备中。
  • 自动化编译ES6/ES7或CommonJS标准的JS代码，并生成source map便于浏览器端调试。
  • 自动化编译Sass/Less/Stylus => CSS文件。
  • 自动化使用Autoprefixer添加CSS3的各种浏览器前缀。
  • 自动化压缩JS、CSS、HTML等静态资源。
  • 自动化深度无损压缩PNG/JPG/JPEG/GIF图片。
  • 自动化提取/合并第三方框架库(vendor)、项目公共代码(common)
  • 自动化根据配置自定义合并前端JS、CSS文件。
  • 自动化注入编译后的JS、CSS文件到HTML页面。
  • 自动化ESlint编码规范、代码检查及代码测试。
  • 自动化生成所有静态资源MD5版本号。
  • 自动化添加所有静态资源CDN地址。
  • 自动化搭建用于测试上线代码的多终端测试环境。
  • 自动化通过SFTP部署上线、或部署静态资源。
  • 自动化通过Mock方式构建随机数据，模拟研发和上线的数据环境。
  • 自动化SVG高清图片/图标解决方案。
  • 自动化移动端REM等比适配解决方案。
  • 自动化智能WebP解决方案。
  • 自动化页面中使用特殊字体解决方案。

License

MIT

Copyright (c) 2018, 京东商城-基础平台研发部-CYB前端小组

Clone this wiki locally