快来！这样做，你也可以拥有自己的JavaScript工具库。

✨前言

前段时间整理了一下文件夹，发现以前零零散散保存的一些工具函数js文件，就萌生出了搞一个工具库的想法。终于也是借阅了许多资料，整了一个工具库。给大家分享一下工具库从0到1的一个搭建过程。感兴趣的小伙伴，可以尝试一下。

💫准备

工欲善其事，必先利其器，准备工作还是要做好的。

账号

首先你得有一个npm账号，和github账号，有的可以跳过这一步了。注册流程也一并奉上！

npm

注册地址: www.npmjs.com/signup

填写用户名邮箱密码完成验证之后呢，就拥有了一个npm账号。

github

注册地址: github.com/signup

同理，填写邮箱密码完成验证之后呢，也就拥有了一个github账号。

仓库

有了账号，接下来呢，就是创建仓库环节了。

要想好记必先有个好名字，仓库命名很重要，你可以使用 npm search 命令（或 NPM 网站的搜索栏）来搜索你想使用的名字是否已经存在于 NPM 上。

如果显示No matches found for "XXX"，就代表这个包名还没人使用。

解决了命名，就可以打开github.com/new github创建仓库了

打开终端通过 git clone 仓库名 命令，克隆仓库到本地。

🌠构建

基建

这里我选择rollup+typescript+jest的方案来构建工具库。

展示一下目录结构

初始化

先在命令行打开克隆到本地的项目，初始化仓库npm init。

稍微配置一下package.json

json 复制代码

{
  "name": "test-tools",
  "version": "1.0.0",
  "description": "Front-end tool function library",
  "type": "module",
  "main": "build/index.js",
  "types": "./index.d.ts",
  "files": [
    "build/*.js",
    "index.d.ts"
  ],
  "scripts": {
    "build": "rollup -c",
    "test": "jest"
  },
  "keywords": [
    "utils",
    "tools"
  ],
  "license": "MIT",
  "author": "king-3",
}

初始化之后，接下来就下载相关依赖

格式化

创建.prettierrc.json，.prettierignore，.editorconfig文件并复制对应内容

json 复制代码

// .prettierrc.json
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

bash 复制代码

// .prettierignore
/build/*
/node_modules/**

ini 复制代码

// .editorconfig
# http://editorconfig.org
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

typescript

下载依赖

shell 复制代码

npm i typescript tslib @types/node -D

配置文件

json 复制代码

// tsconfig.json
{
  "include": ["src/*.ts", "test/*.*.ts"],
  "exclude": ["node_modules"],
  "output": "./build/",
  "paths": {
    "src/*": ["src/*", "src/*/*"]
  },
  "compilerOptions": {
    "target": "es5",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "useUnknownInCatchVariables": false
  }
}

babel

下载依赖

shell 复制代码

npm i @babel/core @babel/preset-env @babel/preset-typescript -D

配置文件

json 复制代码

//babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-typescript"
  ]
}

rollup

下载依赖

shell 复制代码

npm i rollup @rollup/plugin-node-resolve @rollup/plugin-terser @rollup/plugin-typescript -D

配置文件

js 复制代码

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import terser from '@rollup/plugin-terser'

export default {
  input: './index.ts', // 入口文件
  output: [
    {
      format: 'esm', // 打包为esm格式
      file: 'build/index.js', // 打包后的文件路径名称
      name: 'king-tools' // 打包后的默认导出文件名称
    }
  ],
  plugins: [
    nodeResolve(),
    typescript({ tsconfig: './tsconfig.json' }),
    terser()
  ]
}

功能

在根目录下创建index.ts和index.d.ts文件,在src下创建getDataType.ts文件。

ts 复制代码

/**
 * * 获取数据类型
 * @name getDataType
 * @param {any} target
 * @return {string}
 */
export default function getDataType(target: any) {
  let type = typeof target
  if (type === 'object') {
    return Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
  } else {
    return type
  }
}

在主入口文件index.ts中引入getDataType

javascript 复制代码

import getDataType from './src/getDataType'

const kingTools = {
  getDataType
}

// 分别导出
export { getDataType }

// 默认导出
export default kingTools

在index.d.ts声明文件中进行相应声明

typescript 复制代码

declare namespace kingTools {
  /**
   * * 获取数据类型 *
   * @name getDataType
   * @param {any} target
   * @return {string}
   */
  function getDataType(target: any): string
}

declare module 'king-tools' {
  export = kingTools
}

测试

下载依赖

shell 复制代码

npm i jest babel-jest @types/jest -D

在test文件夹下创建一个getDataType.test.ts测试文件

ts 复制代码

import { getDataType } from '../index'
describe('getDataType testing', () => {
  it("getDataType(3) -> should return 'number'", () => {
    const type = getDataType(3)
    expect(type).toBe('number')
  })
  it("getDataType(null) -> should return 'null'", () => {
    const type = getDataType(null)
    expect(type).toBe('null')
  })
})

测试完没问题后，执行打包命令即可发布你的包了

📝发布

检查你的npm源，如果是淘宝源，则需要将其改回npm默认源

arduino 复制代码

// 查看npm镜像源地址
npm config get registry

// 设置npm默认源
npm config set registry https://registry.npmjs.org/

// 设置npm镜像源为淘宝镜像
npm config set registry https://registry.npm.taobao.org/

登录npm，在命令行中切换到项目目录，运行登录命令，按照提示输入后，执行npm publish命令发布包

arduino 复制代码

// 登陆
npm login

// 自动更改版本号，并且commit
// npm version xxx

// 重新发布
npm publish

🌐最后

以上就是我工具库从0到1的一个搭建过程，希望可以给各位带来一些帮助

这是我自己的工具库king-tools感兴趣的小伙伴，可以支持用一下。