前言：
作業了幾年，想把一些不好找現成的庫的常用方法整理一下，發布成npm包，方便使用，也學習一下開發發布流程，
主要用到的工具：npm，
開發庫：babel、typescript、rollup、eslint、corejs，
由于目前只是發布一些函式方法，只需要一些兼容性工具，打包工具即可，
一、創建專案
可以直接在github上創建一個空專案，然后克隆到本地，
進入目錄下，執行
npm initz
之后將開始初始化package.json：
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (cs) csdrv version: (1.0.0) 0.0.1 description: 描述內容 entry point: (index.js) test command: 測驗命令 git repository: git遠程倉庫 keywords: 描述這個包的關鍵詞 author: axelccc license: (ISC) About to write to D:\LiFile\code\cs\package.json: { "name": "csdrv", "version": "0.0.1", "description": "描述內容", "main": "index.js", "scripts": { "test": "測驗命令" }, "repository": { "type": "git", "url": "git遠程倉庫" }, "keywords": [ "描述這個包的關鍵詞" ], "author": "axelccc", "license": "ISC" } Is this OK? (yes) y
此時有了一個空專案，
二、編輯方法
新建src目錄，用于存放源代碼，新建dist目錄，用于存放打包后的檔案，新建test目錄，用于某些測驗方法，目錄名稱無要求，
新建函式檔案hideStr.js，本例創建一個 脫敏字符的方法：
/** * 脫敏字符回傳 * 小數點前全脫敏，如果沒有小數點，最多脫敏兩位 脫敏與真實位數對應 * value 數值 hideLength 脫敏位數 */ export function hideStr({ value = https://www.cnblogs.com/axelccc/archive/2022/04/28/0, hideLength = 2, replaceChar ="*" }) { let hideStr = ""; if (typeof value != "number" && typeof value != "string") { console.warn("需要輸入數字或者字串，否則結果將會例外"); } try { const str = String(value); const [integer, decimal] = str.split("."); for (let i = integer.length - 1; i >= 0; i--) { // 前 hidelength 位 換成 * if (integer.length - i > hideLength) { hideStr += integer[i]; } else { hideStr += replaceChar; } // 前 除了最后一位 每3位加一個 , if (i % 3 == 0 && i != 0) { hideStr += ","; } } decimal && (hideStr += `.${decimal}`); } catch (error) { console.log(`脫敏例外`, error); } return hideStr; }
新建src/index.js，作為入口檔案，引入上文的方法，并匯出，此處index.js主要是起到歸集作用，
import { hideStr } from "./hideStr";
import { separator } from "./separator";
import { unitByBit, unitByByte, unitToChinese } from "./unitFormat";
export { hideStr, separator, unitByBit, unitByByte, unitToChinese };
理論上，這個時候發布，是可以引入使用了，但是此時過于粗糙，存在測驗做不了，不支持ts，沒有構建編譯后的檔案等問題，
三、引入ts支持
如果不需要ts支持，可以跳過本步驟，該步驟主要是編輯ts描述檔案，以增加ts提示資訊等，
與index.js同級增加index.d.ts檔案，
declare module "csdrv"; export { hideStr } from "./hideStr"; export { unitByByte, unitByBit, unitToChinese } from "./unitFormat"; export { separator } from "./separator"; export type { hideStrIn, sepIn, unitRes } from "./interface";
hideStr.d.ts
import { hideStrIn } from "./interface";
/**
* @return 脫敏后的字串
*/
declare function hideStr({ value, hideLength, replaceChar }: hideStrIn): string;
export { hideStr };
interface.d.ts 定義的一些介面規范
/** * cn:對數字前幾位脫敏 */ interface hideStrIn { // 被脫敏的數字 value: number | string; // 保留字符的長度 hideLength?: number; // 脫敏的代替字符 replaceChar?: string; } /** * cn:將數字進行 多位分隔，默認三位 */ interface sepIn { // 被處理的數字 num: number; // 幾位一分割 n?: number; } /** * cn:單位格式化 后回傳的結構 * en:result after format */ interface unitRes { value: number; // 要被格式化的數字 // 格式化之后的單位 unit: string; } export { hideStrIn, sepIn, unitRes };
四、生成打包編譯后檔案
生成編譯后的檔案，可以方便參考，嘗試rollup工具打包，
rollup和webpack類似，都是一類打包工具，為了兼容性，引入babel處理，注：需要的包不要忘記npm，也不要忘記添加corejs，
.babelrc檔案簡單配置：
{ "presets": [ [ "@babel/preset-env", { "modules": false, "useBuiltIns": "usage", "corejs": "2" } ] ], "plugins": [["@babel/plugin-transform-runtime"]], "ignore": ["node_modules/**"] }
根目錄下創建rollup.config.js：
import resolve from "rollup-plugin-node-resolve"; // 依賴參考插件 import commonjs from "rollup-plugin-commonjs"; // commonjs模塊轉換插件 import babel from "rollup-plugin-babel"; // babel 插件 import { eslint } from "rollup-plugin-eslint"; // eslint插件 export default { input: "./src/index.js", // 打包的入口檔案 output: { name: "csdrv", // 輸入的包名 file: "./dist/csdrv.js", // 打包輸出地址, 這里的匯出地址就是package內main的地址 format: "umd", // 包型別 }, plugins: [ // 使用的插件 resolve(), commonjs(), babel({ exclude: "node_modules/**", runtimeHelpers: true, }), eslint({ throwOnError: true, include: ["src/**"], exclude: ["node_modules/**"], }), ], ignore: [ "node_modules/**", // 忽略目錄 ], };
package.json增加 build腳本命名：
"scripts": { "build": "rollup -c rollup.config.js", },
執行 npm run build，即可生成構建后的csdrv.js，中間因為缺失依賴報錯，請安裝依賴，
五、完善readme.md，package.json資訊
自述檔案得寫一下，
package.json可以額外追加一些引數：參考http://nodejs.cn/learn/the-package-json-guide，
或者找到一些開源專案參考一下，
六、本地測驗
1.可以在test目錄下創建測驗腳本，正常引入即可，
2.使用npm link方式，在其它工程中引入，
七、發布
測驗，引入沒啥問題了，就大膽發布吧，
首先登錄npm，
npm login
輸入賬號，郵箱，密碼，
npm publish 即可發布，注：每次發布版本號不可一致，確認好再發，
最后：https://www.npmjs.com/package/csdrv ，萬一以后能干掉lodash呢（大霧hh），
本文來自博客園，作者：axelccc，轉載請注明原文鏈接：https://www.cnblogs.com/axelccc/p/16203849.html
歡迎訪問 www.apark.site
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/467024.html
標籤：其他