• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言:

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript中处理大数字(会丢失后面部分数字)发布时间:2022-07-18
下一篇:
typescript的基本类型发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap