每周一文

前言

总结开发中遇到的思路,方法

npm包开发-软链

  1. 背景

最近在打通全链路监控,前端方面依赖腾讯云自研的sdk实现前端监控,有部分需求要和apm合作,进行sdk的修改,sdk的修改不同于一般项目,它是一个npm包,在本地开发测试npm包,需要用到软链

  1. 什么是软链

简单说就是为开发的模块(待发布的npm包)创造一个全局链接,在主项目里链接这个依赖的模块,进行测试。

  1. 如何创建、使用软链

SDK 开发需要将本地代码代理到用户项目或者页面中,这里有两种方式

  1. 如果用户页面使用 cdn 模式

SDK项目启动后,可以使用 whistle 把 cdn 地址代理到本地,代理地址

1
tam.cdn-go.cn/aegis-sdk/latest/aegis.min.js [project_path]/aegis-sdk/packages/web-sdk/lib/aegis.js
  1. 如果用户项目使用 npm 包

项目启动后,cd 到 packages/web-sdk,在控制台执行

1
npm link

创建一个全局的链接,npm link作用在本地目录中创建一个符号链接,将一个包与依赖该包的项目之间建立关联。这样可以在本地工作在一个包上,而无需将其发布到注册表中。

在需要调试的项目中执行

1
2
npm link packageName
npm link @tencent/aegis-web-sdk // 例如腾讯云监控包

注意:这里的packageName一定要对应你的npm包package.json里的name字段值。

通过上边两步,我们已经可以在主项目里使用位于本地的npm包开发测试了

  1. 去除软链
1
2
npm unlink
npm link packageName
  1. 查看所有创建的全局链接名称
1
npm ls --global --depth 0

事件循环以及微宏任务

一文彻底厘清js事件循环和微任务、宏任务

浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的。

理解事件循环的工作方式对于代码优化很重要,有时对于正确的架构也很重要。

事件循环
事件循环 的概念非常简单。它是一个在 JavaScript 引擎等待任务,执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。

引擎的一般算法:

当有任务时:
从最先进入的任务开始执行。
休眠直到出现任务,然后转到第 1 步。
当我们浏览一个网页时就是上述这种形式。JavaScript 引擎大多数时候不执行任何操作,它仅在脚本/处理程序/事件激活时执行。

任务示例:

当外部脚本

走过路过,留下买路财,壮士