美团前端组件中心

liyang24@meituan

标准化UI组件开发，统一管理、索引所有组件

背景

美团有300+的纯前端童鞋

分布在北京、上海 & 厦门

以业务区分做的话，有主站、i版主站、各种商家后台、酒店、外卖、猫眼电影等等

（基本每个业务线都有个专属的前端团队）

・・・

前端View层技术栈

React & Angular (Vue.js、jQuery ...)
webpack、browserify、reducejs
grunt、gulp
babel

前端童鞋纯组件化项目开发的流程

基础组件

业务组件

Web Pages

找、选
- (Bootstrap、ant.design、material-ui)
自己开发

如何发现已有组件，避免重复造轮子？（检索）
- 怎么评估组件质量？

如何实现多个项目复用某个项目的组件？（规范）
- 发布的npm包结构不完全统一
- 组件涉及的静态资源引用方式差异

如何脱离具体业务快速开发基础组件？ （工具）

怎么分享自己的组件？
- 让更多的人知晓 & 使用
- bug反馈 & 共同开发

面临的问题

HOW TO DO

建设一个 component 的聚合中心
规范组件开发流程，提供周边工具
- generator：快速创建一个项目
- devserver：快速开发及预览组件及示例
- compile：编译es6/7及scss/less/postcss和examples
- test：友好的测试体验
- pub：发布过程流程化
组件预览
- 避免枯燥无味的Readme文档
- 直观的静态Html预览Examples页面
- 提供移动版App（支持H5、React Native组件）
开发统一风格的组件集
- 支持新项目快速采用
- 避免重复造轮子，降低筛选成本

爬虫服务：规范约定

从内网（npm.sankuai.com）、外网(npmjs.com)抓取符合条件的组件

组件预览：检索 & 分享

Web站点：components.sankuai.com

移动App：iOS & Android

开发工具

@mtfe/rt (rt-core)

爬虫（Crawler）

收录规则

Web 组件（React、Angular等）
React Native 组件（JavaScript）

package.json
- keywords: mt-component
npm 目录结构解析
- 有 /build/examples 目录
- 且对应着standalone的html示例

Web 组件（React、Angular等）

package.json
- keywords: mt-component
- examples (数组):
  - 标识react-native组件的示例入口地址
npm 目录结构解析
- examples/***.[ios|android].js 演示文件
- 要求：文件中的registerComponent的名字应为packageName-exampleName

纯JavaScript实现的React Native 组件


├── README.md
├── examples     # 示例目录
│     ├── index.android.js    # android 示例源代码
│     └── index.ios.js        #  ios示例源代码
└──────── index.js    # 组件源码


  {
    "keywords": ["mt-component"],     # 关键字
    "examples": [
      "examples/index.android.js",   # 指定example所在位置
      "examples/index.ios.js"
    ]
  }

结构示例

package.json 中应该包含


── web-component
    ├── ChangeLog.md
    ├── README.md
    ├── assets                             # 組件依賴的靜態資源（構建後）
    │  ├── index.css
    │  └── img.png  
    ├── build                              # 供 Component Hub使用（演示Demo）
    │  └── examples
    │       ├── demo.html
    │       └── demo-advance.html
    ├── lib                                # 構建後的JavaScript源碼（組件）
    │  └── index.js
    ├── src                                # 源碼（提供es6/7源碼）
    │  ├── index.js    
    │  └── assets                         # 欲構建的CSS樣式資源
    │       └── index.(css|scss|less)

发布npm包的目录结构

满足规则的组件均会定期被抓取& 录入到组件中心仓库中 ...

如何开发满足收录规则的组件？

@mtfe/generator-fe-component
@mtfe/turbo-component
@mtfe/bbq
@mtfe/rt

开发脚手架

@mtfe/rt

(Rabbit Tools)用于辅助用户开发标准组件的cli工具


    npm --registry=http://r.npm.sankuai.com i @mtfe/rt@latest -g

安装

创建一个组件项目

 
  $ rt init simple-component  #以simple-component为名创建一个项目

  # 回答问题：组件类型（React、Angular等）、CSS预处理器选择（sass|less）等

  # 创建simple-component文件夹 & 初始化项目文件

  # 安装npm依赖

  $ cd simple-component && npm start # 启动开发服务器

  # enjoy 开发过程吧~


── simple-component
    ├── ChangeLog.md
    ├── README.md
    ├── assets                             # 組件依賴的靜態資源（構建後）
    │  ├── index.css
    │  └── img.png  
    ├── examples                           # 組件演示的源碼
    │  ├── demo.js   
    │  ├── demo-with-bootstrap.js    
    │  └── demo-with-bootstrap.html
    ├── build                              # 供 Component Hub使用（演示Demo）
    │  └── examples
    │       ├── demo.html
    │       └── demo-advance.html
    ├── lib                                # 構建後的JavaScript源碼（組件）
    │  └── index.js
    ├── src                                # 源碼  
    │  ├── index.js                       # es6/7 語法糖
    │  └── assets                         # 欲構建的CSS樣式資源
    │       └── index.(css|scss|less)
    ├── test.setup.js                      # 測試環境配置
    ├── test                               # 組件測試
    │  └── index.spec.js

项目结构（React Web 举例）

如何开发组件 & 写示例？

1. 启动开发服务器：npm start

3. 修改src/examples目录下JavaScript等文件

src：组件源码
examples：示例源码

2. 打开 http://localhost:3001/ （查看示例）

代码热替换

你修改任何文件的同时立刻能看到效果

无需重启开发服务器 & 刷新浏览器页面

如何写样式？

目前支持四种风格的样式书写，分别为: 纯css, less + autoprefixer, sass, postcss

样式代码在src/assets下
执行gulp css将编译css代码到/assets目录下

如何写测试？

test/*目录下的任意文件都是测试文件

mocha 做测试框架
jsdom 为node提供dom环境
sinon 做为spy工具

如何发布组件？

首先commit掉你的所有改动，保证工作区干净
更新组件版本：npm version [major | minor | patch | ...]
构建&发布： npm run pub

清空lib/**目录和build/**目录
将src/**目录js文件（ES6/7）`翻译`到lib/**目录中
将src/assets/*目录相关css编译后复制到assets/**目录中
构建examples目录示例到build/examples目录下，每个js文件会对应生成一个独立的html页面
npm publish
加上git的tag, 并push到远程分支
- git tag ${version}
- git push origin ${version}:${version}
- git push origin master:master
执行清理工作删除/build、 /lib、 /assets目录