joywise-lib <ts类库打包脚手架>

脚手架工程

• 仓库拉取脚手架代码

  git clone <repo address>

• 脚手架目录

  # 工程部分文件说明
    
  <lib>   # 类库代码
  <test>  # 单元测试
  <types> # 类库对应类型声明文件
  <.npmignore>  # 设置 npm 发布时候需要忽略的文件，类似 .gitignore 文件
  <jest.config.json> # 单元测试配置文件
  <tsconfig.types.json> # 生成类库类型声明文件的配置

• 安装依赖

  cd joywise-lib
  npm install

• 发布的类库参考

  <lib/main.ts>
  <lib/Socket.ts>

• 配置 package.json

  # 按需修改，以下是示例组件
    
  {
  	"name": "${repo-name}",
  	"version": "0.0.1",
  	"main": ""./dist/${repo-name}.umd.cjs",
  	"module": "./dist/${repo-name}.js",
  	"types": "./types/main.d.ts", # 类库的类型声明文件
  	"exports": {
  	    "types": "./types/main.d.ts",
          "import": "./dist/${repo-name}.js",
          "require": "./dist/${repo-name}.umd.cjs"
  	}
  }

• 配置 vite.config.ts

  defineConfig({
  	lib: {
  		name: `${repo-name}` # 类库打包的名字，一般与 package.json 中的 name 字段一致
  	},
  	rollupOptions: {
  		external: [] # 如果类库需要去除某些依赖，需要进行配置，例如 ["lodash", "vue"]
  	}
  })

• 单元测试

  # 单元测试的文件参考 <test/main.spec.ts>
  # 类库打包上线前，进行本地的单元测试
  npm run test
    
  # 脚手架工程中的单元测试的配置文件 <jest.config.json> 
  # 若需要重新生成该配置文件
  npx ts-jest config:int
    
  # 该命令会生成一个配置文件
  module.exports = {
    preset: "ts-jest",
    testEnvironment: "node",
  }
    
  # 由于脚手架中 <"type": "module"> 使用 ESM 模块开发，将以上配置文件修改为 json 文件即可
  {
    "preset": "ts-jest",
    "testEnvironment": "node"
  }

• 生成类型声明文件

  npm run build:type
  # <types> 目录下会生成对应的类型声明文件

• 编译项目

  npm run build:only
  # 生成类型与构建项目一起，可以运行 npm run build

• 发布流程（官方）

  # 以下是将组件发布到官方库的流程，私有库需要相应变更
    
  # 获取远端仓库地址
  npm config get registry
  # 预期输出 https://registry.npmjs.org
  # 如果不是该地址需要配置
  npm config set registry https://registry.npmjs.org
    
  # 登陆
  npm login
  # 发布组件
  npm publish
  # 发布成功可在npm官网搜索该组件
  # 后续可以使用私有npm，将类库发布至组织结构下

• 更新流程

  # 更新对应 package.json 的版本号
  # 运行命令
  npm publish

类库安装

npm install ${lib-name} <joywise-lib>

类库导入与使用

import Socket from 'joywise-lib'
let url = "ws://192.168.1.101:8888/websocket"
let ws = new Socket(url)
ws.websocketOnOpen(res=>{
    console.log("建立连接成功",res)
    ws.send(JSON.stringify({id:'123456',type:"login"}))
    //...
})
ws.websocketOnMessage(res=>{
     console.log("接收到的消息",res) 
     //...
})
//...
ws.removeSocket()