如果你負(fù)責(zé)前端的基礎(chǔ)能力建設(shè)，發(fā)布各種功能/插件包猶如家常便飯，所以熟悉對 npm 包的發(fā)布與管理是非常有必要的，故此有了本篇總結(jié)文章。本篇文章一方面總結(jié)，一方面向社區(qū)貢獻(xiàn)開箱即用的 npm 開發(fā)、編譯、發(fā)布、調(diào)試模板，希望幫助到有需要的同學(xué)。

辛苦整理良久，還望手動點贊鼓勵~
npm sdk 模板倉庫為：https://github.com/fengshi123/npm-sdk
博客 github地址為：https://github.com/fengshi123/blog ，匯總了作者的所有博客，歡迎關(guān)注及 star ~

一、初始化 npm 包

1.1、初始化 npm 項目

根據(jù)以下命令能初始化一個 npm 包項目，命令交互過程中會讓你填入 項目名稱、版本、作者等信息，可以直接回車跳過（使用默認(rèn)設(shè)置）

npm init --save

1.2、包權(quán)限管理

很多時候，一個項目包往往不只是你一個人在管理的，這時需要給其他一起維護(hù)的同學(xué)開通發(fā)布的權(quán)限，相關(guān)使用命令如下：

# 查看模塊 owner, 其中 demo 為模塊名稱
$ npm owner ls demo

# 添加一個發(fā)布者, 其中 xxx 為要添加同學(xué)的 npm 賬號
$ npm owner add xxx demo

# 刪除一個發(fā)布者
$ npm owner rm xxx demo

1.3、發(fā)布版本

1.3.1、發(fā)布穩(wěn)定版本

更新版本號共有以下選項（major | minor | patch | premajor | preminor | prepatch | prerelease) ，注意項目的git status 必須是clear，才能使用這些命令。

# major 主版本號，并且不向下兼容  1.0.0 -> 2.0.0
$ npm version major

# minor 次版本號，有新功能且向下兼容  1.0.0 -> 1.1.0
$ npm version minor

# patch 修訂號，修復(fù)一些問題、優(yōu)化等  1.0.0 -> 1.0.1
$ npm version patch

# premajor 預(yù)備主版本  1.0.0 -> 2.0.0-0
$ npm version premajor

# preminor 預(yù)備次版本  1.0.0 -> 1.1.0-0
$ npm version major

# prepatch 預(yù)備修訂號版本  1.0.0 -> 1.0.1-0
$ npm version major

# prerelease 預(yù)發(fā)布版本  1.0.0 -> 1.0.0-0
$ npm version major

版本號更新后，我們就可以進(jìn)行版本的發(fā)布

$ npm publish

1.3.2、預(yù)發(fā)布版本

很多時候一些新改動，并不能直接發(fā)布到穩(wěn)定版本上（穩(wěn)定版本的意思就是使用 npm install demo 即可下載的最新版本），這時可以發(fā)布一個 “預(yù)發(fā)布版本“，不會影響到穩(wěn)定版本。

# 發(fā)布一個 prelease 版本，tag=beta
$ npm version prerelease
$ npm publish --tag beta

比如原來的版本號是?1.0.1，那么以上發(fā)布后的版本是?1.0.1-0，用戶可以通過?npm install demo@beta? 或者?npm install demo@1.0.1-0? 來安裝，用戶通過 npm install demo 安裝的還是 1.0.1 版本。

1.3.3、將 beta 版本設(shè)置為穩(wěn)定版本

# 首先可以查看當(dāng)前所有的最新版本，包括 prerelease 與穩(wěn)定版本
$ npm dist-tag ls

# 設(shè)置 1.0.1-1 版本為穩(wěn)定版本
$ npm dist-tag add demo@1.0.1-1 latest

這時候，latest 穩(wěn)定版本已經(jīng)是?1.0.1-1?了，用戶可以直接通過?npm install demo?即可安裝該版本。

1.3.4、將 beta 版本移除

# 將 beta 版本移除
$ npm dist-tag rm demo beta

1.3.5、將 tag 推送到 Git 遠(yuǎn)程倉庫中

# 當(dāng)我們發(fā)布完對應(yīng)的版本，可以通過以下命令將版本號推送到遠(yuǎn)程倉庫, 其中 xxx 為對應(yīng)分支
$ git push origin xxx --tags

1.4、查看版本信息

可以通過?npm info?來查看模塊的詳細(xì)信息。

$ npm info

二、使用 typescript

2.1、安裝 typescript 作為開發(fā)階段的依賴項

$ npm i typescript -D

2.2、增加配置文件 tsconfig.json

在根目錄新建 tsconfig.json，配置項具體的意義可以參考 ts 官方文檔

