前端开发者周刊(山月周刊)第 5 期：如何高效组织 npm script

前端爱好者周刊 (Github: shfshanyue/weekly)，每周记录关于前端的开源工具、优秀文章、重大库版本发布记录等等。每周一发布，订阅平台如下，欢迎订阅。

• 订阅网站: https://weekly.shanyue.tech
• 订阅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 是一款优秀的代码格式化工具

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

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

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

$ brew install asciinema

$ asciinema rec

• repo: asciinema/asciinema

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

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

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

• repo: marionebl/svg-term-cli
• npm: svg-term-cli

文章推荐

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

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

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

• 跳转译文

二、 如何高效组织 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 实际上是先 map 再 flat，实现如下

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) 深度集成的代码格式化工具

• repo: prettier/prettier
• npm: prettier

二、 commitlint: Git Commit 格式化工具

• repo: conventional-changelog/commitlint
• npm: @commitlint/cli

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

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，每升级一个依赖之前都必须成功通过测试用例

• repo: raineorshine/npm-check-updates
• npm: npm-check-updates

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

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

• repo: storybookjs/storybook/

版本发布

一、 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 [email protected] (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)

关于山月

我是山月，下篇文章再会

社交:

Github	知乎	掘金	博客

项目:

next app	我的面试	诗词集
开发者工具箱	npm 在线执行	前端周刊