开发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); // 解析命令参数

然后需要注意的是, commander 支持 Git 风格的子命令处理,可以根据子命令自动引导到以特定格式命名的命令执行文件,文件名的格式是 [command]-[subcommand] ,例如:

modoo-script init => modoo-script-init
modoo-script build => modoo-script-build

所以为了实现 init 命令,可以直接在 bin 文件目录下添加 modoo-script-init.js

#!/usr/bin/env node

const { program } = require("commander");

program
 .option("--name [name]", "项目名称")
 .option("--description [description]", "项目介绍")
 .option("--framework", "脚手架框架")
 .parse(process.argv);

const args = program.args;
// 获取命令参数
const { name, description, framework } = program;

const projectName = args[0] || name;

......

用户交互

获取了命令参数后,根据参数转到用户交互界面,这里使用的是 inquirer 来处理命令行交互, 用法很简单

const inquirer = require('inquirer')

if (typeof conf.description !== 'string') {
   prompts.push({
    type: 'input',
    name: 'description',
    message: '请输入项目介绍!'
   })
}

......

inquirer.prompt(prompts).then(answers => {
  // 整合配置
  this.conf = Object.assign(this.conf, answers);
})

远程模块

这里较为折腾,一开始说了,我把模版作为 npm包 ,具体查找,下载的过程如下

  • npm search 查找相应的模版 npm 包
  • 在用户选择框架后对应所需的包,获取它的详细信息,主要是 tarball
  • 用户输入完后,下载 tarball 到项目目录,并修改 .json 文件配置

部分代码如图所示

// 一 npm search 查找相应的模版 npm 包
const { execSync } = require("child_process");

module.exports = () => {
 let list = [];
 try {
  const listJSON = execSync(
   "npm search --json --registry http://registry.npmjs.org/ @modoo/modoo-template"
  );
  list = JSON.parse(listJSON);
 } catch (error) {}

 return Promise.resolve(list);
};
// 二 返回 npm 数据
const pkg = require("package-json");
const chalk = require("chalk");
const logSymbols = require("log-symbols");

exports.getBoilerplateMeta = framework => {
 log(
  logSymbols.info,
  chalk.cyan(`您已选择 ${framework} 远程模版, 正在查询该模版...`)
 );

 return pkg(framework, {
  fullMetadata: true
 }).then(metadata => {
  const {
   dist: { tarball },
   version,
   name,
   keywords
  } = metadata;
  log(
   logSymbols.success,
   chalk.green(`已为您找到 ${framework} 远程模版, 请输入配置信息`)
  );

  return {
   tarball,
   version,
   keywords,
   name
  };
 });
};
// 三 下载 npm 包
const got = require("got");
const tar = require("tar");
const ora = require("ora");

const spinner = ora(
  chalk.cyan(`正在下载 ${framework} 远程模板仓库...`)
).start();

const stream = await got.stream(tarball);

fs.mkdirSync(proPath);

const tarOpts = {
 strip: 1,
 C: proPath
};

// 管道流传输下载文件到当前目录
stream.pipe(tar.x(tarOpts)).on("close", () => {
  spinner.succeed(chalk.green("下载远程模块完成!"));
  ......
})
// 四 遍历文件修改配置
const fs = require("fs-extra");

readFiles(
  proPath,
  {
   ignore: [
    ".{pandora,git,idea,vscode,DS_Store}/**/*",
    "{scripts,dist,node_modules}/**/*",
    "**/*.{png,jpg,jpeg,gif,bmp,webp}"
   ],
   gitignore: true
  },
  ({ path, content }) => {
   fs.createWriteStream(path).end(template(content, inject));
  }
 );

// 递归读文件
exports.readFiles = (dir, options, done) => {
 if (!fs.existsSync(dir)) {
  throw new Error(`The file ${dir} does not exist.`);
 }
 if (typeof options === "function") {
  done = options;
  options = {};
 }
 options = Object.assign(
  {},
  {
   cwd: dir,
   dot: true,
   absolute: true,
   onlyFiles: true
  },
  options
 );

 const files = globby.sync("**/**", options);
 files.forEach(file => {
  done({
   path: file,
   content: fs.readFileSync(file, { encoding: "utf8" })
  });
 });
};

// 配置替换
exports.template = (content = "", inject) => {
 return content.replace(/@{([^}]+)}/gi, (m, key) => {
  return inject[key.trim()];
 });
};