{
    "version": "1.8.0",
    "compilerOptions": {
        "outDir": "build/compiled",
        "lib": [ "es6" ],
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "noImplicitAny": true,
        "declaration": true
    },
    "exclude": [ "build", "node_modules" ]
}

2.3、安裝 @types/node

安裝 @types/node 讓 node 的核心包具備類型提示

$ npm i @types/node -D

2.4、新建入口文件

在根目錄新建 src 目錄，用于存放所有的 TypeScript 源文件，然后在 src 下新建 index.ts 作為入口文件

// src/index.ts

console.log('hello npm-sdk!');

2.5、安裝 ts-node-dev

在開發(fā)階段為了能直接執(zhí)行并且監(jiān)聽 ts 文件的變化，安裝 ts-node-dev

$ npm i ts-node-dev -D

在 package.json 中定義一個啟動腳本

"scripts": {
    "start": "ts-node-dev --respawn --transpile-only src/index.ts"
}

這樣我們就可以實時進(jìn)行編譯，如下所示

?

三、使用 eslint 校驗

3.1、安裝 eslint

$ npm i eslint -D

3.2、eslint 初始化

$ ./node_modules/.bin/eslint --init

根據(jù)交互命令提示對應(yīng)生成配置文件如下所示，可以根據(jù)團(tuán)隊的代碼風(fēng)格進(jìn)行對應(yīng)的配置 .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}

3.3、添加忽略文件 .eslintignore

node_modules/

3.4、script 命令配置

可以通過在 package.json 中配置對應(yīng)的校驗命令和修復(fù)命令，如下所示

  "scripts": {
    "lint": "eslint --ext .ts .",
    "lint:fix":"eslint --fix --ext .ts ."
  },

3.5、提交校驗

利用 commitlint 和 husky 工具進(jìn)行代碼提交時攔截驗證，安裝如下

$ npm i @commitlint/cli @commitlint/config-conventional husky lint-staged --D

在 package.json 中進(jìn)行對應(yīng)的配置，當(dāng) commit 代碼時，如果代碼中存在 eslint 錯誤，那么就會進(jìn)行報錯提示

  "husky":{
    "hooks":{
      "pre-commit":"lint-staged",
      "commit-msg":"commitlint -e $HUSKY_GIT_PARAMS"
    },
    "lint-staged":{
      ".ts":[
        "eslint --fix"
      ]
    },
    "commitlint":{
      "extends":[
        "@commitlint/config-conventional"
      ]
    }
  },

四、編譯

我們可以增加對應(yīng)的 typescript 編譯命令，如下所示

"scripts": {
  "build:cjs": "tsc --outDir lib",
  "build:es": "tsc -m esNext --outDir esm",
  "build": "rd /s /q lib esm && npm run build:cjs && npm run build:es",
},

配置對應(yīng)的入口地址，其中 module 和 main 的區(qū)別是，module 主要在 tree shaking 時會用到。

  "main": "lib/index.js",
  "module": "esm/index.js",

五、本地調(diào)試

可以通過 npm link 在正式項目中進(jìn)行調(diào)試，在我們的包目錄中安裝完發(fā)布的線上包后，可以執(zhí)行以下命令將當(dāng)前項目 node_modules 底下安裝的對應(yīng)包關(guān)聯(lián)到本地全局 npm 目錄的 node_modules 目錄下，命令如下

$ npm link npm-sdk@1.0.1-0

執(zhí)行命令如下所示

然后在對應(yīng)的 npm sdk 目錄下進(jìn)行關(guān)聯(lián)

$ npm link

// 關(guān)聯(lián)成功后如下所示
D:\nvm\npm\node_modules\npm-sdk -> F:\all_project\npm-sdk

到這里，通過以上兩個步驟的關(guān)聯(lián)，將項目中使用到的 sdk 包，關(guān)聯(lián)到該 sdk 包對應(yīng)的開發(fā)目錄，我們就可以在本地對 sdk 包進(jìn)行調(diào)試。

六、總結(jié)

本文從 npm 各種常用命令、到 sdk 中使用 typescript、以及使用 eslint 強(qiáng)校驗、再到編譯/本地調(diào)試，從零到一演示如何搭建發(fā)布一個 NPM 包，NPM SDK 模板倉庫為：https://github.com/fengshi123/npm-sdk，有需要的同學(xué)可以直接 clone 進(jìn)行使用。
博客 github地址為：https://github.com/fengshi123/blog ，匯總了作者的所有博客，歡迎關(guān)注及 star ~

?文章來源地址http://www.zghlxwxcb.cn/news/detail-401845.html

?

?

?

?

到了這里，關(guān)于從零到一發(fā)布 NPM 包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！