详解：如何在NPM上发布本身的第一个脚手架工具

前言

脚手架工具能快速生成一个完整的项目结构，帮助开发人员专一于项目开发，十分高效。

表面高大上的脚手架工具，背后的实现原理其实并不复杂。例如 vue-cli 其本质上就是根据不一样的操做指令在远程仓库（例如：GitHub）把不一样的模版拉取到本地。

本文将结合做者的脚手架（lan-cli）实例，为读者快速讲述如何建立一个脚手架并发布到NPM上。

受限于文章篇幅，本文不会对项目代码进行讲解，具体的代码存放在文末的GitHub项目地址上。

技术栈

1. nodejs：脚手架框架核心；
2. commander：处理命令行输入；
3. co：异步流程控制工具；
4. co-prompt：分步输入命令行指令。

大纲

1. 建立项目；
2. 编写指令；
3. 配置脚手架信息；
4. 本地测试；
5. 发布脚手架。

实例讲解

1. 建立项目

如图所示建立一个相似的工程文件。

2. 编写指令

lan-cli的指令一共有四个。

1. lan add ：添加脚手架的项目模板；
2. lan list ：列出脚手架的项目模板；
3. lan delete ：删除脚手架的项目模板；
4. 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…。

结语

以上就是本文的所有内容了，感谢你的阅读，文中部分技术要点受限于文章篇幅，并无展开讲解，若是你有什么疑问或者建议，欢迎你随时留言，互相讨论。

最后，祝工做顺利，生活幸福。