脚手架封装

为什么要做脚手架统一项目规范用脚手架强制统一结构、规范、依赖、代码风格提升开发效率节省大量时间。新建项目不用手动配路由、请求封装、环境变量、Eslint、Prettier降低新员工上手成本新人不用问 “怎么建项目”“目录放哪”企业脚手架会自带权限控制请求封装埋点、监控安全策略、代码检查公司内部组件库 / 工具库避免每个人自己写导致漏洞、不规范、不安全一、脚手架基础搭建步骤1初始化项目新建文件夹 my-cli执行 npm init -y项目结构my-cli2/ # 脚手架根目录唯一要发布NPM的目录 ├── index.js # 脚手架入口文件 ├── package.json # 脚手架配置文件 └── template/ # 你的完整React项目直接放这里不发布 ├── public/ ├── src/ └── package.json2安装依赖兼容版本命令行交互工具 npm install inquirer 命令行颜色美化 npm install chalk4.1.2 # 高版本只支持ES模块用4.x稳定版 下载远程git模板 npm install download-git-repo 命令行加载动画 npm install ora 文件操作 npm install fs-extra三、完整脚手架代码创建入口文件index.js脚手架核心#!/usr/bin/env node const fs require(fs-extra); const path require(path); const inquirer require(inquirer); const chalk require(chalk); async function init() { const { name } await inquirer.prompt([ { type: input, name: name, message: 请输入项目名称, default: my-react-app } ]); // 目标路径 const targetDir path.resolve(process.cwd(), name); // 模板路径指向本地 template 文件夹 const templateDir path.join(__dirname, template); // 复制模板 try { await fs.copy(templateDir, targetDir); console.log(chalk.green(✅ 成功创建项目${name})); console.log(chalk.blue( 进入项目cd ${name})); console.log(chalk.blue( 安装依赖npm install)); console.log(chalk.blue( 启动项目npm run start)); } catch (err) { console.log(chalk.red(❌ 创建失败, err.message)); } } init();四、配置脚手架命令打开package.json添加{ name: yuemode-cli, version: 1.0.0, description: 我的React项目脚手架, main: index.js, bin: { yuemode-cli: ./index.js }, scripts: { test: echo \Error: no test specified\ exit 1 }, keywords: [ cli, react, template ], author: , license: ISC, dependencies: { chalk: ^4.1.2, fs-extra: ^11.3.4, inquirer: ^8.2.7, ora: ^5.4.1 } }五、本地测试脚手架把脚手架链接到全局只需执行一次npm link任意目录执行my-cli遇到问题核心问题输入命令自动打开 VSCode应该不常见的问题问题原因Windows 系统中 .js 文件默认打开方式被我修改为 VSCodenpm link 生成的命令指向 index.js执行时被系统用 VSCode 打开并非脚手架代码错误是系统文件关联机制导致最简单解决方案推荐不用改系统直接用 node 运行不使用全局命令在目标项目目录执行node …/my-cli/index.js永久解决方案修改 .js 默认打开方式打开 设置 → 应用 → 默认应用 → 按文件类型选默认应用找到 .js 文件类型将默认应用从 VSCode 改为 node.exe路径通常C:\Program Files\nodejs\node.exe命令不生效排查npm link 必须在脚手架根目录执行提示命令不存在重新执行 npm link三、完整使用流程实训 / 考试标准步骤搭建好 my-cli 脚手架项目在 my-cli 目录执行 npm link新建测试目录 test进入 test 目录执行my-cli(取决于bin里面的key)正常出现脚手架交互完成项目创建六、常用命令速查链接全局命令npm link 卸载全局命令npm rm -g my-cli 直接运行脚手架最稳node ../my-cli/index.js 查找node 位置where node七、如何上传到npm1,确保需要上传的内容与index和package同一级2拥有npm账号简单3开启2fa认证(双因素认证)4上传具体命令npm login //登录 npm publish //上传403报错就是没开启2fa认证npm里面点击头像-Account-Two-Factor Authentication点击enable即可开启上传时需要登录一下点击enter即可当看见 yuemode-cli1.0.0即上传成功八、怎么用全局安装必须先安装一次npm install -g yuemode-cli直接运行脚手架yuemode-cli3.按照要求输入名称等就可以获得项目了