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