@cosmic-design/san

Cosmic Design Components

一个基于 San 开发的 UI 组件库

Feature

• 完全开放的组件样式定制能力
• 支持多端：移动端、PC端
• 全面拥抱 TypeScript

使用组件

目前组件库提供了多种模块化规范，及全部打包和按需引入分包的编译产物，你可以结合适合的业务场景选择。

编译配置

全局提供 san 的依赖即可，编译选择 vite / rollup 等工具即可，无特别配置，可参考。

example/vite.config.js

引入组件

组件库导出项目

/** package.json */
{
  "exports": {
    "./css/*": "./dist/css/*",
    /** for @cosmic-design/san/css/Button.css  */
    /** for @cosmic-design/san/css/style.css  */
    /** for @cosmic-design/san/css/global.css  */

    "./*": {
      "import": "./dist/esm/*/index.js",
      "require": "./dist/cjs/*/index.js"
    },
    /** for @cosmic-design/san/Button  */

    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js"
    }
    /** for @cosmic-design/san  */
  },
}

/dist
├── css
│   ├── style.css           # 所有样式，适用于全部引入，包括组件和global
|   ├── global.css          # 全局样式，适用于按需引入
|   ├── Button.css          # 组件样式，适用于按需引入
├── esm
│   ├── index.js            # 组件esm bundle，适用于 esm/ts + 全部引入
│   ├── index.d.ts          # 所有组件类型
│   ├── Button
│   │   ├── index.js        # 组件esm， 适用于 esm/ts + 按需引入
│   │   ├── index.d.ts      # 所有组件类型
├── cjs
│   ├── index.js            # 组件commonJS bundle，适用于打包引入
│   ├── index.d.ts          # 所有组件类型
│   ├── Button
│   │   ├── index.js        # 组件commonJS， 适用于按需引入
│   │   ├── index.d.ts      # 组件类型
├── umd
│   ├── index.js            # 组件umd bundle，适用于 umd/amd + 打包引入
│   ├── Button.js           # 分组件umd，适用于 umd/amd + 按需引入

模块化及打包

Demo

• esm-bundle
• esm-sep
• commonjs-sep
• umd-bundle
• umd-sep

ESM

• 全部引入

import '@cosmic-design/san/css/style.css';
import { Button } from '@cosmic-design/san';

• 按需引入

import '@cosmic-design/san/css/global.css'; // in global js

import '@cosmic-design/san/css/Button.css';
import Button from '@cosmic-design/san/Button';

CMD

• 全部引入 略

• 按需引入

/** CommonJS SSR **/
const Button = require('@cosmic-design/san/Button');

UMD/AMD

• AMD 配置

require.config({
    packages: [
        {
            name: '@cosmic-design/san',
            location: '/@cosmic-design/san/dist/es5',
            main: 'index.js'
        },
    ]
});

• 全部引入

<link rel="stylesheet" type="text/css" href="/@cosmic-design/san/dist/css/style.css"/>

require(['@cosmic-design/san', 'san'], function({ Button }, { Component }) {

});

• 按需引入

<link rel="stylesheet" type="text/css" href="/@cosmic-design/san/dist/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/@cosmic-design/san/dist/css/Button.css"/>

require(['@cosmic-design/san/Button', 'san'], function(Button, { Component }) {

});

组件开发

目录结构

• 组件代码目录：./packages/components
• 开发参考Grid/Button组件

组件预览

• 本地预览环境目录：./site
• 预览命令：npm run build
• 多端预览适配及实现方案

组件单元测试

使用 san-test-utils 进行单元测试

提交代码

请使用npm run commit，不要使用git commit