微信小程序创建页面和组件文件夹命令行工具

背景

在做微信小程序开发的过程中，都需要用到微信开发者工具。在这个工具中，可以用来调试微信小程序，也可以用来作为代码编辑器。但是个人觉得作为编辑器不太好用，所以现在的开发模式是用微信开发者工具调试代码，而用vscode作为代码编辑器。在开发中还有一些开发体验不是很好的，比如当想创建一个页面或者一个组件文件的的时候，如果在vscode中创建的话，那么会有很多需要创建的文件，因为一个文件夹默认需要四个文件。如果不想一个个创建文件的话，就需要到微信开发者工具中右键点击生成。在开发中，这两种方式都使用过，感觉都是痛点。于是就主动做了个命令行工具，通过在命令行中执行命令生成想要的文件，达到一种相对较好的体验。

思考

想要做一个这样的工具，初步思考是用node来实现，先定义一个默认的模版文件夹，然后在执行命令的时候，带上需要生成的分包名、页面名、组件名，然后通过这些参数在项目根目录中生成相应的文件夹，然后把默认的模版文件拷贝到新生成的文件夹中，到此命令行生成项目文件夹结束。wx-cli已上传npm包点击可查看详情

实现

这个工具主要是通过node来实现的，利用node的api来对项目文件进行操作。也用到一些优化命令行交互的包，比如为了输出文字好看一点的，简单列举下使用的依赖包。

commander 方便获取命令行参数，并确定命令行的命令
ora 优化交互比如：加个执行状态
chalk 改变输出文字的颜色

1. 先使用commander来定义创建的命令

wx-cli -pack xx 生成一个新的分包
wx-cli -p xx 生成一个新的页面
wx-cli -c xx 生成一个新的组件

这里简单说下命令，下面会列出各种使用方式，npm包中也有详细文档。

2. 使用fs模块来对文件进行操作，实现主要的逻辑。

用fs.readFileSync来读取project.config.json文件，简单判断下是不是在小程序项目目录的根目录。如果不是的话，就直接报错并提示不是根目录。

try {
    try {
      const projectConfig = JSON.parse(fs.readFileSync(`${path.resolve()}/project.config.json`, 'utf8'))
      projectName = projectConfig.projectname
    } catch (error) {
      spinner.fail(chalk.red('没有在项目根路径执行命令，请检查执行命令的根目录'))
      return
    }
  } catch (error) {
    spinner.warn(chalk.yellow('该项目与所选项目不符，请查看选择对应的项目'))
    return
  }

使用fs.mkdirSync来创建新的文件夹

1	fs.mkdirSync(`${pack}/pages`)

使用fs.statSync来判断新创建的文件夹是否存在，如果已经存不在重新创建并提示

1
2
3

if (fs.statSync(pack)) {
        spinner.warn(chalk.yellow('已经存在该目录不在重新创建'))
      }

使用fs.copyFileSync来把默认的模版复制到新创建的文件夹中。

1	fs.copyFileSync(`${pagePath}/${item}`, `${pack}/pages/${page}/${item}`)

基本的实现原理就是用以上方式，具体代码可自行查看。

使用

创建包

// 命令
wx-cli -pack 

// 运行
➜  water git:(develop) ✗ wx-cli -pack wPack

// 目录
├── wPack

创建页面

// 命令
wx-cli -pack wPack -p wPage



// 运行
➜  water git:(develop) ✗ wx-cli -pack wPack -p wPage



// 结果
ℹ page is ===========> wPage
✔ 操作成功

// 目录
wPack

└── pages

    └── wPage

        ├── index.js

        ├── index.json

        ├── index.wxml

        ├── index.wxss

        └── strings.js

同时创建包和页面

// 命令
wx-cli -pack wPack -p wPage



// 运行
➜  water git:(develop) ✗ wx-cli -pack wPack -p wPage



// 结果
ℹ page is ===========> wPage
✔ 操作成功


// 目录

wPack

└── pages

    └── wPage

        ├── index.js

        ├── index.json

        ├── index.wxml

        ├── index.wxss

        └── strings.js

app.json添加分包路径

{

        "root": "wPack",

        "pages": [

            "pages/wPage/index"

        ]

    }

创建全局组件

// 命令
wx-cli -c wComponent


// 运行
➜  water git:(develop) wx-cli -c wComponent


// 结果
➜  water git:(develop) wx-cli -c wComponent

ℹ 创建全局公用组件
component is ===========> wComponent

创建分包组件

1
2
3

// 命令

wx-cli -pack wPack -c wComponent

创建分包页面组件

1 2	// 命令 wx-cli -pack wPack -p wPage -c wComponent

自定义页面和组件模版

在项目根目录下建立template文件夹，其中包括页面的模版文件夹page和组件的模版文件夹comp,文件夹里面的文件就是自定义的模版，会按模版生成自定义的页面和组件。文件目录如下：

template

├── comp

│   ├── index.js

│   ├── index.json

│   ├── index.wxml

│   └── index.wxss

└── page

    ├── index.js

    ├── index.json

    ├── index.wxml

    └── index.wxss

你可以自定义文件，如果根目录没有自定义模版，则生成默认的页面。

总结

总体就是为了偷懒，减少创建的成本，而思考开发的一个小工具，如果觉得有帮助。欢迎送个赞，先行谢过！