该系列主要是自主学习时的整理性文档,对于网上的不少博客有借鉴和学习.主体方向部分借鉴了@前端小黑 的博客 .感谢其提供了一个清晰地方向
贴上原地址:前端工程化 搭建自己的脚手架工具详细步骤
前端搭建项目的时候类似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"
},
这样相关的模块就准备好了,可以去写相关脚本了.
上一篇:没了
