小程序 boilerplate cli 工具教程

原创

kmokidd

发布于 2019-04-16 13:42:01

2.4K0

发布于 2019-04-16 13:42:01

文章被收录于专栏：无人打理的花园无人打理的花园

- 2017年的老文，搬运存档用 -

先打个广告，企鹅 FM 和微云的小程序已上线~ 请多多关照 (づ￣ 3￣)づ

痛点发现

开发至今有两个痛点忍不下，需要写小工具来解决。

作为一个非常喜欢新建项目做测试的开发者来说，新建项目以后，从老项目中复制粘贴各种文件心很累… 迫切需要一个小程序 boilerplate，也就是项目模板。

每次新增一个页面时，命令好长…：touch pageName.wxml pageName.wxss pageName.js。不想再打三次页面名字了。而且常常忘了要到 app.json 中注册页面。

于是决定写个（100 行代码不到的） cli 工具解决痛点，另外选择了 npm package 的方式，方便维护。

开始

安装/更新环境

开发需要在 node 环境下，先安装/更新好环境，po 主本机环境如下：

创建 npm 项目

pacakage.json 直接使用默认配置，也就是一路回车，生成内容如下图的配置文件：

mkdir mywxapp-tmpl && cd mywxapp-tmpl && touch index1.js
npm init

思路

我希望这个命令行工具使用起来是这样的：

之前没有写过 cli 工具，所以在写下思路后有了三个疑问：

如何封装一个 cli 工具插件？编写一般的 npm 插件，是通过 module.exports 将插件接口暴露出来，继而使用者通过这个接口再去调用不同方法，但是一个命令行工具要如何执行我们的命令呢
如何根据不同的 options（上图中的 -i 和 -p 即 options）执行不同的任务？要自己做 parser 吗？
项目模板要存储在哪里？有两条思路：单独维护模板；或者是将模板和插件打包在一起，每次更新模板的同时更新插件。用哪一个？

逐个解决：

package.json 中有一个字段是 bin： { ... "bin": { "mywxapp": "./index.js" } } 这个字段可以将开发者希望执行的脚本注册到环境变量 (PATH) 中，不同的 key 对应执行不同的脚本。也就是说现在，当我们直接在命令行中执行 mywxapp 等价于在 terminal 中执行 ~/path/to/index.js 第一个问题解决，关于 bin 字段更多信息请参考 npm 文档中 package.json 一节。
执行 index.js 时，可以通过 process.argv 获取执行时的输入值，但是要自己处理 options 无疑很麻烦。不过，node/npm 发展至今处理命令行参数这样满足刚需的库肯定存在，就是 commander。简单好用易上手，那么第二个问题也解决啦。

上文也提到了，我对模板位置的存储有两个方向的规划，最后选择的是将模板直接托管在可访问到的 git 仓库中。想到小程序框架迭代迅速，模板可能会需要跟着框架一起进化。也可以看出 boilerplate 生成器本身的功能很简单，如果把模板封装进去，会增加代码量，而且工具更新应该是在修复 bug、新增功能这样的情况下，模板的更新不属于此范围。分开管理更合理。而且目前的模板还比较简陋，自动化的部分还没有整合上去，这些之后也会逐步跟上（至少 less -> wxss 得有…），可想改动会比较频繁。 download-git-repo 可以把给定地址的仓库内容拷贝到执行目录中。API 简单，所以就是它了。

实现

根据上面一节，先安装依赖的包：

npm install commander download-git-repo mkdirp --save

// 这个三个插件是使用时依赖，而不仅仅是开发依赖，所以用 --save // 在新建页面的时候，使用 mkdirp 新建对应的页面目录

加上 bin 字段，最后 package.json 中新增了内容：

{
    ...
    "dependencies": {
        "commander": "^2.9.0",
        "download-git-repo": "https://registry.npmjs.org/download-git-repo/-/download-git-repo-0.2.1.tgz",
        "mkdirp": "^0.5.1"
    },
    "bin": {
      "wxapp": "./index.js"
    }
}

generator 本身逻辑非常简单，参考上面一节的思路图，这里列一个不考虑出错情况的伪代码，不怕我的 JS 代码辣眼睛的也可以看这里：

const program = require('commander');
const mkdirp = require('mkdirp');
const download = require('download-git-repo');

// 创建项目
function initProj(projName) {
  var projPath = currentDir + '/' + name;
  if(currentDir.exists(projName))
    console.warn(projName + '项目已经存在，请使用别的名字');
  else
    download('path/to/tmpl', currentDir+'/'+projName);
}

// 注册页面
function registerPage(pagesName) {
  var configFile = projPath + '/app.json';

  // 读配置文件
  readFile(configFile, function(data){
    // 将新建的所有页面都写入配置文件中
    for(name in pagesName){
      data.pages.push('pages/' + name + '/' + name);
    }
    writeFile(configFile);
  });
}
// 创建页面
function createPage(pages) {
  var pagePath = projPath + '/pages/';

  for(var index in pages) {
    var page = pages[index];
    mkdirp(pagePath, function(){
      open(pagePath+'/'+page+'.wxml', pagePath+'/'+page+'.wxss', pagePath+'/'+page+'.js');
    })
  }

  // 将页面注册到 app.json 中
  registerPage(pages);
}


// options 
program
  .usage('[options] <file ...>')
  .option('-i, --init [value]', '创建初始项目')
  .option('-p, --newpage <items>', '输入要创建的页面名称，不带任何扩展名，自动生成目录和对应的 .wxml .wxss 和 .js 文件', list)
  .parse(process.argv);


if(program.init != undefined) initProj(program.init);
if(program.newpage != undefined) createNewPage(program.newpage);