03 - 前端脚手架 - 确定项目目标 & 方案选型

确定目标

快速搭建项目基础架构
配置可选，插拔式搭建
支持多种场景，mobile，pc，node包, node service等
支持多个版本。
内嵌业务组件
支持其他github三方模板一键clone

技术选型

确认完项目目标，下一步就是做基础的技术选型。

在技术选型之前，我们需要一个大概的项目目录来确认我们到底需要什么。可以参考下面这个目录来设计

因为会涉及到依赖的共用问题，我们的项目打算采用 monorepo的方案来开发。我个人用的比较多的是lerna 。我就还是使用lerna + pnpm来开发，大家也可以参考这篇文章来做技术选型。选择自己熟悉的即可。

js 复制代码

root
  -- script //用于运行脚本
  -- packages // 各个包的位置
    -- cli // 主包，用于调用各个子包来引入不同的功能
    -- cli-plugin-eslint // eslint插件，提供eslint 功能
    -- cli-plugin-ts
    -- cli-plugin-vue
    -- cli-plugin-react
    -- cli-plugin-react-router
    -- cli-plugin-vue-router
    -- cli-service
    -- cli-mobile
  -- docs // 文档位置

一定会有朋友好奇，你提供这些功能vite cli也有啊，为啥我要自己造呢?

一站式搞定。不需要切换不同的脚手架。
加入一些自己内部的插件或功能。例如埋点，组件库，代码风格等。

其实在互联网公司的工程化里，脚手架只是公司整体风格统一的一个方案。还有更多的方案可以选择。这个不必纠结，你觉得用的上就一定用的上。（有点啰嗦了，下面继续）。

依赖包

我们回顾一下之前使用vue cli 生成项目的流程, 会使用一些终端的node包

输入 vue create xxx

commander：捕获命令，并执行相关动作
询问需要是否需要 router store ts 等

inquirer：终端问询：用于交互式问询，以获取用户配置
开始生成项目

chalk：优化生成时的loading ui，提供更好的交互及主题风格 ejs：js模版引擎，生成某个配置代码的工具 fs-extra：文件操作，生成文件的工具 download-git-repo：下载三方项目模板
其他工具：

execa.js：多进程操作

起步 - 搭建项目

1. 初始化lerna项目

执行下面命令创建lerna项目(推荐使用 pnpm)

shell 复制代码

pnpm i lerna --global

git init sy-cli && cd sy-cli

lerna init

mkdir packages && cd packages

执行上面命令将获取一个只有一个packages的项目目录

创建cli 主项目

shell 复制代码

lerna create cli

随后一直enter即可安装完成。

引入commander

给我们的脚手架起个名字，我叫做 sy-cli。这个名字随意了。下面我们将实现下面的功能

sy --version 获取当前脚手架版本

sy create 目标是新建一个项目，现在只需要能监听到这个方案即可

步骤

在 cli/packages.json 中加入下面命令

json 复制代码

{
  ...
  "bin": {
    "sy": "./bin/sy.js"
  },
  ...
}

创建 bin/sy.js 并加入下面代码

js 复制代码

#! /usr/bin/env node

const { program } = require('commander'); // 引入commander模块

// 设置脚手架的版本号，版本号从package.json中获取，并定义基本的使用方法提示
program.version(`v${require('../package.json').version}`).usage('<command> [option]')

// 定义一个名为'create'的命令，用于创建项目
program
  .command('create <project-name>') // <project-name>是用户创建项目时需要提供的项目名称
  .description('create a project!') // 为命令提供描述
  .option('-f, --force', 'overwrite directory if it exists') // 添加选项'-f'或'--force'，如果目标目录存在，则覆盖
  .action((projectName, options) => { // 定义命令的执行动作，projectName为项目名称，options为命令行选项
    console.log(projectName, options); // 在控制台输出项目名称和选项
  })

// 解析命令行参数，必须调用此方法
program.parse(process.argv)

本地调试

开发过程中是不可能频繁发包的。但是又需要测试代码状态。这个时候就需要使用 npm link命令来创建软连接。随机可以全局使用了。

到此为止，我们就创建了一个基本的工程。后面的文章我会尽快更新。大家尽情期待