Merge 2022 summer doc ES Module & Node.js

Author: abmfy

docs/frontend/react/prepare.md

@@ -87,10 +87,14 @@ yarn start
 
     如果你现在能够在 3000 端口访问到一个写有 `Hello, React!` 字样的页面，则已经完成了配置。
 
-## 使用 ESLint 规范码风
+## 代码格式化
 
 这是一个**可选项**，但是我们认为开发较大工程的时候，尤其是需要多人协作的时候，统一的码风是必要的。
 
+即使每个人都可以有自己习惯的编写风格，但为了其他人阅读方便，在提交代码之前应该使用代码格式化工具统一码风。这里简单介绍两种常用的格式化工具。
+
+### ESLint
+
 在应用目录下执行下列命令，即可初步配置一个 ESLint：
 
 ```shell
@@ -100,7 +104,7 @@ npm install eslint --save-dev
 
 # yarn
 yarn add eslint --dev
-./node_modules/.bin/eslint --init
+yarn eslint --init
 ```
 
 执行第二条命令后，ESLint 会询问你的配置。对于前几个问题我们建议选择“强制调整码风” “使用 JavaScript modules(import/export) ” “使用 React 框架” “使用 TypeScript ” “在浏览器上运行代码”。
@@ -129,4 +133,31 @@ yarn add eslint --dev
 
 这一行的意思是执行 `yarn fix` 的时候会使用 ESLint 将 `src` 目录下的所有扩展名为 `js / jsx / ts / tsx` 的文件修复码风。
 
-不过要注意的是，自动修复能力有限，所以更多的时候还需要手动对文件进行一些调整。自动修复也有可能会出错，这个时候可以自己手动添加让 ESLint 忽略这一部分的注释。
+不过要注意的是，自动修复能力有限，所以更多的时候还需要手动对文件进行一些调整。自动修复也有可能会出错，这个时候可以自己手动添加让 ESLint 忽略这一部分的注释。
+
+### Prettier
+
+在 Node.js 项目中添加 Prettier：
+
+```bash
+yarn add -D prettier
+```
+
+在 `package.json` 中添加：
+
+```json
+{
+    "scripts": {
+        ...
+        "fix": "prettier --write 'src/**/*{.js,.jsx,.ts,.tsx}'"
+    }
+}
+```
+
+这里的含义与 ESLint 相似，只不过这次是由 Prettier 尝试修复码风。
+
+!!! note "ESLint 和 Prettier 的区别"
+
+    需要注意的是，Prettier 仅仅尝试修复码风，它所进行的一切修改在语法上都是等价的，也即 Prettier 并不关心代码的正确性，甚至不会检查是否符合语法规范；同时 Prettier 可以配置的项目相当少，这是由于 Prettier 的开发者更希望能强制统一标准而非在具体 lint 配置上陷入无意义的争论。
+
+    ESLint 在检查风格的同时也可以进行更多的语法检查，还可以通过插件来检查更加具体的错误，例如 React Hook 的不当使用等；相比于 Prettier，ESLint 还可以对代码风格进行更复杂的配置。

docs/languages/node.js/index.md

@@ -14,6 +14,30 @@ V8 引擎的高效使得基于 Node.js 的程序可以有极高的运行效率
 
 Node.js 的运行机制与浏览器中极为相似，主要的区别体现在于运行环境和所能访问的 API 不同，因此以下将尽量**不会**涉及语法细节。
 
+## Node.js 使用场景
+
+Node.js 是 JavaScript / TypeScript 语言的主要开发环境，常见的场景至少包括：
+
+### 后端开发
+
+Node.js 可以直接运行，由于包含相关的系统库，Node.js 可以读写文件、监听网络等，这就使得 Node.js 可以作为后端开发的选择，常见的框架为 Express.js。
+
+### 前端开发
+
+尽管前端的运行环境是浏览器而非 Node.js，但 Node.js 提供了与浏览器基本相同的机制，同时提供了编译、打包等能力，因此在前端开发中，往往使用 TypeScript 进行开发，在 Node.js 环境中完成编译和打包后，将生成的打包文件部署在前端。常用的框架有 React.js、Vue.js 等。
+
+值得一提的是，这里的编译并不仅仅包括 TypeScript 到 JavaScript 的编译，由于用户使用的浏览器种类和版本无法确定，为了提供尽可能好的兼容性，同时保留较好的开发体验，常常使用 Babel 等工具将代码转换为较低版本 JavaScript 兼容的语法。
+
+### 原生应用开发
+
+除了可以进行网页开发，Node.js 还可以通过 React Native、Electron 等框架编写原生应用，提供与网页开发相似的开发体验。但需要注意的是这种应用的逻辑处理仍然依赖于 JavaScript 运行时，因此其运行效率与平台相关（指 iOS 会限制 JIT 的使用并导致速度相对较慢）。
+
+!!! note "JIT (Just In Time，即时编译)"
+
+    JavaScript 的多种运行时都支持 JIT，同时也支持以解释器方式运行。
+
+    使用 JIT 时，运行时首先分析 JavaScript 代码并转换为字节码，在这个过程中会尝试进行优化，通常而言可以显著提高 JavaScript 的运行效率，但同时也会增加很多内存开销（Chrome: ?）。如果代码中有较多性能开销大且难以被分析和优化的代码（通常是由于类型难以判断），则很容易导致 JIT 的效果下降，这样会导致代码运行效率降低。
+
 ## 安装
 
 !!! info "Node.js 版本的选择"
