前言：
工作了几年，想把一些不好找现成的库的常用方法整理一下，发布成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 = 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）。
