React 16 中的错误边界(Error Boundaries)与全局错误处理 自 React 16 起,任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载。 对于开发已久且 Code Review 不是那么严格的庞大项目来说,在升级到 React 16 以后,可能会发现以前只偶尔在局部出现影响不大而未获得足够关注的异常,现在会时常导致整个应用垮掉。 React 16 引入了错误边界(Error Boundaries)来解决这种情况。 1 错误边界(Error 前端开发 任侠 2020-06-01 3167 热度 0评论
Angular 9 新特性及 Angular 8 升级至 Angular 9 参考 1 Anguar9 新特性简介 1.1 默认使用 Ivy 编译器 Ivy 在 Angular8 时即可使用,但需要自行在 tsconfig.json 中增加配置以开启,曾经尝试过但会有一些构建问题。在解决了数百 BUG 后,Ivy 在 Angular9 中 作为了默认的编译方式。lvy 编译器和运行时提供了不少的优点: 打包尺寸更小:Ivy 编译器的设计目的是删除那些无法通过摇树优化使用的 Ang 前端开发 任侠 2020-05-12 4573 热度 1评论
webpack 关闭 sourceMap 导致 sass-loader 报错问题分析与解决方法 在 webpack 中一般都会设置 webpack 的 devtool 以开启 sourceMap 功能。在使用了 resolve-url-loader 和 sass-loader 的情况下,当进行生产环境输出关闭 webpack 的 sourceMap 功能时,可能会产生类似如下报错信息: ModuleNotFoundError: Module not found: Error: Can\'t r 前端开发 任侠 2020-05-06 2202 热度 0评论
使用 source-map-explorer 分析前端打包结果进行包体积优化 对于前端打包构建生产环境的产出内容,特别是在采用了 Vue.js、React 或 Angular 等主流框架的时候,其体积达数 M 是很常见的现象。 当希望对包体积进行优化分析时,或许你知道可以选择使用 webpack-bundle-analyzer, 其实 source-map-explorer 也是个不错的选择。当打包输出结果生成了 sourceMap,source-map-explorer 前端开发 任侠 2020-04-29 3682 热度 0评论
使用 FRP 实现在家远程桌面到公司内网进行远程办公 Update: 2024-06-10 由于安全等原因,公司对于 VPN 访问内网的权限也非常慎重。这就导致在公司外很难进行完整的内网访问。另外,当你的办公环境、大量办公相关的文件均在公司内网办公机器上时,在公司外你也想远程访问自己的办公机器。 一种简单的解决方案是,通过两个 QQ 设置自动接受远程控制进行。这种方式被许多人采用,但它有个弊端是桌面不能锁屏,否则就无法成功。这是非常不安全的,会带来电 电脑基础 任侠 2020-01-22 12659 热度 5评论
使用 typescript-starter 快速创建基于 TypeScript 的前端类库项目 使用 TypeScript 来编写前端类库是当前一种流行而明智的选择。你可以全局安装 TypeScript 然后使用 tsc 来编译类库并发布,然而这不够工程化,还需要手动地一项项添加许多东西完善其工程体系。 基于 typescript-starter 这个开源工具库,你可以从命令行快速创建一个工程体系完善的 TypeScript 项目。 Quickly create and configure 前端开发 任侠 2020-01-20 2553 热度 0评论
确保前端 JavaScript 浮点数精度的四则运算方法 1 浮点数运算与 IEEE 754 标准 在 JavaScript 中,执行 0.1+0.2,得到的结果却是 0.30000000000000004。这就不得不提到 IEEE 754 标准。 IEEE二进制浮点数算术标准(IEEE 754)定义了表示浮点数的格式(包括负零-0)与反常值(denormal number)、一些特殊数值(无穷(Inf)与非数值(NaN))、以及这些数值的“浮点数运算符 前端开发 任侠 2019-12-31 3567 热度 1评论
升级至 Angular8 及实现自定义 webpack 配置的方案 1 升级至 Angular8 如果你使用的是 angular/cli 构建方案,执行 ng update 即可,该过程主要是更新 package.json 中的依赖。为了了解到底改变了哪些内容,个人更喜欢手动方式升级,方法参考如下: 首先全局安装 @angular/cli: npm i -g @angular/cli; 然后创建一个新的项目 ng new ng8-demo; 对比测试项目 ng8- 前端开发 任侠 2019-12-24 6031 热度 2评论
vscode插件开发:定制 vscode 主题插件扩展 vscode 自带的几款主题都很漂亮,也支持通过用户配置修改一些常用的配色,但是如果想对很多部分的配色进行修改则没那么容易。我们可以通过基于已有主题定制自己的 vscode 主题扩展来实现该目的。 vscode 的主题、各种图标自定义以及扩展功能都可以通过插件机制实现,所以主题也是一种插件。 1 vscode 插件的目录结构 对于 vscode 主题,主要包含如下文件或目录: package.nl 电脑基础 任侠 2019-10-21 3805 热度 0评论
使用 commitlint 约束项目 Git 代码提交描述信息格式规范 1 Angular Git Commit Guidelines 规范 Git 提交应当书写 commit message。message 的内容怎么写都行,但如何写比较合理是一个问题。开源社区有很多相关的规范,使用最广泛的则是Angular Git Commit Guidelines 规范,并且有众多相关的工具可以检测提交是否遵循了预定义的规范。 Angular 规范要求的 commit mess 前端开发 任侠 2019-09-24 5816 热度 1评论