NPM 包发包流程

项目中经常回使用到第三方的插件，那么我们如何自己来发一个 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 包发布；