1.创建包名

2.设置命令行执行文件

3.制定CLI欢迎界面

命令创建

酷炫字体样式

README.md配置版本图标

4 发布包到NPM上面

上传包到NPM

更新和删除包

1.创建包名

·创建vue-file-util文件夹，文件夹的名字就是包的名字。在文件夹下面npm init -y 初始默认配置

{"name": "vue-file-util", // 项目名称,也就是文件夹的名字"version": "1.0.0", // 版本(遵循“大版本.次版本.小版本”的格式)"description": "This is my first package", // 包的描述"main": "index.js", // 指定了程序的主入口文件"scripts": {// 运行脚本命令的npm命令行缩写,比如进程出现的npm run serve"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["vue"], // 关键字"author": "", // 包的作者"license": "ISC" //授权方式
}

目前前端通用的版本规范是：“semantic versioning”

2.设置命令行执行文件

创建bin文件夹下的vu.js内容如下：

#!/usr/bin/env node
console.log('打印')

注解：#!/usr/bin/env node 是指定脚本的解释程序用node，也可以用 #!/usr/bin/node【参考：Shebang】

package.json中写下：


// 命令行vc就会执行当前路径下的bin文件夹的vc.js
"bin": {"vu": "./bin/vu.js"}

这里设置之后，等以后别的项目安装自己的包时，会在node_modules/.bin文件下找到我们的运行脚本。

让代码跑起来

1. 为了方便开发可以使用软连接到全局cmd中输入执行 npm link // 将npm 模块链接到对应的运⾏项⽬中去

输入vu，就可以看见已经执行了vu.js文件并且打印。

2. 也可以进入bin文件下 node vc.js执行

3.制定CLI欢迎界面

命令创建

前端开发中总会安装一些包，比如：express,vue-cli等通过一些命令执行一些任务。怎么做的呢，就是使用commander是一个轻巧的nodejs模块。

安装：

npm i commander -S

commander的API：

command：自定义执行的命令
option：可选参数
alias：用于执行命令的别名
description：命令描述
action：执行命令后所执行的方法
usage：用户使用提示
parse：解析命令行参数，注意这个方法一定要放到最后调用

修改vc.js文件

#!/usr/bin/node
console.log('打印')const program = require('commander')
program.version(require('../package.json').version)program.command('welcome <user>').description('hi,Thank you for coming ').action((user) => {console.log('使用的名字是：' + user)})program.parse(program.argv)

此时我们可以打印一些vu的帮助，可以看见有了版本号，还有我们的welcome命令

执行以下vu welcome tom可以看见我们成功了

酷炫字体样式

安装figlet(是字体样式)，chalk（是粉笔字体颜色）

npm install figlet chalk -S

修改vc.js

#!/usr/bin/node
const program = require('commander')
const { promisify } = require('util')
const figlet = promisify(require('figlet'))
const chalk = require('chalk')program.version(require('../package.json').version)program.command('welcome <user>').description('hi,Thank you for coming ').action(async (user) => {// console.log('使用的名字是：' + user)const data = await figlet(`welcome   ${user}`)console.log(chalk.green(data))})program.parse(program.argv)

用行试试效果

README.md配置版本图标

创建Vue项目打开的时候会出现，这边图标

这种图标可以去这些图标可以去https://shields.io/制作

4 发布包到NPM上面

上传包到NPM

必须要有npm的账号，如果没有注册直接去官网注册（注册完一定要邮箱验证，否则无法上传！！）
看看自己的npm源是哪里，如果是npm是淘宝之类的要切过来（可以用nrm ls 或者npm config get registry ）【一定要用npm的源！！！npm config set registry=http://registry.npmjs.org 】
执行npm login 登录，输入你注册时候的用户名、密码、邮箱
可以用 npm whoami 看看是不是你，如果没啥问题，那就发布吧~~执行 npm publish 发布软件包
发布成功之后，会收到邮件的，也可以自己去Npm上面看自己发布的包

更新和删除包

更新

更新其实也是执行npm publish就可以，但是需要修改版本号，如果版本号没有修改会报错，上传不了如下：

版本号在package.json的version字段修改，版本号修改遵循规则。(也可以不手打去改，执行命令也可以)

删除

npm unpublish --force //强制删除
npm unpublish guitest@1.0.1 //指定版本号

注意：发布成功的包只有在24小时以内才可以删除

其他待解决问题

项目中使用其他包安装到devDependencies的时候，发版之后是没有node_modules的，但在其他项目使用我们包时会报错没有安装依赖，所有目前我是按照在dependencies里的。

虽然尝试了配置.gitignore或者.npmignore丝毫没有忽视，安装包之后还是有node_modules，好奇像vue等一些包拉下来，为什么没有node_modules还是可以运行的？

从零开始一个cli脚手架并发布到NPM（上篇）相关推荐

使用yeoman搭建脚手架并发布到npm
前言最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...
一步步教你完成一个自己的脚手架并且发布到npm
相信你一定用过vue-cli或者create-react-app或者你公司自己的脚手架.当我第一次用这些脚手架的时候,会觉得这一定是种很高级的玩意,其实了解过之后就发现,脚手架也并不是多么深奥的东西. ...
手写一个自己的 cli 并发布到 npm 上
手写一个自己的 cli 并发布到 npm 上简介:大家平时肯定用过 vue-cli 或者 create-react-app,只需要敲简单的命令行,就可以生成一个完整的项目,非常好用.由于本人所在公司 ...
从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)
自己写的组件有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...
git 创建webpack项目_从0到1开发一个小程序cli脚手架（一）创建页面/组件模版篇...
github地址: https://github.com/jinxuanzheng01/xdk-cli cli工具是什么? 在正文之前先大致描述下什么是cli工具, cli工具英文名command-l ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
从0到1搭建一个自己的cli脚手架
从0到1搭建一个自己的脚手架源码地址什么是脚手架顾名思义,脚手架就是帮助我们配置一些环境.工具,能够让我们方便的直接开始开发,专注于我们的业务,不用花时间去配置开发环境.例如常见的vue-cli ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
js新建list_制作一个基于node的todo-list工具，并发布至npm
需求 √ 可以列出所有的todo项 √ 可以新增todo √ 可以编辑todo √ 可以删除todo √ 可以标记todo为已完成/未完成 2. 使用文档/工具 * nodejs: nodejs文档 ...
npm run dev报错_React + TypeScript 从零开发Popup组件并发布到 npm
上篇文章中介绍了如何从 0 到 1 搭建一个 React 组件库架子,但为了一两个组件去搭建组件库未免显得大材小用. 这次以移动端常见的一个组件 Popup 为例,以最方便快捷的形式发布一个流程完整的 ...

从零开始一个cli脚手架并发布到NPM（上篇）

1.创建包名

2.设置命令行执行文件

3.制定CLI欢迎界面

命令创建

酷炫字体样式

README.md配置版本图标

4 发布包到NPM上面

上传包到NPM

更新和删除包

其他待解决问题

从零开始一个cli脚手架并发布到NPM（上篇）相关推荐

最新文章

热门文章