简体中文 | English

CR

一个用于规范化生成模块文件的命令行工具

全局的命令行工具 CR

📦 安装

npm i -g @xiao-edu/cr

// 或者使用yarn来安装
yarn add -g @xiao-edu/cr

🦄 使用

cr --help                -- 查看帮助信息
cr --version             -- 查看版本信息

1. cr

用于规范化生成任意文件的命令行工具

cr 是一个兼容多平台的文件操作的命令行工具，它可以基于 cr.template.js 来生成任意文件。

可以保证多人开发 vue 或 react 应用时，大家产生的 views、components 下的页面或组件，符合一致的组件规范。

同时解放了双手，避免一个个的去创建文件并编辑一些重复性的代码。

cr 可以保证任意文件的规范，包括 markdown, scss, txt, tsx, vue 等文本类文件，它也同样适用于创建 rar, zip, jpeg, png 等二进制文件。

它也可以用来下载并更新文件，上传文件，批量生成文件夹、甚至是创建整个项目或者小型爬虫。

🔋 特性

基于 cr.template.js，可以任意的自定义文件模板，来生成任意数量的符合代码规范的文件
跨平台兼容 Linux 的 shell 的文件操作的命令：如 ls、touch、mkdir、rm、cp、mv、which 等前面加上 cr 即可使用，如 cr ls -a ./bin

文件操作

平常也可以用 cr 来作文件操作，cr 是跨平台兼容 shell 的，你可以在 windows 下运行，如：

cr ls -a ./bin

# 类似于shell中的touch，但它可以递归创建文件夹
cr prettier.config.js .env eslint.config.json README.md src/routes/index.js

# 与touch命令保持一致
cr touch index.js

# 与mkdir命令保持一致
cr mkdir -p src/assets/imgs

# 与rm命令保持一致
cr rm -rf src/temp

# 与cp命令保持一致
cr cp src/temp src/test

# 与which命令保持一致
cr which npm

环境要求

nodejs（7.6+)
npm

安装

npm install -g @xiao-edu/cr

如果 npm 官方源下载过慢，你可以尝试淘宝源安装：

npm install -g @xiao-edu/cr --registry https://registry.npm.taobao.org

如果你确实不想将 cr 命令暴露到全局，只想在项目的路径下使用 cr 命令，你可以只在项目中安装：

npm install -D @xiao-edu/cr

注意：这样就只能在项目文件夹下使用 cr 命令

使用

除了像上面将命令安装到全局使用外，个人更加推荐的方式是通过 npx 来运行 cr 。npx 会自动查找本机是否有安装相应模块，如果没有的话，自动去远端查找并执行。通过 npx 就不用安装到本地，每次运行都可以使用远端最新的版本。

npx cr path/to/folderName

升级

每次执行 cr 命令时，都会自动检查更新，你只要根据提示运行即可：

npm install -g @xiao-edu/cr

🎄 教程

在命令行下：

cr

即可输出帮助信息

在当前目录下，自动创建 cr.template.js

cr init ./

打开模板文件进行编辑：

vim cr.template.js

然后来生成文件吧！

cr ./report/student-count

✨ 代码生成

如你在 src 目录下运行：

cr init ./views

即会在 src/views 中生成一个默认的 cr.template.js, 你可以对其进行编辑

cr.template.js 示例：

// 之后的option会与该默认选项合并
const defaultOption = {
  // 是否忽略生成该文件
  ignore: false,
  // 如果文件存在，是否强制覆盖
  isForceOverwrite: false
}

// 导出生成文件的描述数组
const fileList = [
  {
    // 文件的路径
    path: `prettier.config.js`,
    // 写入文件中的内容，可以是模板字符串，也可以是函数，返回值会被写入该文件
    content: `
      // build at ${new Date().toDateString()}
      `
  },
  {
    // 如果没有后缀名，则认为是文件夹
    path: `src`,
    // 可以无限递归生成子目录和子文件
    children: [
      {
        path: 'index.js',
        // 文件内容可以由函数返回，返回的任何内容都会被toString()
        // 可以在函数中作任何同步的操作，包括获取数据，筛选数据，甚至上传文件
        content() {
          // 你可以发起网络请求，
          // 这里的axios是当前文件所在的项目中所能require到的npm包
          const axios = require('axios')
          const data = axios.get('http://example.com/example.json')
          const obj = {
            name: 'Alice',
            data
          }
          return obj
        }
      }
    ]
  }
]

module.exports = {
  fileList,
  defaultOption
}

然后当你运行

cr ./views/report/student-count

时，cr 会从你指定的./views/report/student-count 目录递归向外寻找 cr.template.js，根据其中导出的 fileList 来自动生成对应的文件。

cr.template.js 创建完后，是可以任意共享的，你可以选取别人写好的模板，也可以将模板分享给团队，这里也分享一个项目中可用的 vue 组件模板：

