youzan / zent-kit

[DEPRACATED] React 组件库开发脚手架

[DEPRECATED]zent-kit

zent-kit is no longer supported, please consider other tools. zent-kit 不维护了，请使用别的工具。

组件库开发脚手架

Install

npm install zent-kit -g

初始化组件

zent-kit init <your component name>

初始化一个组件目录，组件的模版从zent-seed下载。

开发模式

zent-kit dev

创建一个本地服务器，同时watch本地代码修改。

测试

zent-kit test

集成了Jest测试框架，用来跑组件的单元测试。

打包

zent-kit prepublish

打包src目录下的文件，babel转码的文件会输出到lib目录下，同时dist目录下会生成一个包含所有代码的UMD模块文件。

File Structure

// 源文件(由开发者编写)
-- src
    // 组件源文件目录
-- assets
    // sass源文件目录
-- examples
    // demo文件目录
-- package.json

// 生成文件(由zent-kit生成)
-- README.md
    // 由package.json和src下文件生成
-- lib
    // 经过babel转码的组件文件以及编译过的css
-- dist
    // 经过webpack打包的，符合UMD规范的组件文件

Style

• 考虑到让用户更加容易自定义样式，尽量不要在组件源文件当中import样式文件，应该在examples目录下的文件中进行import
• 用户如果需要使用组件样式，可以直接引入我们在assets文件夹下的sass源文件，或者lib文件夹下编译完成的css文件

README

README文件的规范包含：

-- 描述
    // 必选项：简单描述包特性(写在package.json中)
-- 使用场景
    // 可选项：简单描述组件场景(写在src下文件中)
-- tips
    // 可选项：一些简单的设计**的描述,或者特殊接口的介绍(写在src下文件中)
-- API
    // 必选项：介绍本组件的使用方式(写在src下文件中)

package.json

如果不使用zent-kit init，自行编写的package.json需参考以下代码

{
  ...
  "name": "组件名称",
  "description": "这是一个React组件的描述",
  "main": "./lib/index.js",
  "scripts": {
    "dev": "zent-kit dev",
    "lint": "eslint ./src",
    "prepublish": "npm run lint && zent-kit prepublish"
  },
  "files": [
    "src/",
    "assets/",
    "examples/",
    "lib/",
    "dist/"
  ],
  "dependencies": {
      ...
  },
  "devDependencies": {
      ...
  }
  ...
}