01-脚手架核心概念与原理

脚手架核心概念与原理（Scaffold Core Concepts）

理解前端脚手架的基本概念、工作原理和核心机制，为构建自己的脚手架系统打下理论基础。

---

📋 目录

• 1. 什么是前端脚手架
• 2. 脚手架运行机制
• 3. Node CLI 工作原理
• 4. 文件模板处理
• 5. 插件架构
• 6. 扩展机制

---

1. 什么是前端脚手架

1.1 定义

前端脚手架（Scaffolding） 是一种自动化工具，用于快速生成项目的基础结构和配置文件，帮助开发者跳过重复的初始化工作，专注于业务开发。

1.2 常见脚手架

• create-react-app - React 项目脚手架
• Vue CLI - Vue 项目脚手架
• Vite - 快速的前端构建工具，也提供项目创建功能
• Angular CLI - Angular 项目脚手架
• Next.js CLI - Next.js 项目脚手架

1.3 脚手架的作用

1. 快速初始化项目：一键生成完整的项目结构
2. 统一项目规范：确保团队项目结构一致
3. 集成最佳实践：内置常用的配置和工具
4. 减少重复工作：避免每次手动创建文件结构

---

2. 脚手架运行机制

2.1 基本流程

用户执行命令
    ↓
CLI 工具启动
    ↓
解析命令参数
    ↓
用户交互选择（可选）
    ↓
加载模板
    ↓
处理模板变量
    ↓
生成文件
    ↓
安装依赖（可选）
    ↓
初始化 Git（可选）
    ↓
完成

2.2 核心步骤

步骤 1：命令解析

# 用户输入
my-cli create my-app --template react-ts
 
# CLI 解析
- 命令：create
- 项目名：my-app
- 选项：--template react-ts

步骤 2：用户交互

# 交互式选择
? 选择包管理器: (Use arrow keys)
  ❯ npm
    yarn
    pnpm
 
? 是否安装依赖? (Y/n)
? 是否初始化 Git? (Y/n)

步骤 3：模板处理

// 模板文件
const template = `
import React from 'react';
 
function App() {
  return <div>Hello {{projectName}}</div>;
}
 
export default App;
`;
 
// 处理后
const result = `
import React from 'react';
 
function App() {
  return <div>Hello my-app</div>;
}
 
export default App;
`;

步骤 4：文件生成

// 生成目录结构
my-app/
├── package.json
├── tsconfig.json
├── src/
│   ├── App.tsx
│   └── index.tsx
└── public/
    └── index.html

---

3. Node CLI 工作原理

3.1 CLI 工具的本质

CLI（Command Line Interface）工具本质上是一个可执行的 Node.js 脚本，通过 package.json 的 bin 字段注册为全局命令。

3.2 package.json 配置

{
  "name": "my-cli",
  "version": "1.0.0",
  "bin": {
    "my-cli": "./bin/cli.js"
  }
}

3.3 bin 文件格式

方式一：JavaScript 文件

#!/usr/bin/env node
 
// bin/cli.js
console.log('Hello from CLI!');

方式二：TypeScript 编译后

{
  "bin": {
    "my-cli": "./dist/cli.js"
  }
}

3.4 命令解析库

Commander.js

const { Command } = require('commander');
 
const program = new Command();
 
program
  .name('my-cli')
  .description('前端脚手架工具')
  .version('1.0.0');
 
program
  .command('create')
  .description('创建新项目')
  .argument('<project-name>', '项目名称')
  .option('-t, --template <template>', '选择模板')
  .action((name, options) => {
    console.log(`创建项目: ${name}`);
    console.log(`模板: ${options.template}`);
  });
 
program.parse();

Yargs

const yargs = require('yargs');
 
yargs
  .command('create <project-name>', '创建新项目', (yargs) => {
    return yargs
      .positional('project-name', {
        describe: '项目名称',
        type: 'string'
      })
      .option('template', {
        alias: 't',
        type: 'string',
        description: '选择模板'
      });
  }, (argv) => {
    console.log(`创建项目: ${argv.projectName}`);
    console.log(`模板: ${argv.template}`);
  })
  .parse();

---

4. 文件模板处理

4.1 模板引擎

模板引擎用于处理模板文件中的变量替换和逻辑处理。

EJS（Embedded JavaScript）

const ejs = require('ejs');
 
const template = `
<%= projectName %>
<% if (useTypeScript) { %>
import React from 'react';
<% } else { %>
import React from 'react';
<% } %>
`;
 
const result = ejs.render(template, {
  projectName: 'my-app',
  useTypeScript: true
});

