前言
hellow,大家好。最近刚写完一个react项目,又想写一个练练手,可是我突然发现一个问题。那就是又要从零构建一个完整的项目环境,避免不了要重复搬砖搬砖还是搬砖,确实挺麻烦,可能得花费20多分钟。啥?我项目都还没写就花了我半小时?气愤之下,我立刻想了个好主意,我能不能用node写个脚手架呢?就像vue react它们的脚手架一样,直接运行vue create xxx 就直接把它那套模板搬过来了,可是我的明显是基于他们之上再结合自己日常项目需求所需的额外的包来搭建我们的项目。现在很多公司都有自己的脚手架,无非是根据自己公司的项目来定制的一套模板而已,并且在此基础之上添加了一些脚本命令,再生成特定的文件夹和文件一系列操作。就比如创建一个store,我们可能需要下面这样的结构
![](https://i-blog.csdnimg.cn/blog_migrate/e53f6715f9f703834359d75ca854ca3e.webp?x-image-process=image/format,png)
启程
脚本是如何执行的?
大家在用脚手架创建项目时有没有这样的困惑,为啥敲个vue create xxx 它就知道帮我创建项目,它是如何运行的呢?我们要怎么实现呢?让我们带着问题一步一步实现吧。乍看觉得很复杂,其实当我们深入了解的时候就会发现,其实也没有这么难。
初始化
新建一个acr-cli 文件夹 寓意:a auto react cli 自动构建react项目执行脚本
npm init -y
初始化生成 package.json 文件新建index.js 入口文件先下载 commander 模块 辅助我们执行终端命令先实现一个最简单的命令 acr -V 或者 acr --version 查看我们脚手架版本
index.js
开头这个注释很重要!!这是标记运行脚本,不能省略
#!/usr/bin/env node
const program = require('commander')
// 查看版本号
program.version(require('./package.json').version)
// 解析终端指令
program.parse(process.argv);
package.json
**注意添加 bin对象 这段指令!**指定脚本执行的入口文件即后续操作
{"name": "acr-cli","version": "1.0.0","description": "a auto create react cli","main": "index.js","bin": {"acr": "index.js"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["react","vue","acr"],"author": "kzj","license": "MIT","homepage": "https://github.com/kzj0916","repository": {"type": "git","url": "https://github.com/kzj0916"},"dependencies": {"commander": "^6.1.0","download-git-repo": "^3.0.2","ejs": "^3.1.5"}
}
修改完成后,执行脚本
npm link