开发Node CLI构建微信小程序脚手架的示例

开发Node CLI构建微信小程序脚手架的示例

 

开发Node CLI构建微信小程序脚手架的示例

 

目的

由于目前公司的 TOC 产品只要是微信小程序,而且随着业务的扩展, 会有更多的需求,创建更多的小程序,为了让团队避免每次开发前花费大量时间做比如工程化的一些配置,以及保持每个项目的一致性, 所以决定做一个 Node CLI 来创建微信小程序脚手架

节省开发前期的大量时间,新项目可以很快开始业务开发

保证项目统一性,有利于团队间的协作及工程化

提升团队基建意识,从枯燥无味的业务开发中脱离出来,尝试新的东西,即使很基础很简单

小程序选型

小程序的第三方框架有很多, 我接触过的就有 taro / wepy / mpvue ,并且都有对应上线的项目。 在尝试这些框架的过程中,对比原生小程序,有一些感想想分享出来:

第三方框架语法贴近vue/react, 开发者可以根据自己的特点选择框架,学习成本相对较低

原生框架在CSS预处理,多端复用,状态管理,自动构建这几块能力对比其他框架是欠缺的

第三方框架额外的工具包会使打包体积变大,每次构建花费时间,同时性能不如原生

第三方框架更新迭代很快,比如wepy@1.x/wepy@2, 导致旧项目的更新问题

小程序的特性更新迭代速度较快, 第三方框架会相对滞后

综上所述,由于我们目前没有多端复用的要求,并且有的小程序相对简单,需要很短时间内开发完成, 最重要的是,其他的框架我都试过了,原生的还没写过,一个字,新鲜感!!:smile: ,所以最终当仁不让地选择了原生小程序,不得不说,原生大法就是妙啊! :clap::clap::clap::clap:

大体思路

这个功能是相对很基础的,但是作为一个每天搬砖的业务仔来说,是个艰难的过程,也是个很好的学习机会。

在做之前,想找找个社区比较:ox::beer:的学习(抄)一下,短暂考虑后,果断选择 taro-cli , 然后火速打开源码,一顿操作(完全蒙圈),学习了一点之后,才开始上手

这个具体的实现思路我想到两个

git clone 远程仓库作为模版下载到本地,再根据用户输入配置修改 .json 文件(比如 appId )

template 就放在当前目录中,直接`copy``, 之后的事等同

权衡之后,打算使用 lerna 作为管理工具, 其中模版也作为一个 npm 包 ,用到的时候去 npm 下载,这么做我是为了方便管理,统一 push / publish , 就是为了省事 :smile:。

最终思路:

暴露命令 —> 用户交互输入配置 -> 集合配置下载模版 -> 根据配置修改 .json -> git init + 安装依赖

开发 Node CLI

Lerna 项目搭建

知道 monorepo 的同学不需要我多说,其实就是把代码放在一个仓库里,结果包之间回想以来,发布繁琐等问题, 这里我们就用到了 lerna 这个神器帮助我们做包的统一管理

// 创建项目 mkdir modoo-mini-program cd modoo-mini-program // 初始化 lerna init cd packages mkdir modoo-script mkdir modoo-template-mini mkdir modoo-mini // 安装 modoo-script 依赖用于测试,无其他实际用处 lerna bootstrap // 安装依赖 + npm link

安装依赖

为了实现功能,我们需要安装一些依赖包

commander 命令行工具,用于读取命令参数,作对应操作

node-fs-extra 在 Node.js 的 fs 基础上增加了一些新的方法,更好用,还可以拷贝模板。

chalk 可以用于控制终端输出字符串的样式, 调整颜色啥的

inquirer 用户命令行交互,获取用户的交互配置数据,就像个提问板

ora 实现加载中的状态是一个 Loading 加前面转起来的小圈圈,成功了是一个 Success 加前面一个小钩钩。

log-symbols 日志彩色符号,用来显示√ 或 × 等的图标

获取命令

首先第一步,要在用户全局安装之后,暴露出命令接口,需要在 packages.json 文件中加入如下内容

"bin": { "modoo-script": "./bin/modoo-script.js" },

之后在根目录下创建 bin 文件夹 + bin/modoo-script.js

#!/usr/bin/env node const { program } = require("commander"); program .version(require("../package").version) // modoo-script --version .usage("<command> [options]") // init 命令,床架项目 .command("init [projectName]", "Init a project with default templete") .parse(process.argv); // 解析命令参数

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/b3b3bf75ba5dcb2d48295636b252d571.html