Mustache

const Mustache = require('mustache');
 
const template = `
{{projectName}}
{{#useTypeScript}}
import React from 'react';
{{/useTypeScript}}
`;
 
const result = Mustache.render(template, {
  projectName: 'my-app',
  useTypeScript: true
});

Handlebars

const Handlebars = require('handlebars');
 
const template = Handlebars.compile(`
{{projectName}}
{{#if useTypeScript}}
import React from 'react';
{{/if}}
`);
 
const result = template({
  projectName: 'my-app',
  useTypeScript: true
});

4.2 文件处理流程

// 1. 读取模板文件
const templateContent = fs.readFileSync('template/App.tsx.ejs', 'utf-8');
 
// 2. 渲染模板
const rendered = ejs.render(templateContent, {
  projectName: 'my-app',
  author: 'John Doe'
});
 
// 3. 写入目标文件
fs.writeFileSync('my-app/src/App.tsx', rendered);

4.3 目录结构模板

// 模板目录结构
templates/
└── react-ts/
    ├── package.json.ejs
    ├── tsconfig.json
    ├── src/
    │   ├── App.tsx.ejs
    │   └── index.tsx
    └── public/
        └── index.html
 
// 生成后的目录结构
my-app/
├── package.json
├── tsconfig.json
├── src/
│   ├── App.tsx
│   └── index.tsx
└── public/
    └── index.html

---

5. 插件架构

5.1 插件的作用

插件机制允许脚手架在核心功能基础上扩展能力，类似于 Webpack 和 Vite 的插件系统。

5.2 插件架构设计

CLI Core
    ↓
Plugin System
    ├── Hook 机制
    ├── 生命周期
    └── 插件注册
    ↓
Plugins
    ├── Plugin A
    ├── Plugin B
    └── Plugin C

5.3 Hook 机制

class Scaffold {
  constructor() {
    this.hooks = {
      beforeCreate: [],
      afterCreate: [],
      beforeInstall: [],
      afterInstall: []
    };
  }
 
  // 注册 Hook
  hook(name, fn) {
    if (this.hooks[name]) {
      this.hooks[name].push(fn);
    }
  }
 
  // 执行 Hook
  async executeHook(name, ...args) {
    const hooks = this.hooks[name] || [];
    for (const hook of hooks) {
      await hook(...args);
    }
  }
 
  // 创建项目
  async create(projectName, options) {
    await this.executeHook('beforeCreate', projectName, options);
    // 创建逻辑
    await this.executeHook('afterCreate', projectName, options);
  }
}

5.4 插件示例

// 插件：自动添加 ESLint
function eslintPlugin(scaffold) {
  scaffold.hook('afterCreate', async (projectName) => {
    // 添加 ESLint 配置
    const eslintConfig = {
      extends: ['eslint:recommended']
    };
    fs.writeFileSync(
      `${projectName}/.eslintrc.json`,
      JSON.stringify(eslintConfig, null, 2)
    );
  });
}
 
// 使用插件
const scaffold = new Scaffold();
eslintPlugin(scaffold);

---

6. 扩展机制

6.1 配置系统

允许用户通过配置文件自定义脚手架行为。

// .scaffoldrc.json
{
  "templates": {
    "custom-react": "./templates/custom-react"
  },
  "defaults": {
    "packageManager": "pnpm",
    "installDeps": true
  }
}

6.2 自定义模板

允许用户创建和使用自己的模板。

# 添加自定义模板
my-cli template add my-template ./my-template
 
# 使用自定义模板
my-cli create my-app --template my-template

6.3 远程模板

支持从远程仓库下载模板。

# 从 GitHub 下载模板
my-cli create my-app --template github:user/repo
 
# 从 npm 包下载模板
my-cli create my-app --template npm:my-template-package

6.4 运行时扩展

支持在项目运行时添加功能（类似 Vite 中间件）。

// 添加 Mock 服务器
my-cli add mock-server
 
// 添加开发工具
my-cli add devtools

---

📝 总结

核心概念

1. 脚手架：自动化项目初始化工具
2. CLI：命令行接口，通过 Node.js 实现
3. 模板引擎：处理模板变量和逻辑
4. 插件系统：扩展脚手架功能
5. 扩展机制：支持用户自定义和远程模板

关键技术

• Node.js：运行环境
• Commander/Yargs：命令解析
• EJS/Mustache：模板引擎
• Inquirer：用户交互
• 文件系统 API：文件操作

下一步

• 从零开始构建脚手架 - 实践构建一个完整的脚手架系统

---

脚手架 前端工程化 CLI工具 Node.js 原理