第一步：拥有一个npm账号，并且登录

准备账号，没有账号的可以用这个链接注册一个，接着用npm login登录我们刚刚注册的账号。

这里我踩了第一个坑

我的npm包是想发到registry.npmjs.org ，但是我当前的npm的源是指向公司的私库，登录的时候没注意，后面直接把包发到公司的私库里面了（我发现私库也有两个test包不知道是不是公司里也有其他小伙伴跟我一样发错地方了）。如果你跟我一样发错源了，别担心24小时之内还能撤回 npm unpublish {yourPackname} ，如果你忘记自己是否登录过可以用npm who am i来查看当前登录账号

如果经常需要切换npm源，建议可以安装一个nrm , nrm 是一个源管理器，可以快速切换 npm源

你可以用nrm切换到你的目标源进行登录
这边其实有展示你目要前登录的源，登录的时候你可以这样npm login --registry={url}设置你的源
还有一种方法可以指定你要发包的源在package.json里面配置，这样就不用关注你当前在那个源

"publishConfig": {
  "registry": "https://registry.npmjs.org/"
}

文档中的具体描述

第二步：准备发包的代码

我是打算用rollup打包一个简易ui库，可以快捷使用提示框，弹窗这些功能，后续再发文章写一下具体的实现，发包的代码准备完毕之后，要初始化项目npm init根据提示填写信息即可。

这里我又踩了一个坑

npm的包名是唯一的，所以我给包名加上了自己的标识避免重复 npm init --scope={yourScopeName} 这里的yourScopeName要用当前登录的npm账号，我随便写了个标识，导致后续上传出现问题，首先因为@npm/package-name 这种形式的包名，是有作用域的包名形式，执行 npm publish 的时候默认是发布私有的包。因此，

是花钱买私有包的服务
指定参数npm publish --access public，种形式的包名跟 npm 账户有对应关系，不能随便填写。

文档中的描述

第三个坑

用rollup打包了三种模块标准的包es，cjs，umd。要注意入口的配置

main字段对应commonjs引入方式的程序入口文件
moduled字段对应esmodule引入方式的程序入口文件
exports定义了自定义导出规则，可以理解为路径映射，比如我还打包了css文件，没有配置之前引用只能import 'packName/dist/styles.css';配置之后import 'packName/style'

（但是在官方文档没有moduled，exports字段，我是看的网上其他的文章链接1 ，链接2

  "main": "dist/common.js",
  "module": "dist/esm.js",
  "exports": {
    ".": {
      "import": "./dist/esm.js",
      "require": "./dist/common.js"
    },
    "./style": "./dist/index.css"
  },

files 配置是一个数组，用来描述当把 npm 包作为依赖包安装时需要说明的文件列表。当 npm 包发布时，files 指定的文件会被推送到 npm 服务器中，如果指定的是文件夹，那么该文件夹下面所有的文件都会被提交。一开始没有配置全部的文件都上传上去了其实只要上传打包好的文件就可以了比如我的项目

"files": [
    "Readme.md",
    "dist/"
 ]

第三步：发包

因为我的包名有加作用域发布需要设置为公开npm publish --access public，或者你也可以在package.json里配置

"publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "access": "public"
  },

这样我们的包就发布好了，这时候在其他项目中使用只需npm instal {your packName}

包的更新踩坑

第一次发包总是不完美，后续修改之后想要更新包，我想也没想直接又npm publish --access public，结果直接报错，看提示是版本有问题，更新之后包的版本也需要更新才行，想一想也对，如果有些人用来你1.0版本的包结果你更新直接更在1.0版，相当于别人也要被迫升级

// patch：补丁号，修复bug，小变动，如 v1.0.0->v1.0.1 
npm version patch 
// minor：次版本号，增加新功能，如 v1.0.0->v1.1.0 
npm version minor 
// major：主版本号，不兼容的修改，如 v1.0.0->v2.0.0 
npm version major

npm publish

此次发布发现自己npm相关的知识掌握的不够，平时只用到一些基础的npm i npm run dev之类简单的命令行，再深入是使用没有去学习过，这次发包可以好好恶补一下这方面的知识了相关文档npm， package.json，package.json常用配置中文版

前端进阶：发npm包踩坑记录