👀 本期看点：

• 前端脚手架开发入门
• Puppeteer 原理分析
• pnpm 对比 npm 与 yarn
• JS 实现私有属性
• npm 并行执行脚本
• glob 语法介绍
• 循环依赖时，CJS 与 ESM 的区别

📃 文章 #

👉 前端脚手架开发入门

我们常常陷于业务开发，拿起脚手架就开干，但脚手架到底做了什么，你了解吗？本文介绍了一些工具，如：commander、chalk、inquirer、ora 等，以及 package.json 中的一些重要字段，最后通过实例 demo 来展示如何开发脚手架，是一篇入门好文。

👉 手写 Puppeteer：远程控制 Chromium

Puppeteer 相信大家都听过，它可以用 JS 自动化控制浏览器，本文讲述了其原理，基于 Chrome DevTools Protocol，它是 chrome devtools 和 chromium 通信的协议。

（直接下载 puppeteer 包很耗时，因为会同时下载 chromium，你可以下载 puppeteer-core 包，之后配置 executablePath 字段，类似executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',，这样就可以控制你电脑的 Chrome 了，会节省很多时间）

👉 pnpm 是凭什么对 npm 和 yarn 降维打击的

npm v2 是 嵌套 node_modules， 问题：

1. 重复的包安装了多次
2. windows 下路径名最长 200 多个字符，大于他会出错

yarn 出来了（npm v3 也紧跟），解决方案：铺平 node_modules，但有新的问题：幽灵包（没有安装包，但是可以用）、同一个包的不同版本还是会重复安装。最后 pnpm 出来了，使用链接解决，比较完美。

👉 私有属性的 6 种实现方式，你用过几种？

私有属性在 Java 的实现及其简单，但在 JS 中的实现可谓是眼花缭乱。本文总结了 6 种实现方式，并且分析了利弊。

1. 下划线命名
2. 下划线加 Proxy 限制
3. 基于 Symbol 特性
4. 使用 WeakMap
5. ES 最新草案 #prop
6. TS 的 private

👉 npm-run-all 并行执行脚本

有些 npm 脚本没有必要串行，比如build:umd 和 build:esm，它们没有依赖关系，所以可并行执行。本文介绍可以通过npm-run-all包来帮助开发者并行执行脚本。

👉 **/*.js 是啥语法？谁能解析？

.gitignore 里、webpack 配置里等这种配置**/*.js、dist/**/package.json，叫做 glob 语法，它来源于 linux，允许使用者通过 “通配符” 来匹配目录和文件。因为其 “实用、好用”，所以渐渐出圈，因此，即便我们使用的是 windows，在前端项目里也有工具库可以轻松的解析这种语法。

👉 抖音二面：为什么模块循环依赖不会死循环？CommonJS 和 ES Module 的处理有什么不同？

本文给出多个循环依赖的实例，并且包含 CJS 和 ESM 的对比，由浅入深的分析了现象与本质。

🤔 想法 #

1. 我们在项目初期都会思考几个问题：客户是谁？解决什么问题？使用什么技术方案？带来什么价值？这几个问题思考下来，项目要不要做、怎么做，基本就清晰了。来自：大淘宝技术人金句。

   1. 不要过于看重技术，它一定要基于场景，并且能解决问题，才能发挥作用。

2. 近期裁员很多，周围有的同事也已离开，所以需要多多提升自己了。

   1. 疫情这几年裁员已经比较平常了，我越来越意识到：不要认为是自己能力不行所以被裁，只不过就是公司的业务调整罢了，真的代表不了什么，更多是运气的成分吧。

3. 周刊改名为视角了，因为发现不可能每周更新，又叫周刊就有些奇怪 😂。更新速度会放慢，因为高质量的文章比较少，而且文章相关联的知识也要去学习。

2022-11-10（第 10 期）