JS-SDK 开发流程

1,680 阅读2分钟

这是我参与11月更文挑战的第30天,活动详情查看:2021最后一次更文挑战

1, SDK开发须知

一个标准的SDK开发需要考虑哪些因素

(1)规范

  • 最少原则

    明确SDK的职责

  • 专注于领域

​ 专注于性能,专注于通讯,或则是容错的SDK,缓存SDK等等

  • 足够稳定Breakchange

  • Hook极致

    满足个性化诉求,热插拔,提供给第三方定制化,个性需求

(2) 基础架构

  • SDK模块化标准
常用的有几种模式:
AMD
CMD,
ES Module
CommonJS
  • SDK版本情况
Github,
npm
  • 开发架构模式
职责单一
Base + plugin + Biz(应用层)

(3)构建工具

  • Rollup
  • SWC
  • microbundle
  • EsBuild
构建工具千千万,适合自己的最好看

(4)测试

  • 单元测试
  • 测试的覆盖率
  • E2E测试

(5)客户体验

  • 一行代码侵入式
  • 自我诊断环节
  • 动态采样机制
  • 图文并茂的文档

2, 架构图

1638206615582.png

3, 实战SDK开发

1, 创建SDK文件夹

mkdir sdk

2, 初始化package.json文件

npm init -y

3, 打包工具,首选microbundle

npm install microbundle

4, 文件分析

(1) package.json文件

{
  "name": "sdk",
  "version": "1.0.0",
  "description": "",
   // 你的入口文件
  "source": "src/index.ts", 
   // 指定生产ES6模块的包
  "module": "dist/pa-sdk.module.js",
  // 指定生产UMD的包
  "unpkg": "dist/pa-sdk.umd.js",
  "main": "dist/pa-sdk.js",
  "scripts": {
    "build": "microbundle",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "microbundle": "^0.14.2"
  }
}

(2) 新建src/index.ts文件

const data: string = "精彩一段, 冲击月薪3万";
console.log('[data ]', data)
export default data;

(3) 打包

npm run build

1638277802511.png

(4) 文档注释

添加vscode插件:Document This

1638278199502.png

(5) 新建src/base.ts

/**
 * 注释
 * @public
 */
const base: string = '加油,SDK';
export default base;

(6) 修改src/index.ts


import data from './Base'
const init = (msg: string) => {
  console.log(msg)
}
init(data)
export {
  init,
  data
}

(7) 合并,安装 @microsoft/api-extractor

yarn add @microsoft/api-extractor

(8) 生成文档注释

yarn add typedoc

(9) 配置package.json脚本命令

 "scripts": {
    "build": "microbundle",
    "dev": "microbundel watch",
    "api:init": "api-extractor init",  // api提取
    "api:run": "api-extractor run --local --verbose",
    "api:doc": "typedoc --out docs src",  // 生成文档
    "test": "echo \"Error: no test specified\" && exit 1"
  },

(10) 命令执行

yarn api:init

1638284318411.png

生产文档

yarn api:doc

1638284418047.png

(11)tsconfig.json文件配置

{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "declarationDir": "./typings",
    "module": "ESNext",
    "target": "ESNext"
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}

(12)调整api-extractor.json文件

{
  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
  "mainEntryPointFilePath": "dist/index.d.ts",
  "bundledPackages": [],
  "compiler": {
    "overrideTsconfig": {
      "compilerOptions": { "declaration": false }
    }
  },
  "apiReport": {
    "enabled": true
  },
  "docModel": {
    "enabled": true
  },
  "dtsRollup": {
    "enabled": true,
    "omitTrimmingComments": true,
    "untrimmedFilePath": "typings/index.d.ts"
  },
  "tsdocMetadata": {
  },
  "messages": {
    "compilerMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    },
    "extractorMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    },
    "tsdocMessageReporting": {
      "default": {
        "logLevel": "warning"
      }
    }
  }
}

最后:执行

yarn api:run

4, 总结

一个完整的SDK还需要很多的测试,这个只是自己在学习的过程中记录的笔记,个人感觉它的文档生成的确实很方便使用,后续会整理一个完整的SDK 代码,加油,大家一起学习。