脚手架开发系列之Hello World

前言

记录一下开发devui-cli过程中遇到的问题及开发思路。这个cli参考了许多开源项目的脚手架，甚至是vite的源码？没错，其实vite也是有个脚手架，但测试仪是我们使用的是它暴露出来源码编辑器的命令居多，本身还是使用node调用API去实现，比如使用了esbuild的JavaScrip难破mg5日剧t API去打包TS文件。

开始

不多说，直接来创建个项目

mkdir devui-cli && cd devui-cli
npm install -g pnpm 
pnpm init -y
mkdir packages
touch pnpm-workspace.yaml
cat <<EOF >pnpm-workspace.yaml
# pnpm-workspace.yaml
packages:
  # all packages in subdirs of packages/ and components/
  - 'packages/**'
  - 'components/**'
  # exclude packages that are inside test directories
  - '!**/test/**'
EOF
cd packages
mkdir devui-cli devui-cli-demo
cd devui-cli-demo && pnpm init -y
cd ../devui-cli && pnpm init -y

到此我们就创建出了一个目录的架构，使用 vscode 打开目录，可以看到以下的结构

packjava模拟器ages/devui-cli

修改一下packages/devui-cli/package.json 这里的配置是精简的了，由于本文是在cli做到了一定程度后写的，不想重写太多代码把大部分现阶段用不上的代码也给带过来女配没有求生欲藤萝为枝了，要源码网站运行去文末的仓库下clone 源码。

{
  "name": "@devui/cli",
  "version": "1.0.0-alpha.0",
  "description": "",
  "main": "dist/node/index.js",
  "types": "dist/node/index.d.ts",
  "bin": {
    "devui-cli": "bin/devui-cli.js"
  },
  "scripts": {
    "dev": "rimraf dist && rollup -c -w"
  },
  "files": [
    "bin",
    "dist",
    "types",
    "site"
  ],
  "license": "MIT",
  "dependencies": {
    "esbuild": "^0.14.27"
    "rollup": "^2.59.0"
  },
  "devDependencies": {
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@types/resolve": "^1.20.1",
    "cac": "6.7.9",
    "periscopic": "^2.0.3",
    "picocolors": "^1.0.0"
  }
}

解释一下

1. "name": "@devui/cli",是用了devui组织式的命名

2. "bin": {"devui-cli": "bin/devui-java环境变量配置cli.js"} bin 是声明包的入口，在运行devui-cli 命令的时候找的是这里声明的文件，调用这里的bin/devui-cli.js 然后传递参数完成后续命令。

3. files是声明包的产物，这些产物在生产构建的时候会一同打包发布出去

devui-cljava培训i.js

这是用js编写的文件，javaee原因是node不能够直接执行ts文件，当然这里也可开源软件以用ts来编码，然后打包成js。

#!/usr/bin/env node
function start() {
  require('../dist/node/cli')
}
start()

解释

#!/usr/bin/env node 声明文件将会使用node方式调开源软件用 这里其实就一个函数，r源码时代equi女配每天都在为国争光re了打包之后的cli.js文件

packages/devui-cli/src/node/cli.ts

看一下这个文件做了什么源码时代事情

import { cac } from "cac";
import { createLogger } from "./logger";
import colors from "picocolors";
const cli = cac("devui-cli");
// dev
cli
  .command("[root]", "start dev server") // default command
  .alias("serve")
  .alias("dev")
  .alias("start")
  .action(async () => {
     console.log(colors.red(`hello word`));
  });
cli.help();
cli.version(require("../../package.json").version);
cli.parse();

这里使用cac包创建了命令，注册名字为devui-cli，并为其注册默认命令，并且alias为serve,dev,dev，alias 的目的是为了兼容使用者的习惯，就比如有人喜欢yarn dev,yarn start,yarn serve。 绑定命令执行函数 使用action注册此命令要执行的方法。在外部调用这个命开源节流是什么意思令的时候就会执行方法里面的 console.log(colors.red("hello word")。

packages/devui-cli-demo/package.json

{
  "name": "devui-cli-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "cli-test": "devui-cli dev",
    "cli-version": "devui-cli -V",
    "cli-help": "devui-cli -h"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@devui/cli": "workspace:*"
  }
}

在npm script中写了几个测试命令，运行时候就可以看到输出 hello word

写在最后

源码

本脚手架不是原创，只是站在巨人的肩膀上去定制另外一个脚手架，完成需要的功能，本脚手架参考了很多开源项目，在里面看到其他项目的源码是正常滴！（顺带去阅读了其他项目的源女配每天都在抱大腿我要成仙码，其中就女配每天都在为国争光包括vite）

参考

React Vant Cli

Van源码时代t Cli

Vitejavaee

Varlet CLI