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

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

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

文章原文: https://www.cnblogs.com/yalong/p/15214644.html

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

===== start 2021-12-01新增

用typescript实现自己的js函数库 , 请看这里: https://www.cnblogs.com/yalong/p/15627449.html

===== end 2021-12-01新增

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

整个过程如下:

一. npm init 创建项目

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

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 如下:

{
  "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上的函数 该文件内容如下

/**
 * 导出支持空数据, 支持空格
 * @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格式并下载

三.创建typescript定义文件

为了让该npm包支持typescript, 所以需要创建一个 index.d.ts文件

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

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

四.完善 package.json

package.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


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
sublime识别typescript发布时间:2022-07-18
下一篇:
【软件更新】TypeScript 4.0正式发布!发布时间: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