• 1.1 目录结构 & 项目源代码
• 1.2 package.json 配置

• 2.1 注册 npm 账号
• 2.2 添加组织
• 2.3 登录
• • 2.3.1 切换 yarn 源
• 2.4 发布包
• 2.5 发布结果

• 3.1 加入 babel 依赖
• 3.2 源代码修改
• 3.3 babel.config.json、package.json 配置文件
• 3.4 yarn add 引用依赖

• 参考连接
• 完整代码示例

今天带大家一起走一次发布 npm 包的流程，同时也是接上上一篇 SDK 开发的流程，并作为后续开发自己的工具包做准备。下面马上开始

1. 准备一个 npm 项目

1.1 目录结构 & 项目源代码

/package
├── package.json
├── src
│   └── index.js
└── yarn.lock
index.js 的内容很简单
 
/package/src/index.js
 
const f1 = () => {
  console.log('invoke f1');
module.exports = { f1 };
1.2 package.json 配置
 
接下来是 npm 发包的一个重点，package.json 要写对
 
/package/package.json
 
  "name": "@youxian/test-pkg",
  "version": "1.0.0-alpha.0",
  "main": "index.js",
  "license": "MIT"
首先是包名，我们利用 npm 项目名称的组织作用域(@[orgName]/[pkgName])的方法来命名包名；然后版本号则使用测试版的 alpha；主入口则是设置为 index.js 即可
 
2. npm 发布流程
 
接下来我们就可以进入正式的发布流程了，本篇使用 yarn 作为项目的依赖于版本管理器
 
2.1 注册 npm 账号
 
首先第一步是去 npm 注册一个账号，如下
 
npm 地址：https://www.npmjs.com/
 
2.2 添加组织
 
由于 npm 的包还是非常多的，很容易出现重名的问题，所以比较好的方式是建立一个组织，透过组织名来进行作用域的区隔，像是 @babel/core、@ali/xxx 等方式
 
这边我也搞了一个自己的组织，用的花名哈哈
 
2.3 登录
 
接下来就是核心的发布流程了，首先现在命令行上进入项目的根目录并进行登录
 
$ yarn login
输入账号密码就能登录啦
 
2.3.1 切换 yarn 源
 
如果登录过程失败的话可以检查一下 yarn 的源是否正确，不要登错仓库啦hh
 
$ yarn config set registry https://registry.npmjs.org/
当然这个路径每次都要记着也是麻烦，可以下一个 yrm 工具方便切换
 
$ yarn global add yrm
$ yrm ls
* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
  yarn --- https://registry.yarnpkg.com
2.4 发布包
 
接下来最后一条指令就是调用 yarn publish 进行发布啦
 
$ yarn publish
如果这是这个包第一次发布的话，你还需要加上额外的参数 --access=public 来指定包的可访问性，也就是别人能不能下载啦
 
$ yarn publish --access=public
yarn 会告诉你上一次发布的版本（如图为 1.0.0-alpha.4），前一次发布成功的版本是不允许覆盖的，你只能继续往上加，所以如图我改成 1.0.0-alpha.5 了，这时候不管是 yarn 还是 npm 都会自动的为我们更新 package.json 中的版本号
 
2.5 发布结果
 
最后就可以到 npm 网页上看到发布结果啦
 
3. 打包后发布
 
我们刚刚看到的是一个再简单不过的项目示例，实际上我们通常比较少直接将源代码进行发布，而是需要进行额外的打包再进行发布，本篇以 babel 为例
 
3.1 加入 babel 依赖
 
接下来我们打算把项目改造为 typescript 语言编写的项目，因此需要加入 babel 来进行编译，同时能够支持 ES5 甚至更低的兼容性
 
所以第一步是添加依赖
 
$ yarn add @babel/core @babel/cli @babel/preset-env @babel/preset-typescript -D
注意我们这里用的是 -D，也就是将依赖写入到 devDependencies，也就是说明在打包的时候不会将这些包打包到最终结果中，同时引用了这个包的人也会自动的纳入 devDependencies 的管理当中
 
3.2 源代码修改
 
接下来我们修改一下源代码，导出两个方法
 
/package/src/index.ts
 
const tryParse = (text: string): any => {
  try {
    const data = JSON.parse(text);
    return data;
  } catch (e) {
    console.log('[tryParse] fail', e);
    return null;
const tryStringify = (value: any): string => {
  try {
    const text = JSON.stringify(value);
    return text;
  } catch (e) {
    console.log('[tryStringify] fail', e);
    return null;
export { tryParse, tryStringify };
3.3 babel.config.json、package.json 配置文件
 
最后加上 babel.config.json 配置文件
 
/package/babel.config.json
 
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
然后在 package.json 中添加打包指令
 
/package/package.json
 
  "name": "@youxian/test-pkg",
  "version": "1.0.0-alpha.5",
- "main": "index.js",
+ "main": "lib/index.js",
  "license": "MIT",
+ "scripts": {
+   "build": "rm -rf lib/* && babel src/ -d lib/ -x .ts"
我们透过将打包的成果放到 lib 目录下，然后修改项目的主入口 main，指向 lib 目录下的 index 文件
 
3.4 yarn add 引用依赖
 
最后一样透过 2. 的发布流程再发个版，就能够在 node_modules 里面看到自己写的三方包啦
 
$ yarn add @youxian/test-pkg
本篇到这里就结束啦，带大家过一遍发布 npm 包的流程，用的是 yarn 包管理器。网上的资料还是非常丰富的，不过我认为如果读者自己是真的有兴趣并且有这个需求，最好还是自己实践一下，动手做对自己的帮助还是比较大的。
 
下一篇作者希望继续朝 monorep 的项目构建方式继续进行研究，有兴趣的欢迎提出来讨论，供大家参考哈。
 
Title
Link
Publishing a Package - yarn
https://classic.yarnpkg.com/en/docs/publishing-a-package/
Yarn, npm and Git
https://warlord0blog.wordpress.com/2018/07/31/yarn-npm-and-git/
一分钟教你发布npm包
https://segmentfault.com/a/1190000023075167
Code: 402 You must sign up for private packages : @org1/pkgname #1821
https://github.com/lerna/lerna/issues/1821
Is anonymous publishing allowed? #212
https://github.com/verdaccio/verdaccio/issues/212
yarn install error - /usr/local/Cellar/yarn/1.22.11/libexec/lib/cli.js:46104
https://blog.csdn.net/HobbitHero/article/details/119925473
yarn publish错误
https://blog.csdn.net/zimeng303/article/details/109770042
yarn报错：error An unexpected error occurred: “https://registry.yarnpkg.com/-/user/org.couchdb。。。
https://blog.csdn.net/zimeng303/article/details/109767492
Request failed: internal server error (500)错误解决
https://blog.csdn.net/lovewcjl/article/details/44242325
npm淘宝镜像和默认镜像切换
https://blog.csdn.net/qq_44917563/article/details/101434732?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link
.yarnrc - yarn
https://classic.yarnpkg.com/en/docs/yarnrc/
 
完整代码示例
 
https://github.com/superfreeeee/Blog-code/tree/main/front_end/others/npm_publish
                    Npm 发布: 发布一个自己的 npm 三方包文章目录Npm 发布: 发布一个自己的 npm 三方包前言正文1. 准备一个 npm 项目1.1 目录结构 & 项目源代码1.2 package.json 配置2. npm 发布流程2.1 注册 npm 账号2.2 添加组织2.3 登录2.3.1 切换 yarn 源2.4 发布包2.5 发布结果3. 打包后发布3.1 加入 babel 依赖3.2 源代码修改3.3 babel.config.json、package.json 配置文件3.4 yarn 
先介绍一下引入背景，公司有自己的npm源，我们的包都发布到了上面，因为自己有搞轮子，所以有时会发自己的包到官方源上，某天突发奇想，如果不小心当前源是官方源，把公司的包发布上去了咋办？似乎并没有啥限制？结果刚想完，然后手贱当前官方源时执行了发布命令（心有余悸，不是故意的qwq）。。。然后看到了如下报错：
npm ERR! code E402
npm ERR! 402 Payment Required - PUT https://registry.npmjs.org/@tutor%2fxxxx - You
				
发布一个npm包，构建自己的第三方库
小生在需要发布自己npm包时，见网上诸多教程，皆无法满足所思需求；不是太简单，就是缺三少四，故前往各大厂商之GitHub，耐心翻阅其源码，始有心得；特此做博客以记，与诸君共勉。
如果你需要进行快速搭建自己的第三方库，请移步:npm-plugins-building-shell 或者 借用shell，快速搭建一个npm插件库。
申请一个npm 账号 以及创建好相关 github 项目
前往申请 npm 账号： https://www.npmjs.com/
				
Failed PUT 403
Package name too similar to existing packages;
// 包名与现有包太相似，导致发布失败，修改包名再发布
Failed PUT 402
npm ERR! You must sign up for private packages
// 自己在npm申请了一个免费Organization，当你初次发包时候会出现这个报错
//...




    

原文地址：How to make a beautiful, tiny npm package and publish it
原文作者：Jonathan Wood
译文出自：掘金翻译计划
本文永久链接：github.com/xitu/gold-m…
译者：snowyYU
校对者：ElizurHz, Park-ma
你肯定想不到，创建并发布一个小而美的 npm 包有多简单！
Photo by...
本文主要记录我开发一个npm包：pixiv-login时的心得体会，其中穿插了一些日常开发的流程和技巧，希望对新手有所启发，大佬们看看就好_(:3」∠)
pixiv-login
pixiv-login的功能就是模拟用户登录网站pixiv，获取cookie
npm install --save pixiv-login
const pixivLogin = require('pixiv-login');
pixivLogin({
    userna.
在做表单的时候，会遇到很多的表单项的验证工作，几乎很多验证都是重复的，有一个比较好的lodash库来做了这些工作，但是里面有些方法和实际的业务工作有些不符。比如，lodash.isEmpty(2) // true是会认为是空的。这显然与实际的业务是不符的。另外还有一些数字校验等其他的常用的校验方法，想结合lodash做一个自己的库，这样比较有利于业务的开发。
基于以上的考量，准备开一个自...
				
vue create xxxx  创建项目（文档地址：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create）
按正常开发写一个组件 。。。
使用install函数把组件做成插件方便调用
index.js 代码 （自己针对自己的组件做灵活改动）
import UnifiedValida...
				Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css)
					10531