仿vue-cli搭建属于自己的脚手架的方法步骤

2020-06-14 06:12:19易采站长站整理

现在我们就可以在左侧的目录中看到 test 项目了,如下图:

至此,一个小小的脚手架就做完了。:rose::rose::rose:此处应该有鲜花和掌声:clap::clap::clap:

发布到 npm

既然以上命令都执行成功了,那接下来我们就把它发布到 npm 上吧(写都写了,不能浪费:grimacing:)。

删除 test 文件夹,它就本地测试用的,用完就抛弃它(当然做人不能这样)
在根目录下新建 README.md 文件,随便写点使用说明,假装正经一下
在根目录下新建 .npmignore 文件,并写入

/node_modules
,意思就是发布的时候忽略 node_modules 文件夹,
去 npm 官网注册个账号(很简单的),同时搜索一下 xr-cli 这个名字,看看有没有人用,有的话就换一个罗

现在让我们回到项目根目录,执行

npm login
登入 npm 账号,再执行
npm publish
发布,就像下面这样:

没错,就是这样两个简单的命令,我们就发布成功啦,真是可喜可贺:beer::beer::beer:。大概过一分钟左右(反正挺快的),我们再去 npm 官网搜下 xr-cli,就可以看到自己的脚手架啦,哈哈哈哈,贼开心:+1::+1::+1:。

这里补充说明一点:根据规范,只有在发包的24小时内才允许撤销发布的包,所以为了不污染 npm 网站,如果只是测试的话就执行

npm unpublish --force
删除吧,毕竟我们都是有素质的人。

小试牛刀

别急,还没有结束:no_good:‍♀️。发都发出去了,怎么也得验证一波撒。嗯,说的有道理,无法反驳,那就赶紧验收吧!这里我们记得先用

npm unlink
解绑一下命令,不然会相互影响。下面我们打开终端,输入
npm i xr-cli -g
全局安装一下脚手架,然后执行
xr
,如果出现下图中的模样就说明已经安装成功了。

接下来进入到桌面,执行

xr init simple xr-test
,不一会就可以在桌面上看到自己的项目啦。