開發一個健壯的npm包

項目地址：loan-calculate-utils

npm包的發佈、更新查看上一篇文章 開發一個基礎的npm包

目前咱們的目錄是這個樣子：

.
├── source  源代碼目錄
│   └── index.js
├── package.json
└── README.md

接下來給項目添加 打包，忽視文件，ts聲明文件，單元測試，eslint，README.md添加徽標。

打包

參考 ramda 打包思路，咱們將要編譯成三種包，以及它們的壓縮版。

打包目標

1. umi： babel source -> src
2. iife： webpack 當即調用的函數包，用於瀏覽器
3. cjs： webpack CommonJS包，用於modejs

配置 Babel，編譯 umi

安裝babel相關依賴

npm install --save-dev @babel/cli @babel/core @babel/preset-env

新建 .babelrc.json 文件

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": []
}

添加編譯命命令，修改 package.json

"scripts": {
+ "build:cjs": "babel source --out-dir src"
},

配置 webpack，編譯 iife，cjs

安裝webpack相關依賴

npm install --save-dev webpack webpack-cli babel-loader cross-env

新建 webpack.config.js

const path = require('path');
const isMin = !!~process.env.NODE_ENV.indexOf('min');
const type = process.env.NODE_ENV.replace(/:.*/g, '');
const libraryTarget = type === 'iife' ? 'window' : type;

const config = {
  mode: isMin ? 'production' : 'development',
  entry: './source/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `index.${type}${isMin ? '.min' : ''}.js`,
    library: 'loanCalculateUtils',  // 整個庫對外暴露的變量名
    libraryTarget,  // 變量名添加到哪一個上 browser
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  },
  plugins: [],
};

module.exports = config;

添加運行命令，修改 package.json

"scripts": {
  "build:cjs": "babel source --out-dir src",
+ "build:umd": "cross-env NODE_ENV=umd webpack",
+ "build:umd:min": "cross-env NODE_ENV=umd:min webpack",
+ "build:iife": "cross-env NODE_ENV=iife webpack",
+ "build:iife:min": "cross-env NODE_ENV=iife:min webpack",
  # 整合打包命令
+ "build": "npm run build:cjs && npm run build:umd && npm run build:umd:min && npm run build:iife && npm run build:iife:min"
},

添加 忽視文件

.gitignore

打包文件不須要上傳GitHub

新建文件 .gitignore

node_modules
package-lock.json

# umi打包目錄
/dist

# mjs打包目錄
/src

.npmignore

忽略npm無關文件

新建文件 .npmignore

node_modules
package-lock.json

# 源文件目錄
source

# 測試文件目錄
test

# 忽視文件
.gitignore
.npmignore

# babel配置文件
.babelrc.json

# eslint配置文件
.eslintrc.js

# webpack配置文件
webpack.config.js

添加 TypeScript 聲明文件

TypeScript

發佈聲明文件到npm，有兩種方式：

1. 與你的npm包捆綁在一塊兒，或
2. 發佈到npm上的@types organization。

下面咱們來使用第一種方式。

新建 types/index.d.ts

/**
 * Average Capital Plus Interest（等額本息）
 */
export function calcAverageCapitalPlusInterest({ amount, term, rate }: {
  amount: number;  // 貸款金額
  term: number;    // 貸款期數（月數）
  rate: number;    // 年利率
}): {
  totalPayment: string;       // 總還款
  totalInterest: string;      // 總利息
  list: {
    period: number;           // 第幾期
    monthlyPayment: string;   // 月供
    beginningBalance: string; // 當月還款前剩餘本金
    interest: string;         // 月供利息
    principal: string;        // 月供本金
    endingBalance: string;    // 當月還款後剩餘本金
  }[]
};

修改 package.json, 設置 types屬性指向捆綁在一塊兒的聲明文件。Including declarations in your npm package

"types": "types/index.d.ts",

發佈後使用時效果：

添加單元測試 jest

jest 是facebook推出的一款測試框架。運行命令 jest 後會自動運行項目下全部.test.js和.spec.js這種格式的文件。

install

npm install --save-dev jest

加入測試命令，修改 package.json

"scripts": {
  ···
+ "test": "jest"
},

新建 test/index.test.js

import { calcAverageCapitalPlusInterest, calcAverageCapital } from '../source/index';

test('average capital plus interest term: 1', () => {
  expect(calcAverageCapitalPlusInterest({
    amount: 1000000,
    term: 1,
    rate: 4.9,
  })).toStrictEqual({
    totalPayment: "1004083.33",
    totalInterest: "4083.33",
    list: [
      {
        period: 1,
        monthlyPayment: "1004083.33",
        beginningBalance: "1000000.00",
        interest: "4083.33",
        principal: "1000000.00",
        endingBalance: "0.00",
      }
    ]
  });
});

運行 npm run test

添加 ESLint

你能夠使用 npm 安裝 ESLint：

npm install eslint --save-dev

緊接着你應該設置一個配置文件：

./node_modules/.bin/eslint --init

會生成一個 .eslintrc 配置文件，配置查看文檔 Configuring ESLint

以後，你能夠在任何文件或目錄上運行ESLint以下：

./node_modules/.bin/eslint yourfile.js

加入檢查命令，修改 package.json

"scripts": {
  ···
+ "lint": "eslint source/*"
},

執行 npm run lint

• extends： 使用的規則
• parserOptions.sourceType = "module"： 使用模塊
• rules： 看不慣哪些規則能夠關了

README.md 添加 徽標

GitHub徽標官網是 shields.io

徽標圖標格式

https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg

例如

![build](https://img.shields.io/badge/build-passing-success.svg)
![npm package](https://img.shields.io/badge/npm%20package-1.1.3-success.svg)

會顯示

帶連接的徽標

[![](https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg)]({linkUrl})

GitHub動態徽標

完善 package.json 基本信息

# 項目名稱
"name": "loan-calculate-utils",
# 做者
"author": "whosmeya",
# 版本號
"version": "1.1.2",
# 項目表述
"description": "loan calculate utils",
# 項目入口文件（node_modules中引入的入口文件）
"main": "src/index.js",
# TypeScript 生命文件入口（編輯器中會看到方法提示）
"types": "types/index.d.ts",
# 代碼倉庫
"repository": {
  "type": "git",
  "url": "git+https://github.com/whosmeya/loan-calculate-utils.git"
},
# issues地址
"bugs": {
  "url": "https://github.com/whosmeya/loan-calculate-utils/issues"
},
# 主頁地址
"homepage": "https://github.com/whosmeya/loan-calculate-utils#readme",
# 開源許可證（更多查看：https://www.cnblogs.com/whosmeya/p/12564815.html）
"license": "MIT",
# 運行腳本
"scripts": {},
# 依賴（做爲npm包被install時，依賴會被下載進node_modules）
"dependencies": {},
# 開發依賴（做爲npm包被install時，開發依賴不會被下載進node_modules）
"devDependencies": {},