node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

zent-kit

zent-kit

组件库开发脚手架

NPM

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": {
      ...
  }
  ...
}