哪些实用脚本适合前端开发者？

wen 实用脚本 2026-06-17 1

本文目录导读：

哪些实用脚本适合前端开发者？

项目初始化与工程化脚本
开发效率与调试脚本
构建与部署脚本
数据处理与模拟脚本
日常运维脚本
总结：如何选择这些脚本？

这个问题问得很好,前端开发者日常有很多重复性、低创造性的工作，一个好的脚本能极大提升效率。

下面我按应用场景分类，整理一些非常实用、且大多数前端开发者能立即用上的脚本类型和具体思路，这些脚本通常用 Node.js 或 Shell 编写。

项目初始化与工程化脚本

这类脚本帮你快速搭架子,省去手动创建文件和配置的时间。

快速创建组件模板
- 场景：每次新建一个React/Vue组件，都要手动创建 .jsx/.tsx、.scss/.css、.stories.js 等文件。
- 脚本思路：一个Node.js脚本，接收组件名和类型（functional 或 class），自动生成以下文件并写入标准模板。
```
# 使用示例
node generate-component.js Button functional
```
- 产出：/components/Button/ 目录下自动生成 index.jsx、Button.scss、Button.stories.jsx。
生成路由表/页面目录
- 场景：在 react-router 或 vue-router 中，每加一个新页面就要手动在路由文件中加一行 import 和 route 对象。
- 脚本思路：扫描 /pages 或 /views 目录，根据目录结构和文件名（如 [id].tsx），自动生成所有路由配置的代码，并写入 router/index.ts。特别适合大型CMS或后台系统。
自动生成API接口调用代码
- 场景：后端提供了Swagger/OpenAPI 3.0文档，前端需要手写大量带类型的 axios/fetch 请求代码。
- 脚本思路：使用 openapi-typescript-codegen 或 swagger-typescript-api 这类库，写一个脚本一键拉取最新接口文档，自动生成带完整TypeScript类型定义的请求函数、model和枚举。
```
# 一个简单的package.json script示例
"gen-api": "openapi --input https://api.example.com/openapi.json --output ./src/services --client axios"
```

开发效率与调试脚本

这类脚本直接在你的浏览器控制台或VSCode终端中运行，解决开发中的痛点。

浏览器控制台脚本 (适用于Chrome/Firefox DevTools)
- 场景：你需要快速提取页面上的所有图片URL、所有链接，或者模拟用户操作（如自动填表单）。
```
// 提取所有图片 URL (在Console中运行)
const images = [...document.querySelectorAll('img')].map(img => img.src);
console.log(JSON.stringify(images, null, 2));
```
- 场景：将页面结构化数据（如一个复杂表格）复制为JSON或Markdown，方便粘贴到文档里。

JSON格式化与对比脚本 (Node.js)

场景：后端返回的JSON被压缩成一行，肉眼无法阅读。

// format-json.js
const fs = require('fs');
const path = process.argv[2];
const data = JSON.parse(fs.readFileSync(path, 'utf-8'));
fs.writeFileSync(path, JSON.stringify(data, null, 2), 'utf-8');
console.log('文件已格式化');

node format-json.js ./data.json

批量替换/正则重命名
- 场景：设计稿中所有的 primary-color 变量从 #1890ff 改成了 #1677ff，需要替换所有SCSS/LESS文件中的值。
- 场景：项目中所有 import { Button } from 'antd' 需要改成 import { Button } from 'antd/es/button' 进行按需加载优化。
- 工具：sed (Mac/Linux) 或 Node.js的 fs + replace-in-file 库。

构建与部署脚本

这类脚本通常在 package.json 的 scripts 中调用，管理复杂的构建流程。

多环境构建与打包
- 场景：开发、测试、生产环境有不同的API地址、CDN路径、子域名。
- 脚本思路：读取 .env.development、.env.staging、.env.production 文件，传入构建命令。
```
// package.json
{
"scripts": {
"build:dev": "vite build --mode development",
"build:staging": "vite build --mode staging",
"build:prod": "vite build --mode production && npm run upload-to-cdn"
}
}
```
自动版本号与Changelog生成
- 场景：每次上线前手动改 package.json 的 version 字段。
- 脚本：使用 standard-version 或 release-it，一键完成：根据commit信息自动计算版本号（major/minor/patch）、生成CHANGELOG.md、打Git Tag、推送。
```
# 自动升级小版本号
npx standard-version --release-as minor
```
代码质量检查 (Git Hooks)
- 场景：在git commit之前，自动运行 ESLint、Prettier、单元测试，禁止提交有语法错误的代码。
- 工具：husky + lint-staged，这不是一个脚本，但本质是一个自动化的脚本流程。
```
// package.json 配置
"lint-staged": {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,scss,less}": ["stylelint --fix", "prettier --write"]
}
```

数据处理与模拟脚本

Mock数据生成器
- 场景：后端接口还没写完，前端需要模拟大量假数据来开发列表页、详情页。
- 脚本思路：使用 mockjs 或 faker.js (新为 @faker-js/faker)，生成10-100条随机用户、订单、文章数据，输出为JSON文件。
```
// generate-mock-users.js
import { faker } from '@faker-js/faker';
```
const users = Array.from({ length: 50 }, () => ({ id: faker.string.uuid(), name: faker.person.fullName(), email: faker.internet.email(), avatar: faker.image.avatar(), }));

fs.writeFileSync('./mock/users.json', JSON.stringify(users, null, 2));
```
-   **进阶**：配合 `json-server`，这个JSON文件立即变成一个完整的RESTful API服务，支持分页、筛选、排序。
```
图片压缩/雪碧图生成
- 场景：项目中有很多小图标，需要合并成一张雪碧图以减少HTTP请求。
- 工具：spritesmith (Node.js库)，写一个脚本扫描指定文件夹的png图片，自动合成一张大图并生成对应的CSS（background-position）。
- 现代替代方案：直接使用SVG Sprite (iconfont) 或 Webpack/Vite的 url-loader，但理解这个原理仍然有帮助。

日常运维脚本

日志分析
- 场景：查看生产环境 console.log 或 Sentry 的错误日志，统计最频繁出现的错误类型。
- 脚本思路：grep, awk, sort, uniq 等Linux命令的组合，或使用Node.js读取日志文件进行分析。
本地开发环境一键启动
- 场景：项目依赖Docker、MySQL、Redis、Nginx，每次重启电脑都要一个个启动。
- 脚本：一个简单的 docker-compose up -d 或一个shell脚本 ./start-dev.sh，按顺序启动所有依赖。