react开发并发布和更新一个npm包

描述

最近开发了一个 npm 包,并发布到了官网上,下面记录下开发过程。
github 代码地址

准备工作

  1. 注册 npm 账号
  2. 认证 npm,不然不能发布包;(会给你发认证邮件)
  3. 设置 npm 源为官网

查看和设置 npm 源

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

1
2
3
4
// 查看
npm config get registry
// 设置
npm config set registry https://registry.npmjs.org/

搭建开发环境

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

package.json

  • main 字段设置的就是在引入你的程序时,执行的文件。
  • files 设置的是要发布到 npm 的文件。如果省略掉这一项,所有文件包括源代码会被一起上传到 npm
  • keywords 设置搜索关键字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"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": "wenmu",

package.json 详情介绍

webpack.config.js

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

1
2
3
4
5
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
libraryTarget: "commonjs2",
},

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

babel 的配置

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

打包发布

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

1
npm build

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

1
2
3
4
npm login

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

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

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

link组件到global node_modules

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

1
npm link

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

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

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

使用link的组件

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

1
npm link your_component_name

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

1
import TabHeader from 'tabheader_react'
  1. 在项目中解除
    进入引用组件的根目录,执行命令
1
npm unlink your_component_name
  1. global node_modules解除
    进入组件的根目录,执行下面命令,注意后面不要跟组件名
1
npm unlink

更新 npm 包

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

  1. 提交代码,如果你的代码已经用git托管,先提交代码,不然发布会报错
  2. 修改版本号
    修改版本号,官方提供了的命令,当执行后,package.json 文件会自动被修改。命令如下:
    比如现在版本是 1.0.0
1
2
3
4
5
6
7
8
// 最后一位加1,执行命令后未:1.0.1
npm version patch

// 第二位加1,执行后:1.1.0
npm version minor

// 第一位加1,执行后:2.0.0
npm version major
  1. 发布更新
    通过上面修改过版本号后,执行下面命令重新发布,线上的就会被更新了。
1
npm publish

You must sign up for private packages

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

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

1
npm publish --access=public

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

1
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?

这其实也是重名了。

文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/03/20/react%E5%BC%80%E5%8F%91%E5%B9%B6%E5%8F%91%E5%B8%83%E5%92%8C%E6%9B%B4%E6%96%B0%E4%B8%80%E4%B8%AAnpm%E5%8C%85/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