这是我参与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, 架构图
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
(4) 文档注释
添加vscode插件:Document This
(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
生产文档
yarn api:doc
(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 代码,加油,大家一起学习。