脚手架 on Saiga

写几个小脚本帮自己省时间：前端 CLI / 脚手架实践

wuwenzen@outlook.com (wuwj) — Sat, 28 Sep 2024 00:00:00 +0000

有段时间我发现自己经常在做几件很机械的事：

新建一个页面：建目录、复制模板、改标题、改路由
加一个接口：建 service 文件、写类型、写请求封装
搭一个模块：列表页 + 详情页 + 编辑页，一遍遍重复

于是索性写了一组小 CLI 工具，把这些动作变成命令行：

npx fe-tools create-page
npx fe-tools create-api
npx fe-tools create-module

这篇文章就简单记录一下这几个脚本的思路。

1. `create-page`：新页面一条命令

很多中台项目新增页面的套路都差不多：

在 views 下建目录
填一个基础骨架组件
在路由里挂载
有的还要加到菜单配置里

用 Node.js 写了一个 create-page 命令：

npx fe-tools create-page

命令执行后，做几件事：

命令行交互询问：
- 页面英文名（路由 path）
- 页面中文标题
- 页面类型：列表 / 表单 / 详情 / 组合
基于模板生成对应文件，例如：

<template>
  <PageWrapper title="投资人概览">
    <!-- TODO: 填充页面内容 -->
  </PageWrapper>
</template>

<script setup lang="ts">
// 预留接口调用和状态管理位置
</script>

自动往某个路由模块里追加配置

这样新页面出现的那一刻就已经可以访问，只需要填内容。

2. `create-api`：接口封装生成器

写接口封装时经常要做：

从零搭一个前端构建脚手架：Webpack 实践

wuwenzen@outlook.com (wuwj) — Thu, 05 Sep 2019 00:00:00 +0000

那会儿刚开始上手 Webpack 的时候，看官方文档一堆术语：entry、output、loader、plugin，看得云里雾里。直到自己从零搭了一套非常简陋的脚手架，才真正把这些概念串起来。

这篇文章就用一个「最小可用前端脚手架」为例，帮你把 Webpack 入门阶段最常见的概念打通。

目标：一个最小可用的前端脚手架

希望做到：

支持打包 ES6 代码（import、箭头函数 等）。
支持打包 CSS。
支持本地开发服务器 + 热更新。
打包输出一份 dist，可以直接丢到静态服务器上跑。

目录长这样：

my-webpack-starter
├── package.json
├── webpack.config.js
├── /src
│   ├── index.js
│   └── index.css
└── /dist  # 构建后生成

第一步：初始化项目

mkdir my-webpack-starter
cd my-webpack-starter
npm init -y

安装 Webpack 相关依赖：

npm install webpack webpack-cli webpack-dev-server --save-dev

第二步：准备一个简单入口文件

src/index.js：

import './index.css';

const root = document.getElementById('app');
root.innerText = 'Hello Webpack Starter!';

src/index.css：

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#app {
  padding: 24px;
  font-size: 20px;
}

public/index.html（作为模板）：