你在一家小型互联网公司做前端。近期，公司发展良好，商业模式稳定。老板决定试一试付费推广。马上就是五一节了，老板想策划一个活动。但公司前端人手有限，各业务无法独立开展活动。于是老板找到了你，希望你封装一个活跃的SDK组件，供公司的几个业务接入。你心里嘀咕：平时，你写了很多组件，公共组件你也写过。Activity组件感觉就像带有业务逻辑的公共组件，所以应该不难吧？但是你不知道，又怕你打包的组件SDK被访问。业务方看不顺眼，就去请教了公司最资深（体量最少）的前端老牌。说明来意后，老卡深深的喝了一口保温瓶里的菊花枸杞茶。“组件SDK的封装方式分为组件设计、开发、接入、上线，我一一说明。”组件设计好的组件设计需要做到“职责清晰”。在设计阶段，需要明确三个角色的职责：与提供数据的服务器明确职责Activity内需要的数据通常由服务器提供，此时需要明确字段的粒度.例如：xxx元邀请新用户的奖励xxx是一个变量，通常作为一个字段。那么“邀请新用户领取人民币奖励”的文案呢？活动期间，有没有可能PM发现文案效果不好，想修改。如果前端文案硬编码，修改意味着组件提供者（你）和业务接入方都得重新上线。因此，如果评价可能会被修改，更好的办法可能是将这个文案下发成类似的结构：data:{title:"邀请新用户获得{{bonus}}元奖励",params:{bonus:123}}与业务接入方明确职责为了使SDK主动组件轻量化，SDK中使用的能力（如：数据请求、登录、错误监控）通常由宿主环境（接入组件的业务）提供).这些能力分为两类：业务方在运行时可以提供的方法，以及业务方依赖的库提供的能力。其中，“runtimemethods”可以作为props传递给SDK组件，比如登录方法。library的capabilities，SDK需要将其定义为peerDependencies，比如React、ReactDOM。React技术栈需要判断SDK使用的React版本和业务使用的React版本必须同时在v16.14之前或者之后，以防JSX编译成不同的结果（_jsx.createElement和React.createElement)和PM敲定activity流程step用过产品撕过的朋友都知道。组件开发完成职责分工并产生技术文档后，就可以开始“组件开发”了。此时需要注意两点：完善类型提示，使用ts编写组件，导出类型声明文件，可以极大规范业务方的访问，降低访问和沟通的成本。ErrorBoundary如果SDK组件抛出错误，导致访问的页面崩溃，则为p0级bug。因此，一定要在组件内部捕获SDK错误。对于React组件，用ErrorBoundary包装是必不可少的。业务接入SDK组件终于开发完成，发布到公司内部npm平台。业务方将SDK作为npm包引入。这时需要考虑以下几个问题：服务接入方应该导入什么模块规范（ESMorCJS）？如果访问方以SSR的形式访问服务端的组件，可以使用CJS规范。对于CSR，通常使用ESM。所以SDK组件在打包编译时需要输出ESM和CJS文件。如果用ESM导出，需要考虑业务端treeShaking的需求。如果SDK会导出多个组件（比如同一个activity组件针对不同的业务输出不同的版本）：//index.tsxexport{defaultasBase}from'./components/Base';从'./components/SDKForA'导出{defaultasSDKForA}；从'./components/SDKForB'导出{defaultasSDKForB}；从'./components/SDKForC'导出{defaultasSDKForC}；需要考虑业务方的treeShaking需求。目前业界常见的做法是：将不同的组件编译到不同的目录中，业务端以组件目录的形式引用，例如：//业务端代码importSDKForAfrom'SDK/dist/modern/components/SDKForA';其中SDK是活动组件导出的npm包。dist是编译后的产品打包目录。modern是ESM规范的打包路径。如果要导入CJS包，可以将modern改为node。SDKForA是要导入的组件。如果业务方使用babel-plugin-import，上面的写法可以换成如下：//业务方代码import{SDKForA}from'SDK';除了js文件，业务方还要考虑css文件的编译需求。因此，最好将组件样式文件与组件分开。例如修改如下路径：-components-SDKForA-index.tsx-style.less其中index.tsx中引入的style.less修改为：-components-SDKForA-index.tsx-styles-SDKForA-style.less-style.cssindex.tsx不导入样式文件，由业务方单独导入。样式以两种格式输出：.css和.less。当业务方需要进一步编译样式时，可以导入.less，否则直接导入.css。业务端连接时，可以这样连接：//业务端代码importSDKForAfrom'SDK/dist/modern/components/SDKForA';import'SDK/dist/modern/styles/SDKForA/style.less';上线后前端解放了？不！精彩内容在线上发生~随着用户级别的提高，出现各种BUG的概率也随之增加，主要包括：界面异常静态资源加载失败各种奇怪的事情宿主环境导致的错误和关键活动过程中的异常需要在线监控和预警。如果业务方引入了哨兵，活动SDK可以针对上述情况进行埋点，创建相应的监控看板。当错误指示器超过阈值时，您可以随时起床排查问题。除了代码埋点，业务埋点也很重要。一位不知名的网络人说：我知道我做的活动会被抢，但是我不知道被抢了多少，我会告诉你的。综上所述，要想封装一个没有被投诉的SDK组件，需要做到以下几点：明确组件职责，知道SDK可以从宿主环境获取哪些能力，完善ts声明，灵活导出有错误边界的产品，让业务舒舒服服上线业务和代码层面的监控结束后，老卡又喝了一口保温瓶里的菊花枸杞茶，才发现茶水已经凉了。