// cr.template.js
// 转成大驼峰
function toUpper(str) {
  const camelizeRE = /-(\w)/g
  // 把每个横杆分割的转成大写
  var temp = str.replace(camelizeRE, ($0, $1) => {
    return $1 ? $1.toUpperCase() : ''
  })
  // 再把首字母转成大写
  return temp[0].toUpperCase().concat(temp.slice(1))
}

// 转成横划线
function toCenterLine(str) {
  // \b 和 \B，\b 是单词边界
  const hyphenateRE = /\B([A-Z])/g
  return str.replace(hyphenateRE, '-$1').toLowerCase()
}

// 可以利用axios请求网络上的数据
const axios = require('axios')

// 之后的option会与该默认选项合并
const defaultOption = {
  // 是否忽略生成该文件
  ignore: false,
  // 如果文件存在，是否强制覆盖
  isForceOverwrite: false
}

const fileList = [
  path: `index.vue`,
  content: componentName => {
    const centerName = toCenterLine(componentName)
    const upperName = toUpper(componentName)

    return `
// Generated by @xiao-edu/cr\n\n
<template>
  <!-- ${centerName}的容器 -->
  <div class="${centerName}-wrap">
    {{ $route.meta.title }}
  </div>
</template>
<script>
export default {
  name: '${upperName}',
  data() {
    return {

    }
  },
  methods: {

  }
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>


</style>
    `
  }

]

即可在指定文件夹下生成 index.vue，内容为你返回的 content

这里也分享一个可用的创建 react 页面组件的 cr.template.js: （基于 typescript 和 css module）

// template.js you can generate
// 转成大驼峰
function toUpper(str) {
  const camelizeRE = /-(\w)/g
  // 把每个横杆分割的转成大写
  var temp = str.replace(camelizeRE, ($0, $1) => {
    return $1 ? $1.toUpperCase() : ''
  })
  // 再把首字母转成大写
  return temp[0].toUpperCase().concat(temp.slice(1))
}

// 可以利用axios请求网络上的数据
const axios = require('axios')

// 之后的option会与该默认选项合并
const defaultOption = {
  // 是否忽略生成该文件
  ignore: false,
  // 如果文件存在，是否强制覆盖
  isForceOverwrite: false
}

// 导出生成文件的描述数组
const fileList = [
  {
    // 生成导出组件的js文件
    label: 'jsxTemplate',
    // 生成文件的路径
    filePath: './index.tsx',
    // isForceOverwrite: true,
    // content为函数，返回文件的内容
    content: (componentName) => {
      const name = toUpper(componentName)

      const interfaceName = `I${name}Props`
      const content = `
// Generated by @xiao-edu/cr\n\n
import React, { useState, useEffect } from 'react'

import styles from './index.module.scss'

import classnames from 'classnames'

// import { Button } from 'antd-mobile'

interface ${interfaceName} {

}

const ${name}: React.FC<${interfaceName}> = (props) => {
  // 声明一个叫 'count' 的 state 变量。
  // const [count, setCount] = useState(0)

  useEffect(() => {


    return () => {

    }
  })

  const pageClass = classnames({
    [styles.wrap]: true,
    'with-padding': true,
    'with-bg': false,
    'with-scroll': false,
  })

  return (
    <React.StrictMode>
      <div className={pageClass}>
        {'${name}页面'}
      </div>
    </React.StrictMode>
  )
}

export default ${name}
        `
      return content.trim()
    }
  },
  {
    // 生成组件对应的scss文件
    label: 'scssTemplate',
    // 如果临时不想生成这个文件，可以设置ignore为true
    // ignore: true,
    filePath: './index.module.scss',
    content: (componentName) => {
      const content = `
@import '@/styles/vars.scss';

.wrap{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
        `
      return content
    }
  }
]

module.exports = {
  fileList,
  defaultOption
}

将其放置在 src/views 下，假设你想生成的页面文件夹名为：student-count，每次运行：

cr src/views/student-count

cr 会找到最近的祖先的 cr.template.js，根据其中导出的 fileList 来生成文件夹 student-count 及其内部的所有文件。

即可根据模板自动生成对应的页面组件，且页面会遵循一致的组件结构。

兼容平台

Windows
Mac
Linux

🌎 目标

能够简单的生成组件或其他文件，如cr ./simple-report
跨平台的兼容 linux 的文件操作命令，如cr ls,cr rm,cr cp...
一些有用的工具库，如cr open index.js, cr task, cr kill 3000, cr info...

开发原因

在开发的过程中，总是要重复的新建文件夹和文件，填充一些相对固定的文件内容，cr 可以帮助我们去新建这些文件并填充内容。
想跨平台兼容一些常用的 linux 命令。
其它的一些开发需求，如创建并打开一个文件，杀掉一个进程或者端口，获取系统信息等。

如何参与

如果你有任何的建议或者意见，或者你想参与进来，你可以:

提一个 issue 来参与讨论
fork 这个仓库，并提交 pull request

代码贡献

