关于javascript:前端开发者周刊山月周刊第-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 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)

对于山月

我是山月，下篇文章再会

社交:

我的项目: