爬虫（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包的目录结构

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

• 清空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目录

  $ npm run pub

检索 & 分享

Web端组件

http://component.sankuai.com/ （内网）

移动端组件

iOS

Android

为什么需要组件中心客户端？

思路一：

对于开发者，需要对组件进行截图（gif动态图），并自行生成出Html页面及代码。

• 优点
  • 简单粗暴易实现
• 缺点
  • 展现出来的质量由工程师心情决定
  • 每次更新都可能需要重新截一次或多次图
  • 没有交互，用户无法直接体验

思路二：

• 开发者采用标准脚手架开发
• 在示例文件夹下有对应的示例入口文件
• 收录后，对每一个示例均会生成一个带二维码的Html页面
• 用户可以根据这个二维码来查看示例

• 用户在手机上安装"组件中心App"
• 打开App，扫描页面上方二维码
• 组件中心App加载二维码对应的 jsBundle
• 执行并渲染出页面
• 此时用户可以在手机上体验这个组件示例