用typescript實現自己的js函數庫

原文鏈接： https://www.cnblogs.com/yalong/p/15627449.html

背景

日常開發中，有不少常用且通用的js函數，為了方便后續的復用，提高開發效率，所以就搞了一個js函數庫 tbl-js-libs；

項目地址: https://github.com/YalongYan/js-libs,

該項目是基於typescript實現的，大家可以基於該項目，或者參考該項目寫法再另起一個項目，搭建屬於自己的js函數庫

該函數庫特性

• 基於typescript， 類型聲明、提示齊全，無縫接入ts項目
• 打包模式為 ES module 模式， 天然支持 tree-shaking，避免多余代碼
• 基於mocha進行單元測試，更穩定、可靠

為什么不打包成umd格式的代碼

• 目前我所有的項目都是基於es module 開發的，不需要umd格式的
• 打包成umd 代碼體積會增加
• es module 天然支持tree-shaking，方便
• 打包成es module 主要就用到tsc，省事
• 后續有需要的話，再對函數庫升級即可

項目目錄介紹

    |_ _ _  dist // tsc編譯后的目錄
    |
    |_ _ _  src // 源碼
    |       |
    |_ _ _  |_ _ _ array // 數組類的函數集合
    |       |     |
    |       |     |_ _ _arrayUnique.ts // 數組去重函數
    |       |
    |       |_ _ _ index.ts // 函數的總入口
    |       |
    |       |
    |_ _ _  test // mocha 測試代碼
    |       |
    |       |_ _ _ arrayUnique.test.ts // 單元測試代碼
    |
    |_ _ _  tsconfig.json // typescript 編譯配置文件
    |
    |_ _ _  tsconfig.test.json // 單元測試的配置

arrayUnique.ts 代碼如下

/**
 * 數組去重
 * @param arr {array} 數組
 * @returns {array} array
 */
export default function arrayUnique(arr: Array<any>): Array<any> {
  return [...new Set(arr)];
}

arrayUnique.test.ts 代碼如下

import 'mocha';
import { expect } from 'chai';
import arrayUnique from '../src/array/arrayUnique';

describe('arrayUnique函數', function(){
  it('arrayUnique', function() {
    expect(arrayUnique([1,2,2,3,3])).to.deep.equal([1,2,3]);
  });
});

script 命令介紹

"build": "npm run clean && tsc -p tsconfig.json", 
"clean": "rimraf ./dist",
"test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha --require ts-node/register test/*.test.ts"

• build 是編譯typescript 代碼為 es5 的代碼
• clean 是刪除 dist 目錄
• test 是運行單元測試

tsconfig.json 內容如下

{
  "compilerOptions": {
    "outDir": "dist",
    // esnext 是標准的 es module 格式
    "module": "esnext",
    // 編譯后符合什么es版本
    "target": "es5",
    // 為每個ts文件 生成一個對應的 .d.ts 文件; 獲得 ts 提示
    "declaration": true,
    "downlevelIteration": true,
    "noImplicitAny": true,
    "lib":["es5", "dom", "dom.iterable", "es2015", "es2016", "es2017"],
    "jsx": "react",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "src/**/*.test.tsx",
  ]
}

tsconfig.test.json 文件內容如下

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "commonjs", // 就是這個, 運行單元測試的時候 要改成 commonjs 不然會報錯
    // 編譯后符合什么es版本
    "target": "es5",
    // 為每個ts文件 生成一個對應的 .d.ts 文件; 獲得 ts 提示
    "declaration": true,
    "downlevelIteration": true,
    "noImplicitAny": true,
    "lib":["es5", "dom", "dom.iterable", "es2015", "es2016", "es2017"],
    "jsx": "react",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "src/**/*.test.tsx",
  ]
}

發布npm流程

1. 首先有個 npm 賬號， 沒有的話去這里注冊 https://www.npmjs.com/
2. npm login 登錄
3. npm publish 發布，(發布之前記得 npm run test 查看單元測試是否通過)

使用方法

安裝依賴: npm i tbl-js-libs -S

import { isEmpty } from 'tbl-js-libs';

export default () => {
  console.log(isEmpty([1, 2, 3])) // 這里使用
  return (
    <div className="homePage">
      我是測試頁面
    </div>
  );
};

---

函數庫開發過程中遇到的問題匯總

問題一

npm run test 如下報錯：

import * as chai from 'chai';

^^^^^^

SyntaxError: Cannot use import statement outside a module

解決方案看 這里

解決方案簡單來說，就是新建個 tsconfig.test.json 把里面的 module字段設置為commonjs

---

補充說明

這里只是把ts代碼編譯為es5 的代碼，並且采用的是 es module 模式, 如果想把函數庫打包為umd 模式的代碼，可以使用 webpack 或者 rollup 進行打包

參考鏈接

斷言庫chai的用法

mocha 官網

打造自己的JavaScript武器庫