@delonix/cli v0.1.2

@delonix/cli

开箱即用的 Vue3组件库 快速成型工具，提供了一系列命令和工具去解决组件库开发上的问题

特性

• 1.开箱即用的组件库开发环境
• 2.开箱即用的组件库编译工具，支持导出 esm 和 umd 两种模块代码
• 3.基于配置文件的组件库文档站点,支持百度统计和主题定制
• 4.支持 单文件组件(sfc) 和 tsx,jsx 两种风格的组件库编写风格
• 5.开箱即用的代码检查工具
• 6.开箱即用的单元测试工具
• 7.开箱即用的代码发布工具,发布到 npm 和 github, 并自动生成更新日志
• 8.支持 Typescript
• 9.支持 暗黑模式
• 10.基于 pnpm

快速开始

@delonix/cli 内置了 单文件组件(sfc) 和 tsx, jsx 两种风格的组件库项目模板，可以通过 gen 命令直接生成。 帮助用户直接进入组件本身的开发，推荐使用 pnpm 作为包管理工具。

# 安装命令行工具
pnpm add @delonix/cli -g
# 使用 gen 命令生成项目
delonix-cli gen 项目名
cd 项目名
pnpm install
pnpm dev

然后通过简单修改一些组件库模板的基础信息，就可以开始组件库的开发了

高级定制

配置文件

项目根目录下的 delonix.config.js 用来管理整个组件库项目的具体细节

模块适配对象

一些外部依赖可能需要进行模块语法的适配，以达到可以正确编译到 commonjs 和 esmodule 的目的，例如 dayjs 的 esmodule 写法是

import dayjs from 'dayjs/esm'

而为了构建 commonjs 时的写法是

import * as dayjs from 'dayjs'

在项目中我们拥抱 esmodule 模块使用第一种写法，并做如下配置进行适配

// delonix.config.js
module.exports = {
  moduleCompatible: {
    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
  }
}

SiteThemes

主题变量相关，由于默认的主题变量可能时常修改，以 delonix 官方文档的主题为准

SiteHighlight

代码片段高亮，基于highlight.js

SiteAnalysis

统计埋点相关

SitePC, SiteMobile

文档结构部分相关，示例配置如下

module.exports = {
  pc: {
    redirect: '/home',
    title: {
      'zh-CN': '一个组件库',
    },
    header: {
      darkMode: null,
      i18n: null,
      github: 'https://github.com/yutiy/delonix',
    },
    menu: [
      {
        text: {
          'zh-CN': '开发指南',
        },
        // 侧边栏菜单目录
        type: 1,
      },
      {
        text: {
          'zh-CN': '基本介绍',
        },
        doc: 'home',
        // 索引项目根目录下的md文档
        type: 3,
      },
      {
        text: {
          'zh-CN': '基础组件',
        },
        type: 1,
      },
      {
        text: {
          'zh-CN': 'Button 按钮',
        },
        doc: 'button',
        // 索引组件根目录下的md文档
        type: 2,
      },
    ],
  },
  mobile: {
    redirect: '/home',
    title: {
      'zh-CN': '一个组件库',
    },
    header: {
      darkMode: null,
      i18n: null,
      github: 'https://github.com/yutiy/delonix',
    },
  },
}

命令相关

启动开发服务器

delonix-cli dev

构建文档站点

delonix-cli build-site

预览文档站点

delonix-cli preview

构建组件库代码

delonix-cli build

执行所有的单元测试

delonix-cli test

以 watch 模式执行单元测试

delonix-cli test -w
or
delonix-cli test -wa

检查代码

delonix-cli lint

校验提交信息

delonix-cli commit-lint

生成更新日志

delonix-cli changelog

发布组件库

delonix-cli release

生成一个项目模板

delonix-cli gen <projectName>

babel

对 babel 进行配置，首先在 package.json 中指定目标浏览器

{
  "browserslist": [
    "Chrome >= 51",
    "iOS >= 10"
  ]
}

创建 babel.config,js

// babel.config.js
module.exports = {
  presets: [
    [
      '@delonix/cli/preset',
      {
        loose: process.env.NODE_ENV === 'compile',
      },
    ],
  ],
}

git 和 npm

git-hook

husky，lint-staged 配合 eslint，stylelint，delonix-cli commit-lint 做commit前的检查，package.json 配置如下

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{ts,tsx,js,vue,less}": "prettier --write",
    "*.{ts,tsx,js,vue}": "eslint --fix",
    "*.{vue,css,less}": "stylelint --fix"
  },
  "eslintConfig": {
    "root": true,
    "ignorePatterns": [
      "es/**",
      "umd/**",
      "site/**",
      "public/**",
      "src/*/__tests__/**",
      ".delonix/**"
    ],
    "extends": [
      "@delonix"
    ]
  },
  "stylelint": {
    "extends": [
      "@delonix/stylelint-config"
    ],
    "ignoreFiles": [
      "es/**",
      "umd/**",
      "site/**",
      "coverage/**",
      "public/**",
      "highlight/**"
    ]
  }
}

挂载钩子

npx simple-git-hooks

创建 .prettierignore

// .prettierignore
coverage/**
es/**
umd/**
site/**
public/**
src/*/__tests__/**
*.md

typescript

创建 tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "downlevelIteration": true,
    "declaration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowJs": true,
    "lib": ["esnext", "dom"],
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve"
  }
}

发布前注意

1. npm 的仓库源必须指向 npm 官方镜像
2. 执行 npm login 进行登录

Contributors