从零打造前端脚手架 😈

什么是 CLI

• CLI 是命令行界面（Command Line Interface）的缩写，是一种用户与计算机交互的方式。它提供了一种基于文本的界面，用户可以通过输入文本命令来操作计算机。
• CLI 是操作系统中常见的一种界面类型，它可以在 Windows、Linux、MacOS 等操作系统中使用。
• CLI 的用途是非常广泛的，它可以用于执行各种系统管理、网络管理、文件管理、编程调试等任务。许多程序员、系统管理员、网络专家喜欢使用 CLI 来进行任务操作，因为它可以帮助他们更快速地完成任务，并且在某些情况下比其他界面更加灵活和强大。

CLI 的优缺点

::: 优点

1. 速度快：相比于图形用户界面（GUI），CLI 更快速地执行操作，因为它不需要加载大量的图形元素。
2. 灵活性高：CLI 提供了更多的自定义选项，用户可以根据自己的需要进行定制化。
3. 可批处理：CLI 可以通过脚本进行批处理，可以让用户一次性执行多个命令，从而提高工作效率。
4. 安全性高：由于 CLI 需要用户输入命令，因此它比 GUI 更加安全，可以避免一些误操作。

:::

::: 缺点

1. 学习成本高：相比于 GUI，CLI 的学习成本更高，需要用户掌握一些基本的命令语法和操作规则。
2. 可读性差：CLI 输入输出的结果通常是文本形式，如果输出信息过多，可能会导致用户难以阅读。
3. 操作命令易错：由于 CLI 需要用户输入命令，所以有些命令可能会因为用户输入错误而导致操作失败。

:::

Frontend with CLI

在前端生态圈中，CLI 有很多应用场景，例如 Eslint支持 CLI 的使用方式来进行工程代码格式检测、修复，又如Typescript支持 CLI 的使用方式来将.ts文件转译成.js等等

今天我们抽取其中用来 初始化前端工程 的这一分之来展开详细聊聊,这一类 CLI 也就是我们俗称的脚手架

以下内容大家一定都不陌生：

# 创建一个基于Webpack的React工程
create-react-app your_project_name

# 创建一个基于Webpack的Vue2.x工程
vue create your_project_name

写一个前端脚手架

回顾上面 CLI 的概念以及使用方式，我们这里一起实现这样一个功能: 通过在终端使用命令的方式，生成Vue或React框架对应的项目基架

思考一下我们该如何实现？大体上可以分为三个环节：

1. 创建可执行的终端node命令
2. 解析用户输入的命令
3. 根据解析后得到的具体信息，生成与之对应的项目基架模版

初始化

mkdir create-web-app # 名字随意，但推荐是和我们后续使用 CLI 时的命令保持一致

cd ./create-web-app

npm init -y

注册node可执行命令

1. 根目录创建 index.js 文件，标识使用node作为该脚本的解释器

#!/usr/bin/env node

::: Tips
#! 是为了指定脚本的解释程序，可是不同用户或者不同的脚本解释器有可能安装在不同的目录下，系统如何知道要去哪里找你的解释程序呢？ /usr/bin/env 就是告诉系统可以在 PATH 目录中查找。所以配置#!/usr/bin/env node, 就是解决了不同的用户 node 路径不同的问题
:::

2. 修改 package.json文件 bin 字段指定输入command 时对应执行的入口文件;修改 type字段 以支持 esmodule

{
  "name": "create-web-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
+ "type":"module"
+ "bin": "index.js",
}

解析用户输入的命令

这是最为核心的一环，我们的程序给用户提供一份文档，指导用户如何使用，那么当用户按照文档使用时就应该得到相同的结果，这个原则在编程中非常重要，因为它可以帮助程序员确保程序的可重复性和可预测性

1. 安装相关依赖

npm install minimist prompts -D

2. minimist 用来解析 Inline Config

import minimist from 'minimist'

const argv = minimist(process.argv.slice(2))

console.log(argv)

eg: 终端运行 node index.js xxx yyy --name zzz , 控制台将打印 { _: [ 'xxx', 'yyy' ], name: 'zzz' }

3. prompts 用来交互式获取 User Config

import prompts from 'prompts'

const answer = await prompts([
  {
    type: 'text',
    name: 'projectName',
    message: 'Project Name',
  },
  {
    type: 'select',
    name: 'framework',
    message: 'Select a framework:',
    initial: 0,
    choices: [
      {
        title: 'react',
        value: 'react',
      },
      {
        title: 'vue',
        value: 'vue',
      },
    ],
  },
])

