开发并发布npm包，支持TypeScript提示，rollup构建打包

前言：

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