如何发布自己开发的npm/yarn依赖包
自己最近瞎捣鼓的一个东西在 GitHub 发布了
v1.0.0版本，现在打算也放到npm上，使其使用起来更便捷
我要发布的这个npm包主要作用是方便前端开发，里面封装了一些我整理好的函数。由于是闲暇时刻写着玩儿的，所以它目前还比较简陋，感兴趣的朋友可以去GitHub上给个Star。
废话不多说，开整！
1. 初始化一个项目
本地项目文件夹的名字最好和我们要发布的npm包名称相同。
由于npm包名称不能重复，所以我们可以先前往npm官网查看名称是否已被抢注。比如我要发布的项目叫 BFUI，所以想把包命名为 bfui，经搜索，好家伙，被一个5年前的项目注册了。没办法，那就起名叫 bf-ui 吧。
在项目根目录打开终端，执行npm初始化：
1 | npm init |
一路回车即可，会在项目根目录生成一个 package.json 文件。
2. 开发并完善代码
在项目中完成代码的开发，比如写在 index.js 文件中
3. 完善package.json文件
这一步也可以在刚刚初始化项目的时候完成，看个人喜好。
name：包的名字，确保该名字是独一无二的author：项目作者，可以写你的GitHub账号contributors：代码的其他贡献者，格式为数组1
2
3
4"contributors": [
"zhangsan",
"lisi"
]version：包的版本，默认是1.0.0description：包的描述，方便别人了解你的模块作用，搜索的时候也有用keyword：这个挺重要，尽量用比较贴切的关键字作为这个包的索引，这样才能有更多的人搜索到你的包homepage：项目主页 url。一般来说，我们打包的静态资源会部署在 CDN 上，为了让我们的应用知道去哪里加载资源，则需要我们设置一个根路径，这时可以通过 package.json 中的 homepage 字段设置应用的根路径。bugs：填写一个 bug 提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽license：你应该为你的开源代码模块制定一个开源协议，让用户知道他们有何权限来使用你的模块，以及使用该模块有哪些限制。MIT 是最少约束的选择；GPL 是最多约束的。如果是个人随意作品，建议 MIT 许可；如果是公司或者需要严格保护的开源产品，GPL。
funding：在开源领域，资金是一个长期存在的问题。funding命令的作用是让维护 npm 的开发人员(为 Node.js 创建包)声明元数据，为有意愿的捐赠者指明捐赠平台。在 package.json 文件中添加了一个funding 字段， 可指向在线捐赠服务的 url，如 Patreon、Open Collective、GitHub Sponsors、License Zero 或者其他支付网站。files：描述了将软件包作为依赖项安装时要包括的条目，默认值为["*"]，这意味着它将包括所有文件。你还可以在包的根目录或子目录中提供.npmignore文件，以防止某些文件被发布。.npmignore文件的工作原理与.gitignore一样。如果存在.gitignore文件，而缺少.npmignore，则将改用.gitignore的内容。files字段内容会覆盖.npmignore和.gitignore的内容。main：入口文件，默认是index.js。main 字段是package.json中的另一种元数据功能，它可以用来指定加载的入口文件。假如你的项目是一个 npm 包，当用户安装你的包后，require(‘my-module’) 返回的是 main 字段中所列出文件的module.exports属性。当不指定 main 字段时，默认值是模块根目录下面的index.js文件。browserslist：指定该模板供浏览器使用的版本。Browserify 这样的浏览器打包工具，通过它就知道该打包那个文件。bin：用于将某些可执行 Javascript 文件公开给父包的字段。 此处列出的所有条目都可以通过$ PATH 获得。通俗点理解就是我们全局安装， 我们就可以在命令行中执行这个文件， 本地安装我们可以在当前工程目录的命令行中执行该文件。repository：项目仓库地址scripts：该字段用于列出在运行npm/yarn run时将要执行的小型 shell 脚本。请注意，包含:（冒号）的脚本是项目的全局变量，无论你当前的工作空间如何，都可以调用它们。最后，请注意，脚本总是相对于最近的工作空间（而不是 cmd）执行。1
2
3
4
5
6"scripts": {
"test": "jest",
"build:dev": "webpack-cli --config ./webpack.dev.config.js",
"build:test": "webpack-cli --config ./webpack.test.config.js",
"build:pro": "webpack-cli --config ./webpack.pro.config.js"
}test command：测试命令
比如我这个项目的 package.json 文件大概是这样的：
1 | { |
4. 添加LICENCE，说明开源协议
可到 SPDX License List 或者 Open Source Initiative 下载相应协议的模板。这里我选择的是MIT开源协议。
新建一个名为 LICENSE 的文件，并在里面粘贴进如下内容：
1 | The MIT License (MIT) |
将上面的 <year> 和 <copyright holders> 修改为 对应的年份 和 版权拥有者名字
5. 添加 README.md 和 .gitignore
README.md文件主要用于 该项目的一些说明，使用方法等。在一些npm包中的README.md中，还会看到一些好看的徽标信息。这些版本信息图标可以在 Shields 制作。.gitignore主要用于忽略不需要提交的文件更改。可以去 gitignore 下载对应的模板，然后自己修改修改。
6. 发布npm包
- 首先到 npm官网 上注册一个账号。注册的邮箱可能会被公开，登录时须使用邮箱收到的验证码。
- 在需要发布的项目文件中，终端输入
npm adduser，然后按照提示，输入对应的用户名，密码，邮箱，验证码。（这里需要注意，你的镜像必须是npm，而不是cnpm，可以使用nrm来管理你的镜像。）登录之后，可以终端输入npm whoami,如果出现你的名字，那就说明登录成功了。 - 最后输入
npm publish --access=public，即可发布成功。如果有报错，根据报错调整配置，比如包名被人占用就换个名字。（我遇到的报错在本文下方，可以往下翻用作参考） - 在你的电脑上，直接
npm install你的包名，来看看你的包是否发布成功了。当然，也可以在 npm官网 这里查找你发布的包。 - 如果你要更新你的 npm 包，记得修改
package.json的版本号，而且一般比上一个版本要高一点，否则会报错。可以去了解一下版本号命名规范。
【发布npm包的报错】
1 | npm notice |
- 报错代码403: 禁止-放置
bf-ui。包名称与现有包bfui太相似；尝试将包重命名为“@barry-flynn/bf-ui”，并改为使用npm publish --access=public发布。
既然它让我改名并推荐改成 @barry-flynn/bf-ui，我就试了试能不能去掉横线还叫bfui，于是在package.json中把包名写成 @barry-flynn/bfui，没想到发布成功了。
1 | $ npm publish --access=public |
7. 发布Yarn包
【2022年08月19日】温馨提示：Yarn包无需手动发布，一段时间后会自动同步。以下关于发布Yarn包的内容可跳过阅读。
除了 npm，另一个常被使用的依赖包工具是 yarn。
于是顺手也把 yarn 包发布一下吧，免得包名被占用啥的。
(1) 了解yarn
yarn是一个js包管理器，针对npm的缺陷改进的一个产品。
中文文档官方地址：https://yarn.bootcss.com/
yarn优势：
- 速度快：并行安装、离线模式
- 安装版本锁定
- 更简洁的安装下载信息输出
- 多注册来源处理，防止安装包混乱
- 命令语法语义化改进，例如：
yarn add/remove与npm install/uninstall
全局卸载：
npm uninstall -g yarn全局安装：
npm install -g yarn使用yarn安装项目依赖：
yarn install或者yarn运行项目：
yarn run serve查看版本：
yarn -v查看镜像配置：
yarn config get registry配置淘宝镜像：
yarn config set registry https://registry.npm.taobao.org查看全局安装文件目录：
yarn global dir环境变量配置（参考全局目录）：
C:\Users\Administrator\AppData\Local\Yarn\bin
(2) 发布yarn包
如果是单纯发布yarn包的话，前5步和本文发布npm包是几乎相同的，并且也需要第6步注册的npm账号。
所以直接在项目文件夹的终端里执行 yarn login 命令进行登录。运行此命令会提示你输入你在 npm registry 上注册的用户名和 email。但它不会向你索要密码，之后当你运行像 yarn publish 这种需要验证身份的命令时，你才必须输入密码。（如果输错，可以使用 yarn logout 你可以删除你的用户名和 email。）
- 如果报下面的错，可以尝试不要用git bash面板，改成使用 cmd 或者 powerShell
2
3
4
5
yarn login v1.22.19
error An unexpected error occurred: "Can't answer a question unless a user TTY".
info If you think this is a bug, please open a bug report with the information provided in "E:\\BarryFlynn\\BFUI\\bfui\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/login for documentation about this command.
将准备工作完成后，就可以正式发布软件包啦，发布软件包的命令是 yarn publish。此时会要求我们输入要发布的新版本，不更改的话不用输入，直接回车就行：
1 | E:\BarryFlynn\BFUI\bfui>yarn publish |
出现下方代码需要稍等片刻：
1 | E:\BarryFlynn\BFUI\bfui>yarn publish |
有报错，“您不能在以前发布的版本1.0.0上发布”：
1 | E:\BarryFlynn\BFUI\bfui>yarn publish |
原来，通过 Yarn 发布的包会托管在 npm registry 上，用于全球分发。
所以，怪不得刚刚需要登录npm的账号。
那是不是…可以用 yarn 命令来安装 npm 发布的依赖包？但是我并没有在Yarn官网搜到刚刚在npm上发布的 @barry-flynn/bfui，所以？
这两天有事，过了两天发现已经可以在Yarn的官网也能搜索到那个包了，应该是同步起来有延迟。
https://www.npmjs.com/package/@barry-flynn/bfui
1
npm i @barry-flynn/bfui
https://yarnpkg.com/package/@barry-flynn/bfui
1
yarn add @barry-flynn/bfui
并且在 Vue-Cli 可视化面板中也能够搜到 @barry-flynn/bfui 依赖包
【参考内容】：
[1]咸鱼老弟, 如何写一个npm包
[2]ikonan, package.json 详解
[3]HURRICANE_FAST, package.json 最全详解
[4]止无境之海, yarn的简单说明使用
[5]暖A暖, 发布Yarn包
[6]yarn, yarn publish
发布命令
yarn publish --access <public|restricted>
该--access标志控制 npm 注册表是否将此包发布为公共包，或受限制。
- WeChat微信打赏
- AliPay支付宝打赏
