如何从零搭建TypeScript函数库，发布到npm库或私有库

2022-10-09 本文已影响0人 Poppy11

假设我们在项目中，有一些比较通用的函数，比如：解析url, 复制对象，
我们用一个js文件保存这些通用的函数，用导出的方法来使用，他就是一个函数库了。
痛点是：如果多个项目使用这个函数库，我们就要考虑使用和维护优化的地方了，不然会导致添加或者修改函数库，多个项目需要手动同步的问题
所以我们的函数库需要用到npm来做版本管理，这样这个函数库就能更好的发挥他的能力

一个函数库应该具备

npm版本管理
支持按需引入
提供多种模块导出方式
通过单元测试
文档

然后我们需要ts语法，加上了

支持ts语法

为了团队维护方便，加上了

自动化构建模板

选择打包工具构建

在开始的时候我们可以选一个打包工具：rollup或webpack

使用rollup构建

全局安装rollup

npm install rollup --global

1.新建src/main.js, 这里只将index的模块全部暴露出去

 export * from './components/index'

2.新建package.json, 添加需要的依赖，包括rollup，typescript，还有rollup的两个插件/plugin-babel，plugin-typescript。

{
  "name": "rollup_demo",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js", 
  "scripts": {
    "build": "rollup -c"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-babel": "^6.0.0",
    "@rollup/plugin-typescript": "^8.5.0",
    "rollup": "^2.79.1",
    "rollup-plugin-json": "^4.0.0",
    "tslib": "^2.4.0",
    "typescript": "^4.8.4"
  }
}

3.新增rollup.config.js配置文件

 // rollup.config.js
  import json from 'rollup-plugin-json'
  import typescript from '@rollup/plugin-typescript'
  import pkg from './package.json'
  export default {
    input: 'src/main.ts',
    output: [
      {
        name: pkg.name,
        file: pkg.main,
        format: 'umd'
      }
    ],
    plugins: [
      json(),
      typescript({lib: ["es5", "es6", "dom"], target: "es5"})
    ]
  };

4.编辑函数, 这里以一个很简单的检验手机号的函数为例，在src/components里添加一个模块函数isMobile.ts，里面很简单就用正则判断了下手机号，我们这里直接用ts文件后缀

export default function isMobile(v: any): boolean {
  return /^1[0-9][0-9]\d{8}$/.test(v)
}

然后引入到index.ts里再统一暴露出去

import isMobile from './isMobile'
export {
    isMobile
}

5.运行打包命令 rollup -c 或者我们定义的npm run build，在dist里面会出现打包好的文件。
6.验证

把打包好的dist/index.js文件放到在一个项目里，导入isMobile函数验证

import {isMobile} from './index.js'
...
console.log('手机号是否正确', isMobile('13680988189'))

使用webpack构建

安装webpack & webpack-cli

npm install --global webpack // 全局安装webpack
npm install webpack webpack-cli --save-dev // 此工具用于在命令行中运行 webpack

1.src里的文件保持不变
2.新建package.json

{
  "name": "ts-util-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.8.0",
    "webpack-cli": "^4.2.0"
  }
}

3.新建webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/main.ts', // 入口
    output: {
        filename: 'index.umd.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'tsUtil',
        libraryTarget: 'umd' // 导出模块为umd
    }
}

添加支持typescript

安装tsloader

npm install --save-dev typescript ts-loader

新建ts.config.js文件

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

改造webapck.config.js添加ts支持

const path = require('path');
module.exports = {
    entry: './src/main.ts',
    output: {
        filename: 'index.umd.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'tsUtil',
        libraryTarget: 'umd'
    },
    // 模块, 使用tsloader解析ts文件
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
}

打包验证

运行npx webapck即可打包, 我们可以看到打包出了我们想要的文件：dist/index.umd.js, 同样的验证方法

import {isMobile} from './index.umd.js'
...
console.log('手机号是否正确', isMobile('13680988189'))

发布到npm

发布到官方npm库

运行npm init 初始化，会让你填内容，用默认的就好了
运行npm login登录账号，还没有的话去npm官网注册一个
运行npm publish发布注意这里要用npm官方源，不能用淘宝源

发布到JFrog私有库中

运行npm init 初始化，会让你填内容，用默认的就好了
切换镜像到私有库

npm config set registry 私有库地址

因为私有库账号密码是公司邮箱，但是npm login又无法使用@特殊字符，所以我们去配置.npmrc，位置在C:\Users\yu.li2中
在JFrog中右上角个人中心生成一个秘钥，使用秘钥去请求JFrog接口。

URL:公司JFrog地址/artifactory/api/npm/auth
Headers:{
  Authorization:Bearer 秘钥
}

该接口会返回_auth字符，复制过后，添加到.npmrc中，然后就可以发布包和下载包

参考文献：https://juejin.cn/post/6900858745853755405#heading-1