第 5 期: 如何高效组织 npm script

2021/03/29

前端爱好者周刊 (Github: shfshanyue/weekly),每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等,周刊中优秀文章会在公众号全栈成长之路逐一推送。每周一发布,订阅平台如下,欢迎订阅。

封面

苏伊士运河造堵塞

大型货轮长赐号搁浅堵塞苏伊士运河,目前救援仍在继续

一句话

  • 在最新版的 github,Readme 已支持 TOC 快速目录
  • svg-term 可以很方便的对你在终端的操作命令进行录制并保存为很小体积的 SVG 动画
  • code . 可以使用 VS Code 快速打开当前目录
  • 统计显示,2020年在美国各级学校注册的国际学生人数与上年相比下降了18%
  • 新西兰国家水事和大气研究所日前发布的一份研究显示,在新西兰周边海域采样的鱼类内脏中有微塑料,甚至肌肉组织中也发现了微塑料成分
  • 新一期贷款市场报价利率(LPR)出炉,我国1年期和5年期以上LPR均未调整,1年期LPR仍为3.85%,5年期以上LPR为4.65%
  • 国防部新闻发言人表示,055型驱逐舰拉萨舰,舷号为102,顺利完成建造和海试工作,已于3月2日正式加入中国海军序列
  • 截至3月24日,今年我国快递业务量已突破200亿件,日均业务量超过2.4亿件,日均服务用户接近5亿人次
  • 苏伊士运河货船搁浅,每天损失四亿美元。埃及有关部门表示,对在苏伊士运河中搁浅货船的救援仍在继续,运河暂停航行,不排除救援可能需要几周时间

开发利器

一、 Prettier Playground: 任意语言代码格式化

prettier

Prettier 是一款优秀的代码格式化工具

支持多种编程语言

支持多种编辑器

二、 asciinema: 终端动作录制软件

使用 python 编写的一款可记录终端操作命令动画的工具软件,可在线播放。借助第三方工具可以转化为 gif 动画或者 svg 动画。

使用以下两行命令可快速开始录制终端。

$ brew install asciinema

$ asciinema rec

三、 svg-term-cli: 把终端操作录制为 SVG 动画

基于 asciinema 的一款软件,使用 javascript 编写。可把终端动作录制为 svg 动画

$ cat demo.cast | svg-term > demo.svg

文章推荐

一、 仅使用CSS就可以提高页面渲染速度的4个技巧

本篇文章提到了四个关于提高页面性能的 CSS 技巧

  1. content-visibility
  2. will-change
  3. 带有媒体查询的 link
  4. @import
  5. 跳转译文

二、 如何高效组织 npm script

一个项目的 npm script 是前端工程化的一个缩影,从这篇文章可以给我们如何更好地组织 npm script 启发一个新的思考,涉及到以下方面

  1. start/dev
  2. build
  3. test
  4. format
  5. lint
  6. audit
  7. outdated
  8. size
  9. deploy

代码片段

一、 Array.prototype.flatMap: 以下结果输出多少?

输入输出结果是多少?

[1, 2, [3], 4].flatMap(x => x + 1)

输出,你做对了吗?

[1, 2, [3], 4].flatMap(x => x + 1)
//=> [2, 3, '31', 5]

flatMap 实际上是先 mapflat,实现如下

Array.prototype.flatMap = function (mapper) {
  return this.map(mapper).flat()
}

二、 把数组置空

const l = [1, 2, 3, 4, 5]

// 很方便把数组置为空数组
l.length = 0

开源与库

一、 Prettier: 代码格式化工具

支持多种编程语言,如 html、css、js、graphql、markdown 等并且可与编辑器 (vscode) 深度集成的代码格式化工具

支持多种编程语言

支持多种编辑器

二、 commitlint: Git Commit 格式化工具

三、 npm-check-updates: 把 package.json 中的依赖升级到最新版本

ncu

npm-check-updates,npm outdated 的升级版本,可以控制把 package.json 中的依赖升级到最新版本

$ ncu
Checking package.json
[====================] 5/5 100%

express           4.12.x  →   4.13.x
multer            ^0.1.8  →   ^1.0.1
react-bootstrap  ^0.22.6  →  ^0.24.0
react-a11y        ^0.1.1  →   ^0.2.6
webpack          ~1.9.10  →  ~1.10.5

Run ncu -u to upgrade package.json

如果希望安全地升级,可以使用 ncu doctor --doctor,每升级一个依赖之前都必须成功通过测试用例

四、 storybook: 构建更健壮的 React/Anular/Vue UI 组件

storybook 可以更高效地组织 React/Angular/Vue 的 UI 组件

版本发布

一、 webpack v5.28.0

webpack v5.28.0 在 2021.03.24 发布,改进功能及修复 Bug 如下。

(webpack 在 Release 中对改进功能及修复 bug 并不指明 Issue)

  1. add module.generator.asset.publicPath to configure a different publicPath for assets
  2. fixes a watch mode caching problem which was introduced in 5.26.0 when using the unsafe cache
  3. improve serialization performance

二、 nodejs 15.12.0

  • crypto:

    • add optional callback to crypto.sign and crypto.verify (Filip Skokan)
    • support JWK objects in create*Key (Filip Skokan)
  • deps:

    • switch openssl to quictls/openssl (James M Snell)
    • update to cjs-module-lexer@1.1.0 (Guy Bedford)
  • fs:

    • improve fsPromises writeFile performance (Nitzan Uziely)
    • improve fsPromises readFile performance (Nitzan Uziely)
  • lib:

    • implement AbortSignal.abort() (James M Snell)
  • node-api: define version 8 (Gabriel Schulhof)
  • worker: add setEnvironmentData/getEnvironmentData (James M Snell)

Profile picture

作者山月、待业在家、勤学苦练、欢迎交流。 这是我的博客