从零开始写一个前端脚手架一、准备阶段

2023-10-31 18:59:46

前端搭建项目的时候类似create-react-app或者vue-cli脚手架都是输入一个命令,然后填一些或多或少的信息,然后就会生成一个文件夹,里面有些常规的代码.

那么,如果需要搭建一个前端脚手架,就需要准备好.

1.模板代码,这些代码具体放在哪里主要看后续脚手架如何实现搭建项目的功能.最简单的方式就是将模板代码放在git仓库中,在脚本里通过clone的方式给拷贝下来

2.node环境,脚本代码需要在node环境去跑,所以,自然也需要知道一些nodejs的指令.

初始化

我们新建一个文件夹作为我们接下来的根目录,取名cli.

我们在cli目录下初始化一个项目,执行该命令的时候会陆续出现一些命令让人填写项目的基本信息,包括项目名称、版本号、描述之类的,填写完成就可在cli目录下生产一个package.json文件

npm init

依赖安装

编写脚手架时需要去使用一些node的模块,根据不同的需求安装不同的模块,比如我这次需要的模块为

inquirer：用于向用户提出问题和获取回答
chalk：改变命令行打印内容的样式
child_process：用于执行命令行的指令
commander：用于定义自己的命令

那就需要在package.json中配置一下

 "dependencies": {
    "chalk": "^3.0.0",
    "child_process": "^1.0.2",
    "commander": "^4.1.1",
    "inquirer": "^7.0.4"
  },

配置完成并没有结束,还得将模块下载下来,在根目录

npm i

如果出现哪个模块下载不下来,可能是版本有问题,适当手动调整一下对应模块的版本,比如降低一下"inquirer"的版本,然后再npm i 或者单独安装这个模块对应的版本npm i inquirer@^6.0.0 --save

"dependencies": {
    "chalk": "^3.0.0",
    "child_process": "^1.0.2",
    "commander": "^4.1.1",
    "inquirer": "^6.0.0"
  },

码农公寓