描述

最近开发了一个 npm 包，并发布到了官网上，下面记录下开发过程。语法用的是非hook，原理一样。
github 代码地址(https://github.com/codepandy/tabheader_react)

准备工作

1. 注册 npm 账号
2. 认证 npm，不然不能发布包；（会给你发认证邮件）
3. 设置 npm 源为官网

查看和设置 npm 源

在国内我们通常都设置成了淘宝的仓库（https://registry.npm.taobao.org），这样是发布不了的。需要设置回官网的仓库连接（https://registry.npmjs.org/）。

// 查看
npm config get registry
// 设置
npm config set registry https://registry.npmjs.org/

搭建开发环境

由于我使用的 react，搭建环境就是搭建 react 的开发环境。这里不做过多介绍。
只介绍几个发布组件相关的配置和注意事项。

package.json

• main 字段设置的就是在引入你的程序时，执行的文件。
• files 设置的是要发布到 npm 的文件。如果省略掉这一项，所有文件包括源代码会被一起上传到 npm
• keywords 设置搜索关键字

"name": "tabheader-react",
"version": "1.0.2",
"description": "a tabheader component for react.",
"main": "./build/bundle.js",
"files": [
  "build"
],
"scripts": {
  "start": "webpack-dev-server --config webpack.dev.js",
  "build": "webpack --config webpack.pro.js"
},
"keywords": [
  "react",
  "tab",5
  "header",
  "tabheader",
  "tabheader-react"
],
"author": "mutuzhixia",

package.json 详情介

webpack.config.js

webpack 的配置需要注意的就是生产环境时，设置libraryTarget

output: {
  path: path.resolve(__dirname, "build"),
  filename: "bundle.js",
  libraryTarget: "commonjs2",
},

libraryTarget 设置暴露的包类型，默认是 var，也就是变量的方式。这个要设置成模块的方式，这样可以通过模块的方式来引入。

babel 的配置

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

打包发布

程序开发完后，就可以打包发布了。上面也配置了发布的文件是哪些。
打包和发布其实也很简单，就是单纯的把组件的代码打包然后发布就行了。
在组件代码的根目录执行下面的命令

npm build

打包成功后，登录 npm 然后发布组件

npm login

// 登录成功后，执行发布命令
npm publish

成功后，就可以在npm 官网查看你发布的 package，并且在npm也能搜索到了。

本地调试 link

在开发组件时，还没发布到仓库，如何安装调试呢？这个可以使用npm link命令来实现。

link组件到global node_modules

在组件的根目录执行如下命令

npm link

如果组件文件是在根目录，那么 link 后，代码有改动，引用的项目里面立马会体现出来，但是如果代码是在 src 目录下，需要 build 代码项目中才能看到修改后的效果；也可以直接是 src 目录中 link

使用下面命令查看是否 link 成功

// 查看全局安装的包
npm list -g --depth 0

使用link的组件

进入到项目的根目录，执行命令

npm link your_component_name

成功后，就可以在你的项目中使用组件了，使用方式和安装的组件一样。

import TabHeader from 'tabheader_react'

解除link

1. 在项目中解除
   进入引用组件的根目录，执行命令

npm unlink your_component_name

2. 从global node_modules解除
   进入组件的根目录，执行下面命令，注意后面不要跟组件名

npm unlink

更新 npm 包

发布了 npm 包后，如果有修改，我们需要发布更新，步骤如下：

1. 提交代码，如果你的代码已经用git托管，先提交代码，不然发布会报错
2. 修改版本号
   修改版本号，官方提供了的命令，当执行后，package.json 文件会自动被修改。命令如下：
   比如现在版本是 1.0.0

// 最后一位加1，执行命令后未：1.0.1
npm version patch

// 第二位加1，执行后：1.1.0
npm version minor

// 第一位加1，执行后：2.0.0
npm version major

3. 发布更新
   通过上面修改过版本号后，执行下面命令重新发布，线上的就会被更新了。

npm publish

You must sign up for private packages

今天在发布包时，提示类似的名字已经有了，建议加上范围，如(“@wenmu/steps-react”)，在 package.json 的 name 上加上范围。
但是加上后就报错了。一直提示You must sign up for private packages.

Scoped packages 会被自动发布为私有包，发布成公共的就可以了。

npm publish --access=public

在写组件时，又遇到一种情况,如下提示，也是加上范围就行了

npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/xx-xx - You do not have permission to publish "xx-xx-xx". Are you logged in as the correct user?

这其实也是重名了。