如何把js函数发布成npm并支持typescript

2021年11月24日 阅读数:3
这篇文章主要向大家介绍如何把js函数发布成npm并支持typescript,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

文章原文: https://www.cnblogs.com/yalong/p/15214644.html
代码仓库地址: https://github.com/YalongYan/downlaod-table-to-csvhtml

对于一些经常使用的js函数, 能够发布到npm上,方便使用,特此记录下过程
本次npm封装的函数是基于 ES6 模块规范,而且支持 typescriptnode

整个过程以下:react

一. npm init 建立项目

执行 npm init
而后根据提示输入相应的配置,最终生成 package.json
下面就是我执行的过程,好比 git repository 若是没有的话直接回车跳过就行webpack

admin@admindeMacBook-Pro tableToCsv % npm init
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: (tabletocsv) table-to-csv
version: (1.0.0) 0.0.1
description: 把table数据转成csv格式并下载
entry point: (index.js) 
test command: 
git repository: 
keywords: table-download csv
author: yyl
license: (ISC) 
About to write to /Users/admin/yanyalong/npm/tableToCsv/package.json:

{
  "name": "table-to-csv",
  "version": "0.0.1",
  "description": "把table数据转成csv格式并下载",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "table-download",
    "csv"
  ],
  "author": "yyl",
  "license": "ISC"
}


Is this OK? (yes) yes
admin@admindeMacBook-Pro tableToCsv % 

最终生成的 package.json 以下:git

{
  "name": "table-to-csv",
  "version": "0.0.1",
  "description": "把table数据转成csv格式并下载",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "table-download",
    "csv"
  ],
  "author": "yyl",
  "license": "ISC"
}

二.新建index.js文件

在package.json 同级目录下新建 index.js,存放要发布到npm上的函数 该文件内容以下github

/**
 * 导出支持空数据, 支持空格
 * @param { Array } initColumns - 列的数据
 * @param { Array } initList - 表格的数据
 * @param { string } name - 下载文件的名字(不用带.csv)
 */
const TableToCsv = (initColumns, initList, name = '表格') => {
  let str = '';
  let arr = [];
  let keyArr = [];
  initColumns.forEach((item) => {
    arr.push(item['title']);
    keyArr.push(item['key'] || item['dataIndex']);
  });
  str = arr.join(',') + '\n';
  for (let i = 0; i < initList.length; i++) {
    let subArr = keyArr.map((item) => {
      let temp = initList[i][item] === undefined ? '' : initList[i][item] + ''; // 转成字符串
      // 下面解决中文乱码问题 会把空格转成 #, 这里把空格转成 \xa0 就不会有这个问题了
      return temp ? temp.replaceAll(/\s+/g, '\xa0') : '';
    });
    let subStr = subArr.join('\t,');
    subStr += '\n';
    str += subStr;
  }
  // \ufeff 解决中文乱码问题
  var blob = new Blob(['\ufeff', str], { type: 'text/plain' });
  let object_url = window.URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = object_url;
  link.download = `${name}.csv`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

export default TableToCsv;

这里就以TableToCsv函数为例, TableToCsv是把table表格的数据转为csv格式并下载web

三.建立typescript定义文件

为了让该npm包支持typescript, 因此须要建立一个 index.d.ts文件typescript

为了演示,参数的 type类型 以 any 定义了,内容以下npm

declare const TableToCsv: (initColumns: any[], initList: any[], name: string) => void;
export default TableToCsv;

四.完善 package.json

package.json 中还须要添加几个字段json

  • private - 要发布到npm上, private 必须设置成false
  • main - 该npm包的入口文件
  • module - ES6模块规范的入口文件
  • types - typescript 定义文

关于为何要加 module字段,主要是是为了用户在使用咱们的包时能够享受 Tree Shaking 带来的好处

package.json中 module 字段更多解释能够看这里:聊聊 package.json 文件中的 module 字段

完善后的 package.json 以下:

{
  "name": "table-to-csv",
  "version": "0.0.6",
  "description": "把table表格下载为csv格式的文件",
  "author": "yyl",
  "private": false,
  "main": "index.js",
  "module": "index.js",
  "types": "index.d.ts",
  "license": "MIT",
  "keywords": [
    "table-download",
    "csv"
  ]
}

五.添加readme

一个好的npm包确定得有readme说明文件的,里面包含该npm包怎么使用,以及一些注意事项等
readme 内容以下:

安装
npm i table-to-csv -S

使用示例

import TableToCsv from 'table-to-csv';
const initColumns = [
  {
    dataIndex: "Index",
    key: "Index",
    title: "序号",
  },
  {
    dataIndex: "userid",
    key: "userid",
    title: "用户Uid",
  },
  {
    dataIndex: "score",
    key: "score",
    title: "收益点",
  }
 ]
 const initList = [
    {
      id: '32',
      Index: 1,
      userid: '11',
      score: '10'
    },
    {
      id: '42'
      Index: 2,
      userid: '22',
      score: '20'
    },
    {
      id: '89',
      Index: 3,
      userid: '33',
      score: '30'
    }
  ];

 TableToCsv(initColumns, initList, '统计表格')
 
 说明:
 initColumns 里面key 和 dataIndex 必须有一个

六.发布到npm

  1. 前提得有个npm帐号,没有的去 https://www.npmjs.com/ 注册一个
  2. npm login 登陆
  3. npm whoami 查看当前登陆用户
  4. npm publish 发布到npm
  5. 记得每次发版的时候 版本号不能跟以前的同样,否则发布不上去

七.项目中使用

个人项目是react + ts 环境

实际使用效果截图以下:

能够看到ts的检验都是有效的

总结

1.优势:能够把项目中的代码直接复制过来,就能够发布到npm
2.缺点:因为是 ES6 的代码,使用的时候,安装到 node_modules 下了, 若是webpack配置忽略了 node_modules 目录,会致使没有处理该npm包里面的代码,对于不支持ES6 的浏览器可能会报错了,解决方法有两种

  • 一种就是不要 exclude 至关于对于node_module下的代码也进行编译了,牺牲了打包时间
  • 一种是使用include 包含该函数组件 include: [/node_modules\/table-to-csv/, /src/], 这样就能够

代码仓库地址: https://github.com/YalongYan/downlaod-table-to-csv