前言
脚手架工具能快速生成一个完整的项目结构,帮助开发人员专注于项目开发,十分高效。
表面高大上的脚手架工具,背后的实现原理其实并不复杂。例如 vue-cli
其本质上就是根据不同的操作指令在远程仓库(例如:GitHub
)把不同的模版拉取到本地。
本文将结合作者的脚手架(lan-cli
)实例,为读者快速讲述如何创建一个脚手架并发布到NPM
上。
受限于文章篇幅,本文不会对项目代码进行讲解,具体的代码存放在文末的GitHub
项目地址上。
技术栈
- nodejs:脚手架框架核心;
- commander:处理命令行输入;
- co:异步流程控制工具;
- co-prompt:分步输入命令行指令。
大纲
- 创建项目;
- 编写指令;
- 配置脚手架信息;
- 本地测试;
- 发布脚手架。
实例讲解
1. 创建项目
如图所示创建一个类似的工程文件。2. 编写指令
lan-cli
的指令一共有四个。
lan add
:添加脚手架的项目模板;lan list
:列出脚手架的项目模板;lan delete
:删除脚手架的项目模板;lan init
:初始化脚手架的项目; 指令代码在如图文件中。
3. 配置脚手架信息
如图所示在package.json
文件中配置好脚手架的信息。
4. 本地测试
bin/lan
是脚手架的入口文件,并且在package.json
中配置如下代码。
"bin": {
"lan": "bin/lan"
}
配置好入口文件后,在根目录下的命令行输入npm link
,就可以把lan
命令绑定到全局,直接使用测试脚手架工作是否可以正常运行。
5. 发布脚手架
完成脚手架后,我们就可以发布到NPM
上了。
首先需要到 npm (www.npmjs.com/)上注册一个账号,注册过程略。
然后在终端执行登录命令,输入用户名、密码、邮箱即可登录。
npm login
登录成功后,输入命令,发布组件。
npm publish
发布成功后,一般会有npm发送给你的通知邮件,进入npm官方,登录自己的账号,查看刚刚发布的组件库。
项目地址
本文项目Github
地址:github.com/jiangjiahen…。
结语
以上就是本文的全部内容了,感谢你的阅读,文中部分技术要点受限于文章篇幅,并没有展开讲解,如果你有什么疑问或者建议,欢迎你随时留言,互相讨论。
最后,祝工作顺利,生活幸福。