用javascript搭建小程序cli脚手架（三） -- 自定义命令

前端

2024-01-17 08:02:28

前言

在上一篇文章中，我们实现了小程序脚手架中版本管理的基本功能，包括版本发布和版本切换。

在本文中，我们将进一步扩展脚手架的功能，增加自定义命令。自定义命令可以根据需要执行任意任务，比如执行构建任务、部署代码或运行测试等。

自定义命令的设计

在设计自定义命令时，我们需要考虑以下几个方面：

命令的名称和用法。命令的名称应该易于记忆和理解，并且用法应该简单明了。
命令的功能。自定义命令可以执行各种各样的任务，但需要确保它们与脚手架的整体功能是相关的。
命令的执行方式。自定义命令可以通过多种方式执行，比如使用 NPM 脚本或通过脚手架的命令行界面。

实现自定义命令

接下来，我们将使用 NPM 脚本来实现自定义命令。NPM 脚本是一种在 NPM 包中定义的脚本，可以通过 npm run <script-name> 命令来执行。

首先，我们需要在项目中安装 npm-run-all 包。npm-run-all 包可以帮助我们并行执行多个 NPM 脚本。

npm install --save-dev npm-run-all

然后，我们在项目的 package.json 文件中添加一个 scripts 字段，并在其中定义自定义命令。例如，我们可以添加一个 build 命令，用于构建小程序项目：

{
  "scripts": {
    "build": "npm-run-all build-style build-script",
    "build-style": "lessc src/style/main.less dist/style/main.css",
    "build-script": "babel src -d dist --presets=@babel/preset-env"
  }
}

在上面的示例中，build 命令会并行执行 build-style 和 build-script 两个命令。build-style 命令使用 Less 编译器将 src/style/main.less 文件编译为 dist/style/main.css 文件。build-script 命令使用 Babel 编译器将 src 目录中的 JavaScript 文件编译为 dist 目录。

我们还可以通过脚手架的命令行界面来执行自定义命令。例如，我们可以添加一个 create-page 命令，用于创建新的页面：

// scaffold/bin/scaffold.js
const scaffold = require('../lib/scaffold')

module.exports = function(args) {
  // ...

  // 创建新的页面
  if (args.page) {
    scaffold.createPage(args.page)
  }

  // ...
}