console.log(answer)

文件系统交互,使用 node内置的 fs path等模块对文件进行读写等操作

import fs from 'node:fs'
import { fileURLToPath } from 'node:url'
import path from 'node:path'

// copy 目录
const copyDir = (srcDir, destDir) => {
  fs.mkdirSync(destDir, { recursive: true })
  for (const file of fs.readdirSync(srcDir)) {
    const srcFile = path.resolve(srcDir, file)
    const destFile = path.resolve(destDir, file)
    copy(srcFile, destFile)
  }
}

// copy 文件
const copy = (src, dest) => {
  const stat = fs.statSync(src)
  if (stat.isDirectory()) {
    copyDir(src, dest)
  } else {
    fs.copyFileSync(src, dest)
  }
}

const src = path.resolve(fileURLToPath(import.meta.url), '../folder1/')

const dest = path.resolve(fileURLToPath(import.meta.url), '../folder2/')

copy(src, dest)

完整示例代码

#!/usr/bin/env node
import fs from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import minimist from 'minimist'
import prompts from 'prompts'

const CWD = process.cwd()

// default config
const DEFAULT_TARGET_DIR = 'my-web-app'

const argv = minimist(process.argv.slice(2))

const copyDir = (srcDir, destDir) => {
  fs.mkdirSync(destDir, { recursive: true })
  for (const file of fs.readdirSync(srcDir)) {
    const srcFile = path.resolve(srcDir, file)
    const destFile = path.resolve(destDir, file)
    copy(srcFile, destFile)
  }
}

const copy = (src, dest) => {
  const stat = fs.statSync(src)
  if (stat.isDirectory()) {
    copyDir(src, dest)
  } else {
    fs.copyFileSync(src, dest)
  }
}

async function init() {
  let targetDir =  DEFAULT_TARGET_DIR
    try {
    result = await prompts(
      [
        {
          type:  'text',
          name: 'projectName',
          message: 'Project name:'
          initial: DEFAULT_TARGET_DIR,
          onState: state => {
            targetDir = state.value || DEFAULT_TARGET_DIR
          },
        },
        {
          type: 'select',
          name: 'framework',
          message:'Select a framework:',
          initial: 0,
          choices:[
            {
                title:'react',
                value:'react'
            },
             {
                title:'vue',
                value:'vue'
            }
          ]
        },
      ],
      {
        onCancel: () => {
          throw new Error(red('✖') + ' Operation cancelled')
        },
      }
    )
    const { framework, projectName  } = result

    const root = path.join(CWD, targetDir)

    let template =  framework?.name

   // 获取templates路径
    const templateDir = path.resolve(
      fileURLToPath(import.meta.url),
      '../templates/',
      template
    )

    // 写入文件
    const write = (file, content) => {
      const targetPath = path.join(root, file)
      if (content) {
        fs.writeFileSync(targetPath, content)
      } else {
        copy(path.join(templateDir, file), targetPath)
      }
    }

    // 写入模版文件
    const files = fs.readdirSync(templateDir)
    for (const file of files.filter(f => f !== 'package.json')) {
      write(file)
    }

    const pkg = JSON.parse(
      fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
    )
    pkg.name = projectName
    write('package.json', JSON.stringify(pkg, null, 2) + '\n')

    // 生成完成后提示文案
    const cdProjectName = path.relative(CWD, root)
    console.log(`\nDone. Now run:\n`)
    if (root !== CWD) {
      console.log(
        `  cd ${cdProjectName}`
      )
    }
     console.log('  npm install')
     console.log('  npm run dev')
     console.log()
  } catch (cancelled) {
    console.log(cancelled.message)
    return
  }
}

init().catch(e => {
  console.error(e)
})

• 如何使用

1. 使用npm link,将工程 link 到 npm 全局,然后通过终端create-web-app使用
2. 发布到 npm，安装到全局，然后通过终端create-web-app使用

优化

• 安全,文件系统操作前做必要校验或二次确认，例如删除文件等；package.json name 字段合法性校验

• UX、DX 优化,typescript,unbuild stub 模式，方便 dev 调试

• Template 最佳实践

总结

• 统一项目结构和规范，减少出错几率，方便团队协作和维护,避免重复的工作
• 通过脚手架创建项目，可以快速生成基础的文件和目录结构，集成常用的工具和框架，例如 Webpack、Babel、ESLint 等
• 帮助开发人员更好地处理编译、打包、代码规范等问题，提高开发效率和代码质量，同时也能够减轻开发人员的负担，让我们更专注于业务逻辑的实现。