react開發并釋出和更新一個npm包

描述

最近開發了一個 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           

1. 從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           

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 會被自動釋出為私有包，釋出成公共的就可以了。

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?           

這其實也是重名了。