详解：如何在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…。

结语

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

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