Fork 代码!
创建自己的分支: git checkout -b feat/xxxx
提交你的修改: git commit -am 'feat(function): add xxxxx'
推送您的分支: git push origin feat/xxxx
提交pull request

作者

lihao

协议

MIT

🔗 链接

cr 子命令

cr 除了提供生成文件的功能，也提供了一些常用的子命令

Commands:
  init|i [paths...]                   在指定位置下初始化cr.template.js
  task|t [targetPath]                 运行指定路径下的npm scripts，会递归向上找最近祖先的package.json
  open|o [options] [filePath|url...]  打开对应的文件、url、或可执行文件，如果文件不存在，会递归创建该文件
  serve|s [options] [folderPath]      启动一个静态文件服务器，来预览打包好的页面
  kill [ports...]                     杀死某个端口或者进程
  update|u                            更新cr命令行工具
  dep [options] <filePath>            查看一个模块的依赖树
  $test [paths...]                    (experimental) 仅用于项目开发时做测试用，生产环境请不要使用
  wallpaper [options] [imgPath|url]   获取或者切换系统壁纸
  qrcode <url>                        打印出对应网址的二维码
  random [options] [name...]          生成一个随机数
  $expose [options] [paths...]        暴露本机服务到公网
  hosts [paths...]                    用来管理该主机的HOSTS文件
  config [options]                    查看或设置cr命令的默认配置
  ls [options] [paths...]             显示目录列表，跨平台兼容shell的ls命令
  touch [options] [paths...]          创建文件，跨平台兼容shell的touch命令
  mkdir [options] [paths...]          创建文件夹，跨平台兼容shell的mkdir命令
  cp [options] <source> <dest...>     复制指定的文件或目录，跨平台兼容shell的cp命令
  mv [options] <source> <dest...>     剪切或重命名指定的文件或目录，跨平台兼容shell的mv命令
  rm [options] <paths...>             删除文件或目录，一旦删除，无法恢复。跨平台兼容shell的rm命令
  which [cmds...]                     在环境变量PATH中寻找指定命令的地址，跨平台兼容shell的which命令
  info                                打印相关的环境信息来debug

如果你对 cr 的某个子命令不熟悉，如 cr open 命令你可以携带--help参数来查看对应子命令的帮助信息:

cr open --help

附加功能

node 工具集（可以帮助您创建或执行一些 node 任务）

utils

utils 方法，详见 @xiao-edu/cr/task/ts-utils。

const utils = require('@xiao-edu/cr/task/utils')

const { log, chalk } = utils.logger
const { execAllShell, shelljs } = utils.exec
const { getEnv } = utils.getEnv
const { axios, fse, unzip, globby } = utils.pkg

1. `utils.logger`

包含常用的日志打印功能，log 示例：

log.info('开始测试logger的功能：')
log.waiting('正在等待任务完成...')
log.warn('这是一条警告信息')
log.error('测试一下打印错误的功能')
log.success('任务测试完成！')

chalk: 导出自 chalk，用于命令行终端的日志打印

2. `utils.exec`

包含执行命令的常用操作，execAllShell 示例：

// 可以任意执行命令行，以'//'开头的是注释，不会执行该行命令
execAllShell(`
  pwd
  ls
  // git status
  which npm
`)

shelljs : 导出自 shelljs, 跨平台执行 shell 脚本

3. `utils.getEnv`

获取环境变量，getEnv 基于dot-env来加载环境变量

示例：

// 这个函数会自动加载.env等环境文件中的变量到process.env中，并从中筛选TASK_开头的环境变量，作为对象返回
const env = getEnv()
console.log(`env: `, env)

// 比如你的.env.local文件内容：
// TASK_PROJECT_NAME = 'my-project'
// TASK_DO_BUILD_AND_DEPLOY = 'false'

// getEnv()打印结果：
// {
//   TASK_PROJECT_NAME: 'my-project',
//   TASK_DO_BUILD_AND_DEPLOY: 'false'
// }

4. `utils.pkg`

包含常见的 npm 包，导出给外部使用：

axios : 导出自 axios, 浏览器和 node 端都兼容的请求库
fse : 导出自 fs-extra, 更好用的 fs 模块
unzip : 导出自 unzipper, 用于压缩或解压文件
globby : 导出自 globby, 用于获取匹配对应规则的文件

@xiao-edu/cr

CR

全局的命令行工具 CR

📦 安装

🦄 使用

1. cr

🔋 特性

文件操作

环境要求

安装

使用

升级

🎄 教程

✨ 代码生成

兼容平台

🌎 目标

开发原因

如何参与

代码贡献

作者

协议

🔗 链接

cr 子命令

附加功能

node 工具集（可以帮助您创建或执行一些 node 任务）

utils

1. utils.logger

2. utils.exec

3. utils.getEnv

4. utils.pkg

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

1. `utils.logger`

2. `utils.exec`

3. `utils.getEnv`

4. `utils.pkg`

Weekly Downloads