Node.js
解决 Element UI 自定义主题时 primordials is not defined 的问题

Element UI可以使用命令行主题工具来自定义主题。

在Node.js 15版本下,该工具无法正常工作,报错ReferenceError: primordials is not defined

换个思路,不使用命令行主题工具了。直接git clone官方主题theme-chalk,编辑后执行gulp build编译,依旧报这个错误。

经过一番排查,结论就是gulp的版本太低

下面说一下,如何在直接编辑theme-chalk的情况下,顺利通过gulp编译。

打开package.json,把gulp的版本修改为4.0.2,然后重新npm i,再gulp build。这次有了新的错误:

Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (88)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/Users/user/project/theme-chalk/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/Users/user/project/theme-chalk/node_modules/node-sass/lib/index.js:14:35)

可以看出来,是node-sass的版本太低了,不支持当前的Node.js版本。那么,安装最新的node-sass即可。

npm i node-sass@5.0.0 -D
阅读更多3 分钟
测试
使用Jest进行前端单元测试

对于逻辑复杂、迭代频繁的前端项目,进行单元测试很有必要。

这样可以节省大量E2E测试的时间,保证代码的可靠性,量化评估研发团队、测试团队的产出。

1. 选型

常见的前端单元测试框架,有Mocha、Jasmine、Jest。我的选型思路如下:

  • Mocha不自带断言,需要结合其他断言库才可使用。Jasmine、Jest自带断言;
  • Github上,Star数分别是:Mocha 20.4k,Jasmine 15.1k,Jest 34.7k;
  • Jest由Facebook出品。

综上,选择Jest。

2. 覆盖率报告

先说重点:

  • Jest自带HTML格式的覆盖率报告,没有必要再安装jest-html-reporter这种第三方库。
  • 要生成HTML覆盖率报告,需要手动修改Jest配置文件。

先配置一下Jest。如果按照官网的教程,直接执行jest --init会报错。应该执行:

阅读更多4 分钟
Node.js
关于macOS的node-gyp rebuild error

在使用npm安装一些包的时候,很容易遇到关于node-gyp rebuild的error。

造成这个问题的原因,一般都是系统内缺少node-gyp的依赖库。因此,解决问题的思路就是:

  • 查看缺少什么库
  • 安装缺少的库

Google「node-gyp rebuild error」,排名比较靠前的中文内容,一般都会讲如何解决没有安装Xcode Command Line Tools的问题,比如这篇文章

如果报错的内容中,存在「gyp: No Xcode or CLT version detected!」,那就得安装Xcode CLT:

xcode-select --install

在这之后,如果继续报错,就得检查缺少什么依赖了。一般来说,在一大段报错信息的后半部分,可以找到「No package ‘xxx’ found」这样的的错误信息。

比如上图,提示缺少pixman-1,那就使用Homebrew安装pixman。

阅读更多2 分钟
测试
安装Cypress的几个Tips

看了打造高速运转的迭代机器:现代研发流程体系打造一文,很受启发。正好手上有项目可以跑一下E2E测试,于是试用了文中提到的Cypress。

安装过程不是非常顺利,总结了几个Tips,记录下来供大家参考。

1. 安装二进制文件

使用npm安装Cypress后,根据官网的教程,执行npx cypress open,会提示没有安装Cypress.app,需要执行cypress install安装。

直接执行是不行的,需要加上npx前缀,即:

npx cypress install

如果网络环境不是很理想,下载速度非常慢的话,可以直接从镜像服务器下载,然后解压到对应的目录:

  • MacOS: ~/Library/Caches/Cypress/{version}/
  • Linux: ~/.cache/Cypress/{version}/
  • Windows: /AppData/Local/Cypress/Cache/{version}/

2. Failed to connect to Chrome

阅读更多3 分钟
产品思维
Clubhouse不就是YY吗?

当然不是。

在日常生活中,大家应该对这类句式并不陌生:

  • 披萨不就是个大饼铺点肉吗?
  • 寿司不就是放块鱼在米饭上吗?

1. 大饼铺点肉

披萨是大饼铺点肉,这句话其实没什么大问题。可以从下面2个角度来看。

1.1. 抽象化与具体化

抽象化是一种思考过程,通过缩减概念或现象的信息量,将其广义化,主要是为了保存和某种特定目的有关的信息。

「披萨就是个大饼铺点肉」如果是一种抽象的话,挺不错的。一个从来没有见过披萨的人,可以知道披萨有饼有肉,肉还是铺在饼上的,不是馅饼。

还可以继续抽象,说「披萨是一种食物」。一个从来没有见过披萨的人,起码知道披萨可以吃。

具体化是抽象化的逆向过程,通过补充信息量,将概念或现象狭义化。

阅读更多9 分钟
Hexo
创建Hexo主题

突然想到,我获取的有效信息,主要来自Google出来的博客文章,而不是微信公众号或今日头条。

所以,还是搭建个博客吧。

1. 选型

搭博客的主要目的,是在网络上留一块地方写些东西。所以,选型的基本要求是「简单」,以专注写作。

Wordpress等重量级CMS可以排除了,选一个静态站点框架即可。根据Wappalyzer的排名,结合个人偏好,选择了基于Node.js的Hexo。

2. 创建主题

搜索到了从 0 到 1 开发 Hexo 主题杂谈这篇文章,很有帮助。

2.1. 选择模版引擎和CSS预处理器

我的选择是:

阅读更多5 分钟
1

版权所有 © 2021 Shiau. 以商业目的使用本网站内容需获许可。非商业使用本网站内容需遵循知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议。All content is made available under the CC BY-NC-ND 4.0 for non-commercial use. Commercial use of this content is prohibited without explicit permission.

Powered by hexo with theme moderate.