下载依赖

下载完毕并且修改完配置后, 默认执行 git init + 根据环境( yarn / npm / cnpm )安装依赖,这个就很简单了

const { exec } = require("child_process");
const ora = require("ora");
const chalk = require("chalk");

// proPath 项目目录
process.chdir(proPath);

// git init
const gitInitSpinner = ora(
 `cd ${chalk.cyan.bold(projectName)}, 执行 ${chalk.cyan.bold("git init")}`
).start();

const gitInit = exec("git init");
gitInit.on("close", code => {
 if (code === 0) {
  gitInitSpinner.color = "green";
  gitInitSpinner.succeed(gitInit.stdout.read());
 } else {
  gitInitSpinner.color = "red";
  gitInitSpinner.fail(gitInit.stderr.read());
 }
});

// install
let command = "";
if (shouldUseYarn()) {
 command = "yarn";
} else if (shouldUseCnpm()) {
 command = "cnpm install";
} else {
 command = "npm install";
}

log(" ".padEnd(2, "\n"));
const installSpinner = ora(
 `执行安装项目依赖 ${chalk.cyan.bold(command)}, 需要一会儿...`
).start();

exec(command, (error, stdout, stderr) => {
  if (error) {
   installSpinner.color = "red";
   installSpinner.fail(chalk.red("安装项目依赖失败,请自行重新安装!"));
   console.log(error);
  } else {
   installSpinner.color = "green";
   installSpinner.succeed("安装成功");
   log(`${stderr}${stdout}`);
  }
});

主要的代码就是这些,其实只要知道思路,这些东西都很简单,虽然我写的有点 ️:chicken:,但是主要的逻辑还是能理清楚的一些的。更加详细的可以去:eyes:我发的源码,多谢指教。:pray::pray::pray:

开发脚手架

因为这是小程序的脚手架,它不像其他 web 框架一样需要很多 webpack 的配置,所以相对简单很多。

对于这个脚手架,相比于开发者工具创建的默认项目,我弥补了它的一些问题

  1. 默认项目太过简单,只适合自己折腾,对于团队或者企业,缺乏相应的代码约定/规范,没有强制的约定会导致团队协作间的困难,提升code review的难度,所以我在原来的基础上加入了eslint,stylelint,prettier,commitlint等配置,以及git hook 在 pre-commit 时,执行校验,确保提交的代码尽量规范
  2. 由于对 css 预处理的钟爱,另外加入了对 less 的支持,并且解决小程序背景图不支持本地图片的问题
  3. 由于以上基本都是文件处理,所以选择 gulp 作为构建工具,这里是 v4, 与v3 写法上有一定的区别,不过关系不大

在根目录下创建 gulpfile.js

const gulp = require('gulp');
const chalk = require('chalk');
const rename = require('gulp-rename');

// 支持 less
gulp.task('less', () => {
 return gulp
  .src('./miniprogram/**/*.less')
  .pipe(less())
  .pipe(postcss()) // 配置在 post.config.js
  .pipe(
   rename((path) => {
    path.extname = '.wxss';
   })
  )
  .pipe(
   gulp.dest((file) => {
    return file.base; // 原目录
   })
  );
});

// 开发环境监听 less
if (env === 'development') {
 gulp.watch(['./miniprogram/**/*.less'], gulp.series('less')).on('change', (path) => {
  log(chalk.greenBright(`File ${path} was changed`));
 });
}

// 一下代码注释掉了,依赖包下载太慢了,这主要负责图片的压缩
const imagemin = require('gulp-imagemin');
const cache = require('gulp-cache'); // 使用缓存

gulp.task('miniimage', () => {
 return gulp
  .src('./miniprogram/**/*.{png,jpe?g,gif,svg}')
  .pipe(
   cache(
    imagemin([
     imagemin.gifsicle({ interlaced: true }),
     imagemin.mozjpeg({ quality: 75, progressive: true }),
     imagemin.optipng({ optimizationLevel: 5 }),
     imagemin.svgo({
      plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
     }),
    ])
   )
  )
  .pipe(
   gulp.dest((file) => {
    return file.base; // 原目录
   })
  );
});

其他的一些具体配置,可以看我的GitHub 仓库源码

参考

taro-cli

pandora-cli

little-bird-cli

