@yzfe/cli

伊智 cli 工具

安装

yarn add @yzfe/cli --dev

使用

直接使用

npx yzcli add src/components/HelloWorld -c '这是备注'

npm script

{
    "scripts": {
        "cli": "yzcli"
    }
}

yarn cli add src/components/HelloWorld -c '这是备注'

命令

add: 使用预设模板新建文件

可用参数, 使用 yarn cli add -h 查看

添加模板文件到项目中

选项：
  --version, -v  显示版本号
  --help, -h
  --comment, -c  注释
  --config       cli 配置文件 [默认值: "项目目录中的 .yzcli.js 文件"]
  --type, -t     模板类型, 可选的值是模板目录中的文件夹名称[默认值: "component"]

# 默认使用 component 模板
yarn cli add src/components/HelloWorld -c '这是备注'

# 使用 store 模板, 单文件的需要写文件后缀名
yarn cli add src/store/modules/member.ts -c '会员 store' -t store

默认模板请看 node_modules/@yzfe/cli/default/tpl

tpl
    - component
        - {{FileName}}.scss.txt
        - {{FileName}}.ts.txt
        - {{FileName}}.vue.txt
        - index.ts.txt
    - store
        - {{fileName}}.txt

自定义模板

如果预设的模板不能满足需求，可以使用自定义模板, 需要在项目目录中新建 .yzcli.js 来配置, 模板文件使用 mustache.js 生成的。

文件名也是使用 mustache.js 生成的

module.exports = {
    tplPath: '自定义模板存放的目录',
    mustache: {
        view: data => {
            // 添加一些自定义模板使用的数据
            return data
        }
    },
    /** 文件生成配置 */
    meta: {
        模板名称: {
            /** prompt 提示用户输入, 使用 inquirer: https://github.com/SBoudrias/Inquirer.js/ */
            // prompts?: inquirer.Questions
            prompts: [
                {
                    type: 'input',
                    name: 'name',
                    message: '请输入名称'
                }
            ],
            /** 根据 prompts 过滤文件 */
            // filter?: (filename: string, data: DataView) => boolean
            filter: (filename, data) => {
                if (/^views\/About/.test(filename)) {
                    if (data.answer.name === 'vue-app') {
                        return false
                    }
                }

                return true
            }
        }
    }
}

模板中能使用的数据

export interface DataView extends Types.PlainObject {
    /** 模板类型 （其实就是模板目录名称） */
    type: string
    /** 文件后缀名 */
    extName: string
    /** 文件路径 */
    filePath: string
    /** 文件名 */
    fileName: string
    /** 第一个字母大写的文件名 */
    FileName: string
    /** 生成路径 */
    distFilePath: string
    /** 作者 */
    author: string
    /** 当前项目版本 */
    version: string
    /** 当前时间 */
    date: string
    /** prompts 答案 */
    answer?: Types.PlainObject
    // .... 全部命令行传的参数
}

# 命令行传的参数都可以在模板中使用
yarn cli add src/components/HelloWorld -t member-base --custom '任意的参数都可以'

snippet: 生成代码片段

# 查看选项
yarn cli snippet -h
# 默认生成 sass-var, 将 src/style/bass/var.scss 生成 snippet 到 .vscode/sass-var.code-snippets
yarn cli snippet

# 生成 css 变量的 snippet, 默认生成路径：.vscode/css-var.code-snippets, 如果需要编译 sass， 请加上 -c 参数
yarn cli snippet --type css-var -s 'css 变量文件' -t '生成路径'

# 指定变量文件和生成路径
yarn cli snippet --type -s '变量文件' -t '生成路径'

变量注释推荐写到变量同一行，这样可以生成到 snippet 中

// sass
$color-primary: #2affff; // 主色

// css
--color-primary: #2affff; // 主色