项目中经常回使用到第三方的插件,那么我们如何自己来发一个 npm 包供自己使用呢?下面就从入门开始梳理一下 npm 包发布的流程;
1、必备环境
要使用 npm 需要先安装 node.js ,npm 是随同 node 一起安装的包管理工具,node下载地址:https://nodejs.org/zh-cn/download/
2、npm 源管理
npm 发包必须使用 npm 的源镜像,如果你的 npm 源设置了淘宝镜像则需要切换回来,借用如下指令:
1、查看 npm 源
npm config get registry
2、切换镜像
淘宝镜像:npm config set registry https://registry.npm.taobao.org
npm镜像:npm config set registry https://registry.npmjs.org
3、注册账号
到 npm 官网注册一个 npm 账号,记住用户名,密码和邮箱,注册之后需要在邮箱中验证一下才能使用;
特别注意:邮箱验证必须做,否则上传时会报错!
4、创建 npm 包
在本地创建一个文件夹,在文件夹下打开控制台,然后执行 npm init
生成一个package.json
文件;这个时候会要求输入 package
相关信息:
package name:包名
version:版本,默认1.0.0
description:包的描述
entry point:包的入口,默认 index.js
git respository:git 资源库地址
keywords:关键词
author:作者
license:证书,默认ISC
最后会生成 package.json
文件,如果想要修改的时候可以打开这个文件直接进行修改:
name:包名,也就是publish后可以在npmjs中通过该名称搜索到
version:版本号,,默认 1.0.0
description:包描述
keywords:关键字,有助于人们使用npm search搜索时候发现你的项目
main:入口文件,默认是 index.js
scripts:支持的脚本,默认是一个空的test
dependencies:在生产环境中需要用到的依赖
devDependencies:在开发、测试环境中用到的依赖
author:作者
license:证书,vue 设置为 MIT
5、自己的项目
这里以一个简单的方法为例,我的文件目录如下
1、 index.js
文件:
let formatter = {
hello (name) {
return `hello - ${name}`;
}
}
module.exports = formatter
2、 test.js
文件:
let formatter = require('./index')
console.log(formatter.hello('xxs'));
在控制台执行 node test.js
就可以看到 console.log 的结果;
3、README
包的说明文件,以 md 格式编写在 ;
完毕之后就可以开始发布了;
6、发包
下面整理一下相关的指令:
注册:npm adduser
初始化:npm init
登录:npm login (初次发包)
发包:npm publish
撤销包:npm unpublish 包名
删除包:npm deprecate 包名 [@版本] “描述”
查看当前账号:npm whoami
本地联调:npm link
取消本地联调:npm unlink
查看安装了多少包:npm ls
查看node安装路径:npm get prefix
查看全局node包:npm root -g
清理缓存:npm cache clean -f
版本修改:
npm version patch:1.0.0会变成1.0.1
npm version major:1.0.0会变成2.0.0
npm version minor:1.0.0会变成1.1.0
流程:
1、登录:需要输入用户名、密码、邮箱,密码默认是不显示的;
2、执行指令 npm publish
,没有报错则可以在 npm 官网按照包名搜索查看;
3、vue 项目中引入使用;
7、几个报错处理
1、400 报错:400 Bad Request - PUT https://registry.npmjs.org/xxs-formatter - deprecations must be strings
解决:版本号自加
2、403报错:03 Forbidden - PUT https://registry.npmjs.org/xxs-formatter - Forbidden
解决:
①、先在 npm 官网查看包名是否与线上的包名相同的包,有则修改直到没有重名;
②、检查版本是否修改,同一个包修改版本必须增加;
③、可能是邮件没有核实、去 npm 官网找到 “Verify email address” 按钮发邮件,然后打开邮件去核实
8、其他问题
1、新电脑会遇到:win10 https:/go.microsoft.com/ fwlink/?LinkID=135170禁止运行脚本
解决:
①、在 win10 系统中进去 PowerShell 的路径,依次点击 “C:\WINDOWS\System32\WindowsPowerShell
”
②、继续点击 V1.0 文件夹,找到 powershell.exe,鼠标右键以管理员身份打开 PowerShell
③、然后执行指令 set-executionpolicy remotesigned
④、执行 A
2、vue-cli3搭建指令
①、安装:npm i -g @vue/cli
②、查看:vue -V
③、创建:vue create 项目名
这里梳理一下 npm 发包的基础流程,后面会继续深入,梳理一下组件类型的 npm 包发布;