Natural Pacifist Manatees

    @yzfe/cli
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    伊智 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; // 主色

    Keywords

    none

    Install

    npm i @yzfe/cli

    DownloadsWeekly Downloads

    12

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    45.5 kB

    Total Files

    19

    Last publish

    Collaborators

    • allenice
    • allenmo
    • vfasky