@@ -34,7 +58,13 @@ Node.js 的运行与 Python 十分相似，可以使用 REPL（英文：read-eva
 
 ## Node.js 模块化
 
-在之前的 JavaScript 基础章节中并没有提及 JavaScript 有什么模块化或者包管理的东西，这是因为在前端开发中，要么将用到的模块全部打包（关于打包将在后续提及），要么通过 CDN 引入，前者通过 Node.js 实现，而后者则直接将导出的模块挂在在 `window` 下，也即成为全局变量，这也就是早期 JavaScript 的问题，通过全局变量解决一切问题，大家在程设中想必~~这么做过~~知道这样做是不好的。
+在之前的 JavaScript 基础章节中并没有提及 JavaScript 有什么模块化或者包管理的东西，这是因为在前端开发中，要么将用到的模块通过 Node.js 全部打包（关于打包将在后续提及），要么通过 CDN 引入。例如，通过 CDN 引入第三方模块时，可以在 HTML 中添加：
+
+```html
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+```
+
+当该脚本加载完成后，在浏览器全局对象 `window` 中会添加属性 `axios`，也即成为全局变量，在其他代码中可直接使用。这是早期 JavaScript 的问题，通过全局变量解决一切问题，大家在程设中想必<del>这么做过</del>知道这样做是不好的。
 
 这个问题早在 ECMA 制定 ES6 标准引入 ES6 Module 前就广泛存在了，因此社区早已提出了多种解决方案，主要有 CommonJS、AMD、CMD 几种。后两种现在已经很少出现，而 CommonJS 的主要实践者正是 Node.js。因此当运行 Node.js 项目时，如果在版本低于 ES6 的情况下使用 ES6 Module（即使用 `import`、`export`）方法就会报错。不过好在我们可以选择使用 ES6 及以上版本，或者使用 Babel（见资源链接）实现兼容，因此我们将主要使用 ES6 Module 来管理模块。
 
@@ -53,6 +83,7 @@ export { value as default };
 export default value;
 
 // 对于 TypeScript，可以通过以下方式导出类型
+// 二者的区别是前一个可以确保这一行内容不会出现在编译结果中
 export type { type };
 export { type };
 ```
@@ -67,6 +98,9 @@ import { value as aliasNameOfValue } from './export';
 // 以下两句等价
 import { default as value } from './export';
 import value from './export';
+// 将 ./export 中的所有导出都导入，并作为对象 someModule
+import * as someModule from './export';
+someModule.value === value;
 ```
 
 如果需要引入再导出，可以简写为：

docs/languages/node.js/npm.md

@@ -102,7 +102,13 @@ npm install -g pnpm
 
 在另一些情况下（比如创建 React 项目），我们虽然需要执行一些类似于 `prettier` 的命令，但以后并不需要安装这个模块，更没有必要把这个模块写在 `package.json` 中，此时我们可以执行 `npx create-react-app example-app`，npx 会自动下载这一模块并运行，但并不会保留在当前文件夹中，也不会对 `package.json` 造成影响。
 
-yarn 和 pnpm 也支持这一语法。
+yarn 和 pnpm 也支持这一语法：
+
+```bash
+pnpx create-react-app example-app
+# yarn 并不普遍地支持这种用法，但是对于常见的创建项目，yarn 提供如下方法
+yarn create react-app example-app
+```
 
 ### TypeScript 相关
 
@@ -114,11 +120,34 @@ yarn 和 pnpm 也支持这一语法。
 }
 ```
 
-然后运行 `yarn build` 即可对 TypeScript 代码进行编译，更多的配置详见资源链接。
+然后运行 `yarn build` 就会根据 `tsconfig.json` 中的配置编译 TypeScript 代码，例如一些配置的含义如下：
+
+```json
+{
+    // 编译选项
+    "compilerOptions": {
+      // 使用 CommonJS 模块管理
+      "module": "commonjs",
+      // 修正导入命名空间和默认导入时的错误
+      "esModuleInterop": true,
+      // 严格空类型检查
+      "strictNullChecks": true,
+      // 目标代码版本 ES 2020
+      // ESNext 指定最新版本 ES
+      "target": "ES2020",
+      // 执行模块解析方式
+      "moduleResolution": "node",
+      // 输出到 dist 文件夹
+      "outDir": "dist",
+      // 编译的根目录为 src （即从 src/index.ts）开始索引
+      "rootDir": "src"
+    }
+}
+```
 
 !!! tip "TypeScript 的类型标注"
 
-    我们知道 TypeScript 通过静态类型检查提供额外的安全性，在包管理器安装第三方模块时，通常已经包含了相应模块的类型标注（形如 `index.d.ts` 的文件），但也有部分项目并没有自带类型标注，这部分项目许多都有单独的类型标注模块，这些模块形如 `@types/name`，例如 lodash 并没有自带类型标注，但可以通过 `yarn add -D @types/lodash` 来添加类型标注。
+    我们知道 TypeScript 通过静态类型检查提供额外的安全性，在包管理器安装第三方模块时，通常已经包含了相应模块的类型标注（形如 `index.d.ts` 的文件，或原本就是以 TypeScript 编写的），但也有部分项目并没有自带类型标注，这部分项目许多都有单独的类型标注模块，这些模块形如 `@types/name`，例如 lodash 并没有自带类型标注，但可以通过 `yarn add -D @types/lodash` 来添加类型标注。
 
 ### 资源链接