到此这篇关于开发Node CLI构建微信小程序脚手架的示例的文章就介绍到这了,更多相关Node CLI构建小程序脚手架内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解如何实现一个简单的Node.js脚手架

    原因 在工作中,需要开发一个脚手架,用于给相关用户提供相关的开发便利性. 适合人群 对前端.Node操作有一定的了解,同时向了解脚手架开发过程或者需要自己实现一个脚手架的开发者. 目标 开发一个简单的脚手架,能够提供给用户进行安装. 能够输出相关提示. 对用户文件进行读写操作. 在脚手架中使用Shell脚本. 步骤 开发脚手架 脚手架的开发最开始过程与普通的前端项目相同,需要一个入口文件command.js和配置文件package.json. 与其他配置文件不同的是,需要在package.jso

  • 详解基于node.js的脚手架工具开发经历

    前言 我们团队的前端项目是基于一套内部的后台框架进行开发的,这套框架是基于vue和ElementUI进行了一些定制化包装,并加入了一些自己团队设计的模块,可以进一步简化后台页面的开发工作. 这套框架拆分为基础组件模块,用户权限模块,数据图表模块三个模块,后台业务层的开发至少要基于基础组件模块,可以根据具体需要加入用户权限模块或者数据图表模块.尽管vue提供了一些脚手架工具vue-cli,但由于我们的项目是基于多页面的配置进行开发和打包,与vue-cli生成的项目结构和配置有些不一样,所以创建项目

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • 详解使用 Node.js 开发简单的脚手架工具

    前言 像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率. 为什么需要需要脚手架? 减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件. 根据交互动态生成项目结构和配置文件等. 多人协作更为方便,不需要把文件传来传去. 思路 要开发脚手架,首先要理清思路,脚手架是如何工作的

  • 详解nodejs解压版安装和配置(带有搭建前端项目脚手架)

    nodejs 安装 我先前用了nvm,觉得nvm挺厉害可以随时更换nodejs版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的来,旨在好用简洁: 1]第一步:下载nodejs 中文官网: https://nodejs.org/zh-cn/download/ 如下图是最新的版本,不用怕这是最新的直接下载就可以了,选择windows版本,LTS是长期支持版本,箭头所示下载64位压缩版:个人觉得压缩版本就够了:(可能安装版的功能更

  • 搭建一个nodejs脚手架的方法步骤

    1 前言 1.1 像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令 taro init project ,即可快速帮我们生成一个初始项目.在日常开发中,有一个脚手架工具可以用来提高工作效率. 1.2 为什么需要脚手架 减少重复性的工作,从零创建一个项目和文件. 根据交互动态生成项目结构和配置文件等. 多人协作更为方便,不需要把文件传来传去. 1.3 怎样来搭建呢? 脚手架是怎么样进行构建的呢,我是借助了 taro-cli的思路. 1.4 本文的目标读者 1 想要学习

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

    本文介绍了 Node CLI 构建微信小程序脚手架的示例,分享给大家,具体如下: 目的 由于目前公司的 TOC 产品只要是微信小程序,而且随着业务的扩展, 会有更多的需求,创建更多的小程序,为了让团队避免每次开发前花费大量时间做比如工程化的一些配置,以及保持每个项目的一致性, 所以决定做一个 Node CLI 来创建微信小程序脚手架 节省开发前期的大量时间,新项目可以很快开始业务开发 保证项目统一性,有利于团队间的协作及工程化 提升团队基建意识,从枯燥无味的业务开发中脱离出来,尝试新的东西,即使

  • 使用node.js实现微信小程序实时聊天功能

    在微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的.但领导要求了,总是要干的. 然后就实时通讯这个关键词展开搜索,穿梭于网页之间.不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到了关键词的WebSocket和node.js的,然后搜索这两是啥,什么关系,总算明白了一点. 最后确定了第一步需要干的是用node.js搭建服务(我是装在自己的windows下的): 1.首先到官网下载node.js,下载链接 安装很简单,双击下载好的文件,直接下一步一步,没什么特殊的选择,路径默认

  • HBuilderX开发一个简单的微信小程序的实现步骤

    目录 一.配置 二.运行 一.配置 在微信开发者工具的设置中开启,如图: 在HBuilderX中新建项目,选择uni-app,如图: 在HBuilderX中编写代码 目录结构如图: 编写代码: index.less .content{ padding: 0 40rpx; image{ width: 100%; } .title{ display: block; text-align: center; font-size: 50rpx; font-weight: bold; } .operate{

  • ECharts的三维可视化及在微信小程序中使用示例

    目录 在微信小程序中使用 ECharts 三维可视化 在微信小程序中使用 ECharts 关于微信小程序的项目创建. 创建项目后,可以用新项目完全替换weixin项目下载的电子商务/图表,然后修改代码:或者只需将ec画布目录复制到新项目,然后进行相应的调整. 如果采用完全替换的方法,则project.config json中的appid将替换为公共平台上应用的项目id. pages目录下的每个文件夹都是一个页面.可以根据情况删除不必要的页面,然后单击应用程序删除json中的相应页面. 如果只复制

  • Django实现微信小程序支付的示例代码

    1.下载相关的库 微信官方已经提供了方便开发者的SDK,可是使用pip方式下载: pip install wechatpy 2. 在项目的settings.py文件添加相关配置 具体的参数需要自己到小程序微信公众平台和微信商户平台获取. WECHAT = { 'APPID': 'appid', # 小程序ID 'APPSECRET': 'appsecret', # 小程序SECRET 'MCH_ID': 'mch_id', # 商户号 'TOTAL_FEE': '1', # 总金额, 单位为"分

  • 生成无限制的微信小程序码的示例代码

    概述 现在除了用二维码之外,微信还可以为我们生成小程序码,大概长这个样子. 如果要生成无限制的小程序码,需要几个步骤 1.小程序某个页面的地址,也即是指定page参数的值: 2.获取access_token; 3.指定scene参数的值: 4.调用getwxacodeunlimit接口,并将返回结果存储到一个图片里. page参数 page参数的值都是以pages开头的,后面加上能到导航到某个小程序页面的路径,例如: pages/xxxxxx 获取access_token 这个比较简单,只需要根

  • 微信小程序(微信应用号)开发工具0.9版安装详细教程

    微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号) 声明 •微信小程序开发工具类似于一个轻量级的IDE集成开发环境,目前仅开放给了少部分受微信官方邀请的人士(据说仅200个名额)进行内测,因此目前未受到邀请的人士只能使用破解版: •本破解版资源来自于网上,与本人无关,仅供技术开发人员研究之用: •由于尚属内测阶段,因此迭代更新非常快,后续很可能由于升级而导致暂时无法使用. 特别注意 •由于目前发布的0.9版本必须验证才能登录(估计是为了验证是否为内测人士),因此必须先

  • 微信小程序搭载node.js服务器的简单教程

    目录 1.node.js 2.微信小程序 3.发送请求 4.data数据存放在服务端 总结 此文章用到的是用node.js搭载的服务器! 1.node.js 检测电脑是否安装node.js,可以用[ cmd/Power shell ]命令检测,也可以用[git-bash],这里就用git-bash进行演示,没有git-bash可以安装一下. node -v 如果有对应的版本号即为已经安装完成! 未安装的附上链接了: node.js安装 : Download | Node.js  或点击这里下载

  • 微信小程序搭建及解决登录失败问题

    等了好久的小程序,终于在近日曝光了.现在就带大家来尝尝鲜.以下是一张随便看看的图. 一.构建微信小程序的步骤 下载开发工具 考虑到微信0.9.092100的Web开发者工具对于登录做了限制,所以下载登录还是需要一点门路的,我在下面有介绍,希望大家耐心的往下面看~下载工具的地址:链接 密码: r3hc. 破解的步骤就是:将破解压缩包的两个文件,放到如下图路径: 这个是MAC路径: 应用程序->微信web开发者工具->显示包内容 /Resources/app.nw/app/dist/compone

  • 微信小程序 Storage更新详解

    前言 1.近期项目开发中接触到微信小程序,其中有部分业务需要用到数据本地存储,而微信的官方文档中并没用提供直接更新Storage的API. 2.通过wx.setStorage(Object object)可以达到覆盖原有数据达到更新的目的,但是在只修改某个对象中某个属性的值中使用这个API总感觉有点蹩脚. 3.下面笔者简单封装了一个方法用来修改Storage,若是有人知道更好的方法或者我的写法有问题还望不吝赐教. 问题描述 小程序首次登录时需要输入账号密码,首次登录成功后将账号与token保存本

随机推荐