详解:如何在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 (https://www.npmjs.com/)上注册一个账号,注册过程略。

然后在终端执行登录命令,输入用户名、密码、邮箱即可登录。

npm login

在这里插入图片描述

登录成功后,输入命令,发布组件。

npm publish

发布成功后,一般会有npm发送给你的通知邮件,进入npm官方,登录自己的账号,查看刚刚发布的组件库。

在这里插入图片描述

项目地址

本文项目Github地址:https://github.com/jiangjiaheng/Learn-NPM/tree/master/Scaffold/lan-cli

结语

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

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

在这里插入图片描述

https://juejin.im/post/5df349e7518825127a036cad

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论