Document

Text length: {textLength}

\n );\n};\n```\n\n在这个例子中，`textLengthState` 是一个 `selector`，它根据 `textState` 的值计算文本的长度。\n\n### `selectorFamily` 的作用\n\n`selectorFamily` 是 `selector` 的一种扩展，它允许你创建一系列相关的 `selector`，这些 `selector` 可以根据传入的参数动态生成。这在需要根据不同的输入生成不同的派生状态时非常有用，比如根据不同的 ID 获取不同的数据。以下是一个 `selectorFamily` 的示例：\n\n```jsx\nimport { atom, selectorFamily, useRecoilValue } from \"recoil\";\n\n// 模拟一个数据集合\nconst dataState = atom({\n key: \"dataState\",\n default: {\n 1: { name: \"Item 1\" },\n 2: { name: \"Item 2\" },\n 3: { name: \"Item 3\" },\n },\n});\n\n// 定义一个 selectorFamily\nconst itemSelectorFamily = selectorFamily({\n key: \"itemSelectorFamily\",\n get:\n (itemId) =>\n ({ get }) => {\n const data = get(dataState);\n return data[itemId];\n },\n});\n\nconst App = () => {\n const item1 = useRecoilValue(itemSelectorFamily(1));\n const item2 = useRecoilValue(itemSelectorFamily(2));\n\n return (\n

Item 1: {item1?.name}

Item 2: {item2?.name}

\n );\n};\n```\n\n在这个例子中，`itemSelectorFamily` 是一个 `selectorFamily`，它根据传入的 `itemId` 从 `dataState` 中获取相应的数据。通过不同的 `itemId` 可以获取不同的派生状态。\n\n### 两者的区别\n\n- **参数化能力**\n - **`selector`**：没有参数化的能力，它的依赖和计算逻辑是固定的，每次使用时都会计算相同的派生状态。\n - **`selectorFamily`**：支持参数化，可以根据传入的不同参数生成不同的 `selector` 实例，从而计算出不同的派生状态。\n- **使用场景**\n - **`selector`**：适用于派生状态的计算逻辑固定，不依赖外部参数的场景，比如根据一个固定的原子状态计算其长度、总和等。\n - **`selectorFamily`**：适用于需要根据不同的输入动态生成派生状态的场景，比如根据不同的 ID 获取不同的数据、根据不同的筛选条件获取过滤后的数据等。\n- **记忆化机制**\n - **`selector`**：对整个 `selector` 进行记忆化，只要依赖的状态不变，就不会重新计算。\n - **`selectorFamily`**：对每个根据不同参数生成的 `selector` 实例进行记忆化，不同参数对应的实例之间相互独立，每个实例的计算结果会分别进行记忆化。\n\n综上所述，`selectorFamily` 是 `selector` 的增强版本，当你需要根据不同的参数动态生成派生状态时，应该使用 `selectorFamily`；而当派生状态的计算逻辑固定时，使用 `selector` 即可。\n",{"_54":258,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1095/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1095/timeline",{"_54":261,"_56":57,"_58":262,"_60":263,"_62":264,"_64":265,"_66":266,"_68":267,"_70":268,"_72":269,"_74":270,"_107":271,"_120":121,"_122":26,"_123":-5,"_124":273,"_126":274,"_148":141,"_142":276,"_144":277,"_147":-5,"_150":151,"_152":278,"_157":-5,"_158":279,"_160":280,"_172":282,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1094","https://api.github.com/repos/pro-collection/interview-question/issues/1094/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1094/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1094/events","https://github.com/pro-collection/interview-question/issues/1094",2842901665,"I_kwDOJGDC6c6pczyh",1094,"[React] Recoil 里面 selector 支持哪些参数【热度: 239】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[272],{"_66":245,"_68":246,"_54":247,"_113":248,"_115":249,"_117":26,"_118":250},[],{"_54":215,"_64":216,"_58":217,"_66":218,"_68":219,"_70":220,"_72":221,"_118":222,"_136":275,"_138":224,"_140":141,"_120":121,"_142":225,"_144":226,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-02-10T16:03:44Z","2025-02-10T16:03:45Z",{"_154":141,"_155":141,"_156":141},"**关键词**：Recoil selector\n\n在 Recoil 中，`selector` 函数接受一个配置对象作为参数，这个配置对象有多个可选属性，下面详细介绍这些属性。\n\n### 1. `key`\n\n- **类型**：`string`\n- **描述**：`key` 是一个必需的属性，用于唯一标识这个 `selector`。在 Recoil 的内部状态管理系统中，每个 `selector` 都需要一个唯一的键，以确保状态的正确更新和管理。\n- **示例**：\n\n```jsx\nconst mySelector = selector({\n key: \"mySelector\",\n get: ({ get }) => {\n // 状态计算逻辑\n },\n});\n```\n\n### 2. `get`\n\n- **类型**：`({ get: GetRecoilValue }) => any`\n- **描述**：`get` 函数是 `selector` 中最重要的部分，用于计算 `selector` 的值。它接收一个对象作为参数，该对象包含一个 `get` 函数，通过这个 `get` 函数可以获取其他 `atom` 或 `selector` 的值。当依赖的状态发生变化时，`get` 函数会重新执行以计算新的值。\n- **示例**：\n\n```jsx\nconst textState = atom({\n key: \"textState\",\n default: \"Hello\",\n});\n\nconst textLengthSelector = selector({\n key: \"textLengthSelector\",\n get: ({ get }) => {\n const text = get(textState);\n return text.length;\n },\n});\n```\n\n### 3. `set`（可选）\n\n- **类型**：`({ set: SetRecoilState, reset: ResetRecoilState }, newValue: any) => void`\n- **描述**：`set` 函数用于使 `selector` 变为可写的。当调用 `useRecoilState` 或类似的钩子来修改这个 `selector` 的值时，`set` 函数会被执行。它接收两个参数：第一个参数是一个包含 `set` 和 `reset` 函数的对象，`set` 函数用于更新其他 `atom` 或 `selector` 的值，`reset` 函数用于将状态重置为默认值；第二个参数是新的值。\n- **示例**：\n\n```jsx\nconst counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\nconst doubleCounterSelector = selector({\n key: \"doubleCounterSelector\",\n get: ({ get }) => {\n const counter = get(counterState);\n return counter * 2;\n },\n set: ({ set }, newValue) => {\n set(counterState, newValue / 2);\n },\n});\n```\n\n### 4. `dangerouslyAllowMutability`（可选）\n\n- **类型**：`boolean`\n- **描述**：Recoil 默认假设状态是不可变的，这有助于性能优化和状态管理。但在某些特殊情况下，你可能需要对状态进行可变的修改，这时可以将 `dangerouslyAllowMutability` 设置为 `true`。不过，使用这个选项需要谨慎，因为它可能会破坏 Recoil 的一些优化机制。\n- **示例**：\n\n```jsx\nconst mutableSelector = selector({\n key: \"mutableSelector\",\n get: () => {\n // 获取状态逻辑\n },\n dangerouslyAllowMutability: true,\n});\n```\n\n### 5. `cachePolicy_UNSTABLE`（可选）\n\n- **类型**：`{ eviction: 'most-recent' | 'lru' | 'none' }`\n- **描述**：这个属性用于控制 `selector` 的缓存策略。`eviction` 有三个可选值：\n - `'most-recent'`：只保留最近使用的值。\n - `'lru'`：使用最近最少使用（LRU）算法进行缓存淘汰。\n - `'none'`：不使用缓存，每次都重新计算。\n- **示例**：\n\n```jsx\nconst cachedSelector = selector({\n key: \"cachedSelector\",\n get: () => {\n // 状态计算逻辑\n },\n cachePolicy_UNSTABLE: {\n eviction: \"lru\",\n },\n});\n```\n\n这些就是 `selector` 支持的主要参数，通过合理使用这些参数，可以实现复杂的状态计算和管理。\n",{"_54":281,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1094/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1094/timeline",{"_54":284,"_56":57,"_58":285,"_60":286,"_62":287,"_64":288,"_66":289,"_68":290,"_70":291,"_72":292,"_74":293,"_107":294,"_120":121,"_122":26,"_123":-5,"_124":296,"_126":297,"_148":141,"_142":299,"_144":300,"_147":-5,"_150":151,"_152":301,"_157":-5,"_158":302,"_160":303,"_172":305,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1093","https://api.github.com/repos/pro-collection/interview-question/issues/1093/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1093/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1093/events","https://github.com/pro-collection/interview-question/issues/1093",2842893826,"I_kwDOJGDC6c6pcx4C",1093,"[React] Recoil 里面 selector 该如何使用【热度: 239】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[295],{"_66":245,"_68":246,"_54":247,"_113":248,"_115":249,"_117":26,"_118":250},[],{"_54":215,"_64":216,"_58":217,"_66":218,"_68":219,"_70":220,"_72":221,"_118":222,"_136":298,"_138":224,"_140":141,"_120":121,"_142":225,"_144":226,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-02-10T16:01:40Z","2025-02-10T16:01:41Z",{"_154":141,"_155":141,"_156":141},"**关键词**：Recoil selector\n\n在 Recoil 中，`selector` 用于创建派生状态，它可以根据一个或多个原子（`atom`）状态计算出新的状态。`selector` 的值会自动进行记忆化，只有当依赖的状态发生变化时才会重新计算。下面详细介绍 `selector` 的使用方法。\n\n### 1. 基本使用\n\n创建一个简单的 `atom` 和 `selector`：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilValue } from \"recoil\";\n\n// 定义一个原子状态\nconst textState = atom({\n key: \"textState\",\n default: \"Hello, Recoil!\",\n});\n\n// 定义一个 selector，它依赖于 textState\nconst textLengthState = selector({\n key: \"textLengthState\",\n get: ({ get }) => {\n const text = get(textState);\n return text.length;\n },\n});\n\nconst App = () => {\n // 使用 useRecoilValue 钩子获取 selector 的值\n const textLength = useRecoilValue(textLengthState);\n\n return (\n

Text length: {textLength}

\n );\n};\n\nexport default App;\n```\n\n在上述代码中：\n\n- 首先定义了一个 `atom` `textState`，它代表一个文本状态。\n- 然后定义了一个 `selector` `textLengthState`，在 `get` 函数中，通过 `get` 参数获取 `textState` 的值，并计算其长度。\n- 最后在组件中使用 `useRecoilValue` 钩子获取 `textLengthState` 的值并渲染。\n\n### 2. 多个依赖的 selector\n\n`selector` 可以依赖多个 `atom` 或其他 `selector`：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilValue } from \"recoil\";\n\n// 定义两个原子状态\nconst num1State = atom({\n key: \"num1State\",\n default: 10,\n});\n\nconst num2State = atom({\n key: \"num2State\",\n default: 20,\n});\n\n// 定义一个 selector，依赖于 num1State 和 num2State\nconst sumState = selector({\n key: \"sumState\",\n get: ({ get }) => {\n const num1 = get(num1State);\n const num2 = get(num2State);\n return num1 + num2;\n },\n});\n\nconst App = () => {\n const sum = useRecoilValue(sumState);\n\n return (\n

Sum: {sum}

\n );\n};\n\nexport default App;\n```\n\n在这个例子中，`sumState` 这个 `selector` 依赖于 `num1State` 和 `num2State` 两个 `atom`，它会计算这两个状态的和。\n\n### 3. 可写的 selector\n\n除了只读的 `selector`，还可以创建可写的 `selector`，通过 `set` 函数来修改依赖的状态：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilState } from \"recoil\";\n\n// 定义一个原子状态\nconst counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\n// 定义一个可写的 selector\nconst doubleCounterState = selector({\n key: \"doubleCounterState\",\n get: ({ get }) => {\n const counter = get(counterState);\n return counter * 2;\n },\n set: ({ set }, newValue) => {\n set(counterState, newValue / 2);\n },\n});\n\nconst App = () => {\n const [doubleCounter, setDoubleCounter] = useRecoilState(doubleCounterState);\n\n return (\n

Double Counter: {doubleCounter}

\n \n

\n );\n};\n\nexport default App;\n```\n\n在这个例子中，`doubleCounterState` 是一个可写的 `selector`：\n\n- `get` 函数根据 `counterState` 计算出双倍的值。\n- `set` 函数接收一个新值，并将其除以 2 后更新 `counterState`。\n\n### 4. 使用多个 `selector` 组合状态\n\n可以将多个 `selector` 组合起来创建更复杂的派生状态：\n\n```jsx\nimport React from \"react\";\nimport { atom, selector, useRecoilValue } from \"recoil\";\n\n// 定义原子状态\nconst priceState = atom({\n key: \"priceState\",\n default: 100,\n});\n\nconst discountRateState = atom({\n key: \"discountRateState\",\n default: 0.1,\n});\n\n// 定义第一个 selector，计算折扣金额\nconst discountAmountState = selector({\n key: \"discountAmountState\",\n get: ({ get }) => {\n const price = get(priceState);\n const discountRate = get(discountRateState);\n return price * discountRate;\n },\n});\n\n// 定义第二个 selector，计算最终价格\nconst finalPriceState = selector({\n key: \"finalPriceState\",\n get: ({ get }) => {\n const price = get(priceState);\n const discountAmount = get(discountAmountState);\n return price - discountAmount;\n },\n});\n\nconst App = () => {\n const finalPrice = useRecoilValue(finalPriceState);\n\n return (\n

Final Price: {finalPrice}

\n );\n};\n\nexport default App;\n```\n\n在这个例子中，`discountAmountState` 计算折扣金额，`finalPriceState` 依赖于 `priceState` 和 `discountAmountState` 计算最终价格。\n",{"_54":304,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1093/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1093/timeline",{"_54":307,"_56":57,"_58":308,"_60":309,"_62":310,"_64":311,"_66":312,"_68":313,"_70":314,"_72":315,"_74":316,"_107":317,"_120":121,"_122":26,"_123":-5,"_124":319,"_126":320,"_148":141,"_142":322,"_144":322,"_147":-5,"_150":151,"_152":323,"_157":-5,"_158":324,"_160":325,"_172":327,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1092","https://api.github.com/repos/pro-collection/interview-question/issues/1092/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1092/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1092/events","https://github.com/pro-collection/interview-question/issues/1092",2842843657,"I_kwDOJGDC6c6pcloJ",1092,"[React] 状态管理库 Recoil 与 Redux 有何区别【热度: 210】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[318],{"_66":245,"_68":246,"_54":247,"_113":248,"_115":249,"_117":26,"_118":250},[],{"_54":215,"_64":216,"_58":217,"_66":218,"_68":219,"_70":220,"_72":221,"_118":222,"_136":321,"_138":224,"_140":141,"_120":121,"_142":225,"_144":226,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-02-10T15:44:47Z",{"_154":141,"_155":141,"_156":141},"**关键词**：Recoil 与 Redux 区别\n\nRecoil 和 Redux 都是用于管理 React 应用程序状态的库，但它们在设计理念、API、使用场景等方面存在一些明显的区别，下面为你详细介绍：\n\n### 1. 设计理念\n\n- **Redux**\n - 采用单向数据流和单一数据源的设计理念。整个应用的状态被存储在一个单一的 store 中，并且这个状态是只读的。唯一改变状态的方式是触发 action，reducer 会根据 action 来纯函数式地计算新的状态。这种设计使得应用的状态变化可预测，便于调试和维护。\n- **Recoil**\n - 更强调原子性和灵活性。它将状态拆分成多个原子（atoms），每个原子代表一个独立的状态单元。组件可以独立地订阅和修改这些原子状态，并且可以通过选择器（selectors）来派生和组合状态。这种设计使得状态管理更加细粒度，易于扩展和复用。\n\n### 2. API 风格\n\n- **Redux**\n - API 相对复杂，需要定义 action、reducer、store 等多个概念。通常的使用流程是：定义 action 类型和 action 创建函数，编写 reducer 函数来处理不同的 action，然后使用`createStore`函数创建 store。组件需要通过`connect`高阶组件或者`useSelector`、`useDispatch`等钩子来连接到 store 并获取状态和分发 action。\n\n```jsx\n// 定义 action 类型\nconst INCREMENT = \"INCREMENT\";\n\n// 定义 action 创建函数\nconst increment = () => ({ type: INCREMENT });\n\n// 定义 reducer\nconst counterReducer = (state = 0, action) => {\n switch (action.type) {\n case INCREMENT:\n return state + 1;\n default:\n return state;\n }\n};\n\n// 创建 store\nimport { createStore } from \"redux\";\nconst store = createStore(counterReducer);\n\n// 在组件中使用\nimport { useSelector, useDispatch } from \"react-redux\";\nconst Counter = () => {\n const count = useSelector((state) => state);\n const dispatch = useDispatch();\n return (\n

Count: {count}

\n \n

\n );\n};\n```\n\n- **Recoil**\n - API 更加简洁和直观。主要使用`atom`来定义状态原子，使用`selector`来定义派生状态。组件可以直接使用`useRecoilState`、`useRecoilValue`等钩子来访问和修改状态。\n\n```jsx\nimport { atom, useRecoilState } from \"recoil\";\n\n// 定义原子状态\nconst counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\n// 在组件中使用\nconst Counter = () => {\n const [count, setCount] = useRecoilState(counterState);\n return (\n

Count: {count}

\n \n

\n );\n};\n```\n\n### 3. 状态管理粒度\n\n- **Redux**\n - 倾向于将整个应用的状态集中管理在一个 store 中，状态的更新是通过全局的 action 和 reducer 来处理的。这在大型应用中可能会导致 reducer 变得复杂，难以维护。\n- **Recoil**\n - 支持细粒度的状态管理，每个原子状态都是独立的，可以被不同的组件独立订阅和修改。这种方式使得状态的管理更加灵活，易于扩展和复用。\n\n### 4. 性能优化\n\n- **Redux**\n - 性能优化通常需要手动进行，例如使用`reselect`库来创建记忆化的选择器，避免不必要的重新计算。\n- **Recoil**\n - 内置了一些性能优化机制，例如自动记忆化选择器，只有当依赖的状态发生变化时才会重新计算选择器的值。\n\n### 5. 学习成本\n\n- **Redux**\n - 由于其概念较多，如 action、reducer、store 等，学习成本相对较高，尤其是对于初学者来说。\n- **Recoil**\n - 设计简单直观，API 易于理解和使用，学习成本较低。\n\n### 6. 使用场景\n\n- **Redux**\n - 适用于大型、复杂的应用，尤其是需要严格控制状态变化和进行时间旅行调试的场景。例如，企业级应用、电商应用等。\n- **Recoil**\n - 适用于中小型应用，或者需要快速迭代和灵活状态管理的场景。例如，原型开发、小型工具应用等。\n",{"_54":326,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1092/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1092/timeline",{"_54":329,"_56":57,"_58":330,"_60":331,"_62":332,"_64":333,"_66":334,"_68":335,"_70":336,"_72":337,"_74":338,"_107":339,"_120":121,"_122":26,"_123":-5,"_124":347,"_126":348,"_148":141,"_142":350,"_144":351,"_147":-5,"_150":151,"_152":352,"_157":-5,"_158":353,"_160":354,"_172":356,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1091","https://api.github.com/repos/pro-collection/interview-question/issues/1091/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1091/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1091/events","https://github.com/pro-collection/interview-question/issues/1091",2782019787,"I_kwDOJGDC6c6l0kDL",1091,"node 里面 stream 是什么, 有啥应用场景【热度: 495】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[340],{"_66":341,"_68":342,"_54":343,"_113":344,"_115":345,"_117":26,"_118":346},5232525911,"LA_kwDOJGDC6c8AAAABN-ICVw","https://api.github.com/repos/pro-collection/interview-question/labels/Nodejs","Nodejs","AC3F88","Nodejs 研究",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":349,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-01-11T16:59:23Z","2025-01-11T16:59:24Z",{"_154":141,"_155":141,"_156":141},"**关键词**：node stream\n\n### 一、stream 的概念与应用场景\n\n1. **概念引入与文件读取对比**：文章以一个简单的 HTTP 服务读取文件并返回响应的示例引入。起初，使用`fs.readFileSync`读取小文件并返回响应，这种方式在文件较小时可行。但当文件增大到几百 M 时，全部读取完再返回会导致长时间等待，此时便引出了 stream 的概念。通过`fs.createReadStream`创建文件读取流，并使用`pipe`方法将其连接到响应流，实现了流式返回，解决了大文件读取的效率问题。\n2. **HTTP 传输中的流**：在 HTTP 传输大文件时，有两种常见的确定文件下载结束的方式。一种是在`header`里带上`Content-Length`，浏览器下载到指定长度即结束；另一种是设置`transfer-encoding:chunked`，服务器以不固定长度分块返回内容，当返回一个空块时代表传输结束。这种分块传输的方式，使得服务器可以在不知道文件总长度的情况下，持续向客户端发送数据，提高了传输的灵活性和效率。\n3. **Shell 命令与 Node 脚本中的流**：在 Shell 命令中，`ls | grep pack`展示了`ls`命令的输出流作为`grep`命令的输入流的应用。同时，Node 脚本也能接收 Shell 命令的输出流作为输入，如`ls | grep pack | node src/read.mjs`，其中`process.stdin`作为输入流，通过监听`readable`事件并使用`read`方法读取数据，体现了流在不同命令和程序间的传递和交互。\n\n### 二、四种底层 stream 类型\n\n1. **Readable（可读流）**\n - **实现方式与示例**：可读流需要实现`_read`方法，通过`push`方法返回具体的数据，当`push(null)`时，表示流结束。文章给出了多种创建可读流的方式，包括直接创建实例、通过继承`Readable`类创建，以及结合生成器创建。例如，通过直接创建实例的方式如下：\n\n```javascript\nimport { Readable } from \"node:stream\";\nconst readableStream = new Readable();\nreadableStream._read = function () {\n this.push(\"阿门阿前一棵葡萄树，\");\n this.push(\"阿东阿东绿的刚发芽，\");\n this.push(\"阿东背着那重重的的壳呀，\");\n this.push(\"一步一步地往上爬。\");\n this.push(null);\n};\nreadableStream.on(\"data\", (data) => {\n console.log(data.toString());\n});\nreadableStream.on(\"end\", () => {\n console.log(\"done\");\n});\n```\n\n - **与其他API的关联**：文件读取流`fs.createReadStream`是基于`Readable`封装的，`http`服务的`request`对象也是`Readable`的实例。这意味着在处理HTTP请求时，可以像操作普通可读流一样读取请求数据。\n\n2. **Writable（可写流）**\n - **实现方式与特点**：可写流要实现`_write`方法，用于接收写入的内容。其特点是可以通过控制`next`方法的调用时机，来控制消费数据的频率。例如，以下代码实现了一个简单的可写流，每 1 秒处理一次写入的数据：\n\n```javascript\nimport { Writable } from \"node:stream\";\nclass WritableDong extends Writable {\n constructor(iterator) {\n super();\n this.iterator = iterator;\n }\n _write(data, enc, next) {\n console.log(data.toString());\n setTimeout(() => {\n next();\n }, 1000);\n }\n}\nfunction createWriteStream() {\n return new WritableDong();\n}\nconst writeStream = createWriteStream();\nwriteStream.on(\"finish\", () => console.log(\"done\"));\nwriteStream.write(\"阿门阿前一棵葡萄树，\");\nwriteStream.write(\"阿东阿东绿的刚发芽，\");\nwriteStream.write(\"阿东背着那重重的的壳呀，\");\nwriteStream.write(\"一步一步地往上爬。\");\nwriteStream.end();\n```\n\n - **与其他API的关联**：`fs.createWriteStream`是`Writable`的常见封装应用，`http`服务的`response`对象也是`Writable`实例，这使得在处理HTTP响应时，可以方便地向客户端写入数据。\n\n3. **Duplex（双工流）**\n - **实现方式与功能**：双工流需要同时实现`_read`和`_write`方法，具备可读可写的功能。文章通过一个示例展示了双工流的实现：\n\n```javascript\nimport { Duplex } from \"node:stream\";\nclass DuplexStream extends Duplex {\n _read() {\n this.push(\"阿门阿前一棵葡萄树，\");\n this.push(\"阿东阿东绿的刚发芽，\");\n this.push(\"阿东背着那重重的的壳呀，\");\n this.push(\"一步一步地往上爬。\");\n this.push(null);\n }\n _write(data, enc, next) {\n console.log(data.toString());\n setTimeout(() => {\n next();\n }, 1000);\n }\n}\nconst duplexStream = new DuplexStream();\nduplexStream.on(\"data\", (data) => {\n console.log(data.toString());\n});\nduplexStream.on(\"end\", (data) => {\n console.log(\"read done\");\n});\nduplexStream.write(\"阿门阿前一棵葡萄树，\");\nduplexStream.write(\"阿东阿东绿的刚发芽，\");\nduplexStream.write(\"阿东背着那重重的的壳呀，\");\nduplexStream.write(\"一步一步地往上爬。\");\nduplexStream.end();\nduplexStream.on(\"finish\", (data) => {\n console.log(\"write done\");\n});\n```\n\n - **实际应用**：TCP协议中的`socket`是`Duplex`的典型实现，通过`net`模块创建的TCP服务端和客户端，可以实现双向通信，其中`write`方法用于发送数据，`data`和`end`事件用于接收和处理数据。\n\n4. **Transform（转换流）**\n - **实现方式与功能**：转换流继承自`Duplex`，需要实现`_transform`方法，对写入的内容进行转换后提供给消费者读取。例如，以下代码实现了一个将输入内容反转的转换流：\n\n```javascript\nimport { Transform } from \"node:stream\";\nclass ReverseStream extends Transform {\n _transform(buf, enc, next) {\n const res = buf.toString().split(\"\").reverse().join(\"\");\n this.push(res);\n next();\n }\n}\nvar transformStream = new ReverseStream();\ntransformStream.on(\"data\", (data) => console.log(data.toString()));\ntransformStream.on(\"end\", (data) => console.log(\"read done\"));\ntransformStream.write(\"阿门阿前一棵葡萄树\");\ntransformStream.write(\"阿东阿东绿的刚发芽\");\ntransformStream.write(\"阿东背着那重重的的壳呀\");\ntransformStream.write(\"一步一步地往上爬\");\ntransformStream.end();\ntransformStream.on(\"finish\", (data) => console.log(\"write done\"));\n```\n\n - **实际应用**：`zlib`模块中的`createGzip`是转换流的重要应用，可用于文件的压缩。通过`source.pipe(gzip).pipe(destination)`，可以将文件读取流经过`gzip`转换流后，传输到文件写入流，实现文件的压缩功能，也可以使用`pipeline` API简化操作。\n\n### 三、总结\n\nStream 是 Node.js 中非常重要且常用的 API，在文件读写、网络通信等场景中发挥着关键作用。文章详细介绍了四种底层 stream 类型：`Readable`通过实现`_read`方法和`push`操作提供数据；`Writable`通过实现`_write`方法和`next`操作消费数据；`Duplex`同时具备可读可写功能；`Transform`在`Duplex`基础上对写入内容进行转换。在面试中，不仅要了解这四种类型的定义和实现方式，还需能够举例说明常见 API 所属的 stream 类型，如`fs.createReadStream`是`Readable`的实现，`fs.createWriteStream`是`Writable`的实现等。掌握 stream 的知识，对于理解和开发高效的 Node.js 应用程序至关重要。\n\n### 参考文档\n\nhttps://juejin.cn/post/7449185434615365682\n",{"_54":355,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1091/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1091/timeline",{"_54":358,"_56":57,"_58":359,"_60":360,"_62":361,"_64":362,"_66":363,"_68":364,"_70":365,"_72":366,"_74":367,"_107":368,"_120":121,"_122":26,"_123":-5,"_124":376,"_126":377,"_148":141,"_142":379,"_144":380,"_147":-5,"_150":151,"_152":381,"_157":-5,"_158":382,"_160":383,"_172":385,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1090","https://api.github.com/repos/pro-collection/interview-question/issues/1090/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1090/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1090/events","https://github.com/pro-collection/interview-question/issues/1090",2778251019,"I_kwDOJGDC6c6lmL8L",1090,"vite 开发过程是直接将文件给浏览器【热度: 107】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[369],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","工程化","1d76db","web 项目工程化",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":378,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-01-09T16:20:09Z","2025-01-09T16:20:10Z",{"_154":141,"_155":141,"_156":141},"**关键词**：vite 与 esbuild\n\n那比如我使用的是比如我开发是使用的 less + ts + react 他是怎么处理的\n\n1. **Vite 不是直接将原始文件给浏览器**\n - Vite 是一个基于原生 ES 模块的前端构建工具。在开发过程中，它利用浏览器对原生 ES 模块的支持来提供快速的开发服务器。当你启动 Vite 开发服务器时，它会将你的项目文件作为模块加载。\n - 对于像`less`、`ts`、`react`这样的文件类型，Vite 有相应的处理机制。\n2. **处理 Less 文件**\n - Vite 使用插件来处理 Less 文件。它会通过`vite - less`插件（在 Vite 生态中用于处理 Less）来将 Less 文件编译成 CSS。\n - 当浏览器请求一个 Less 文件对应的模块时，Vite 开发服务器会拦截这个请求。例如，如果你在一个 JavaScript 文件中导入了一个 Less 文件，像`import './styles.less';`。\n - Vite 会使用`vite - less`插件将 Less 文件编译成 CSS，然后通过`style`标签或者`link`标签（根据配置）将生成的 CSS 注入到 HTML 页面中，使得样式能够生效。这个编译过程是基于 Less 的语法规则，将 Less 中的变量、嵌套规则等编译成浏览器能够理解的普通 CSS 样式。\n3. **处理 TypeScript 文件**\n - Vite 本身对 TypeScript 有很好的支持。它利用浏览器原生的 ES 模块加载能力，在开发过程中，对于`.ts`和`.tsx`文件，Vite 会将它们视为 ES 模块。\n - 当浏览器请求一个 TypeScript 文件对应的模块时，Vite 会进行即时编译（Just - in - Time，JIT）。它会根据 TypeScript 的语法规则将 TypeScript 代码编译成 JavaScript 代码。\n - 例如，对于一个简单的 TypeScript 文件`main.ts`：\n ```typescript\n let myVariable: number = 10;\n console.log(myVariable);\n ```\n Vite 会在内存中即时将其编译成等价的 JavaScript 代码：\n ```javascript\n let myVariable = 10;\n console.log(myVariable);\n ```\n 然后将编译后的 JavaScript 代码发送给浏览器，浏览器就能够正常执行这些代码了。而且 Vite 会根据 TypeScript 的模块导入和导出规则正确地处理模块之间的关系。\n4. **处理 React 文件（`.tsx`文件)**\n - 对于 React + TypeScript（`.tsx`文件），Vite 同样利用上述 TypeScript 的即时编译机制。\n - 例如，对于一个简单的 React 组件文件`App.tsx`：\n ```typescript\n import React from \"react\";\n const App: React.FC = () => {\n return

Hello, Vite with React and TS!

;\n };\n export default App;\n ```\n - Vite 会先将`tsx`文件中的 TypeScript 部分编译成 JavaScript，同时会保留 React 的 JSX 语法。因为现代浏览器虽然不能直接理解 JSX 语法，但是 Vite 会通过`@vitejs/plugin - react`插件等手段来处理 JSX。\n - 这个插件会将 JSX 语法在发送给浏览器之前转换为浏览器能够理解的`React.createElement`函数调用形式（或者其他等价的高效形式，比如使用`jsx - runtime`）。例如，上面的`App.tsx`中的 JSX 部分可能会被转换为类似以下的 JavaScript 代码：\n ```javascript\n import React from \"react\";\n const App = () => {\n return React.createElement(\"div\", null, \"Hello, Vite with React and TS!\");\n };\n export default App;\n ```\n - 这样转换后的代码就可以在浏览器中正常运行，并且能够正确地渲染 React 组件。\n",{"_54":384,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1090/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1090/timeline",{"_54":387,"_56":57,"_58":388,"_60":389,"_62":390,"_64":391,"_66":392,"_68":393,"_70":394,"_72":395,"_74":396,"_107":397,"_120":121,"_122":26,"_123":-5,"_124":406,"_126":407,"_148":141,"_142":409,"_144":409,"_147":-5,"_150":151,"_152":410,"_157":-5,"_158":411,"_160":412,"_172":414,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1089","https://api.github.com/repos/pro-collection/interview-question/issues/1089/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1089/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1089/events","https://github.com/pro-collection/interview-question/issues/1089",2778229308,"I_kwDOJGDC6c6lmGo8",1089,"vite 与 esbuild 是关系【热度: 55】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[398,399],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},{"_66":400,"_68":401,"_54":402,"_113":403,"_115":404,"_117":26,"_118":405},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴","ededed","公司标签",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":408,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-01-09T16:09:00Z",{"_154":141,"_155":141,"_156":141},"**关键词**：vite 与 esbuild\n\n1. **Vite 对 Esbuild 的依赖关系（构建阶段）**\n\n - **代码转换和打包工具**：在 Vite 的构建过程（`vite build`）中，Esbuild 扮演了重要的角色。Esbuild 是一个超高速的 JavaScript 打包器，Vite 利用 Esbuild 来进行代码的转换和初步打包。它能够快速地将 ES 模块（ESM）进行处理，如解析`import`和`export`语句，把多个模块合并成一个或多个输出文件。\n - **性能优势体现**：Esbuild 的高性能主要体现在其使用 Go 语言编写，具有高度并行化的编译能力。相比传统的打包工具，它能够以极快的速度完成任务。例如，在处理大型项目中的大量 JavaScript 模块时，Esbuild 可以在很短的时间内完成打包工作，这对于 Vite 在构建阶段提高效率非常有帮助。\n\n2. **功能协作关系（在 Vite 生态中的角色）**\n\n - **与 Vite 插件的协作**：Vite 有丰富的插件生态系统，Esbuild 可以和这些插件协作来完成更复杂的构建任务。例如，在处理 CSS、TS（TypeScript）等文件时，Vite 插件可以在 Esbuild 的基础上进行进一步的处理。当 Esbuild 完成对 JavaScript 模块的初步打包后，Vite 插件可以对打包后的文件进行优化，如压缩、添加代码注释等操作。\n - **在不同模块类型处理中的分工**：对于不同类型的模块，Vite 和 Esbuild 有不同的处理方式。Esbuild 主要专注于 JavaScript 模块的快速打包和转换，而 Vite 则负责整体的构建流程协调，包括对 CSS 文件的处理（如解析`@import`语句）、静态资源的处理（如图片、字体的加载路径优化）以及模块热替换（HMR）等开发阶段的功能。例如，在处理一个包含 JavaScript、CSS 和图片的项目时，Esbuild 会快速打包 JavaScript 模块，Vite 则会确保 CSS 正确加载并且图片资源能够被正确引用。\n\n3. **Vite 开发阶段与 Esbuild 的关联（相对较弱）**\n - **开发模式下的功能侧重不同**：在 Vite 开发阶段，其主要利用浏览器原生 ES 模块的支持来实现快速的模块加载和模块热替换，Esbuild 的打包功能在这个阶段没有像在构建阶段那样被大量使用。Vite 开发服务器会在浏览器请求模块时即时提供相应的 ES 模块文件，而不是依赖 Esbuild 进行预先打包。\n - **潜在的间接关联**：不过，在开发阶段，Vite 的一些配置选项和底层机制可能会和 Esbuild 产生间接关联。例如，在配置`vite.config.js`文件时，一些关于模块解析、路径别名等设置可能会影响到后续构建阶段 Esbuild 的工作方式。同时，开发阶段对模块的处理方式也为构建阶段 Esbuild 的高效打包提供了基础，如准确的模块依赖关系等信息。\n",{"_54":413,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1089/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1089/timeline",{"_54":416,"_56":57,"_58":417,"_60":418,"_62":419,"_64":420,"_66":421,"_68":422,"_70":423,"_72":424,"_74":425,"_107":426,"_120":121,"_122":26,"_123":-5,"_124":429,"_126":430,"_148":141,"_142":432,"_144":432,"_147":-5,"_150":151,"_152":433,"_157":-5,"_158":434,"_160":435,"_172":437,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1088","https://api.github.com/repos/pro-collection/interview-question/issues/1088/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1088/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1088/events","https://github.com/pro-collection/interview-question/issues/1088",2778226432,"I_kwDOJGDC6c6lmF8A",1088,"vite 在开发过程中，是如何处理 TS 文件的【热度: 112】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[427,428],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},{"_66":400,"_68":401,"_54":402,"_113":403,"_115":404,"_117":26,"_118":405},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":431,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-01-09T16:07:37Z",{"_154":141,"_155":141,"_156":141},"**关键词**：vite、开发、TS\n\n1. **即时编译 TS 文件**\n\n - **原理**：在 Vite 开发过程中，它利用浏览器原生 ES 模块（ESM）的支持，对于 TypeScript（TS）文件，Vite 会在浏览器请求时即时将其编译为 JavaScript。这个编译过程是由 Vite 内部的插件机制和 TypeScript 编译器（tsc）相关工具完成的。当浏览器请求一个 TS 文件时，Vite 会在服务器端快速地将其转换为浏览器能够理解的 JavaScript 代码。\n - **示例操作**：假设在一个 Vite 项目中有一个`main.ts`文件作为入口文件，其中包含了 TypeScript 代码，如`const message: string = \"Hello, Vite\";`。当浏览器访问`main.ts`时，Vite 会在服务器端将这个 TS 文件编译为 JavaScript 代码（类似于`var message = \"Hello, Vite\";`），然后将编译后的 JavaScript 发送给浏览器，浏览器就可以正常地解析和执行这个文件。\n\n2. **类型检查与开发体验优化**\n\n - **类型检查独立于编译过程**：Vite 在开发过程中会将 TypeScript 的类型检查和代码编译分开。它主要关注代码的编译，以确保浏览器能够运行代码，而类型检查可以通过单独的进程来完成。这样做的好处是，即使类型检查出现错误，也不会影响代码的即时编译和在浏览器中的运行，开发者可以在看到代码运行效果的同时，在编辑器（如 VS Code）中根据类型检查的提示来修复代码中的类型问题。\n - **利用 IDE 的类型检查功能**：Vite 项目通常会配合支持 TypeScript 的 IDE（集成开发环境）来提供更好的开发体验。IDE 可以实时地对 TypeScript 代码进行类型检查，当开发者编写代码时，IDE 会根据代码中的类型定义和引用情况及时地显示错误和提示信息。例如，在 VS Code 中，当编写一个函数参数类型错误的 TypeScript 代码时，编辑器会立即在代码行旁边显示红色波浪线，并提供错误信息，帮助开发者快速定位和修复类型错误。\n\n3. **模块解析与 TS 模块支持**\n\n - **正确解析 TS 模块导入和导出**：Vite 能够正确地解析 TypeScript 中的模块导入（`import`）和导出（`export`）语句。无论是 ES 模块风格的导入导出，还是 CommonJS 风格（在 TypeScript 中也可以使用）的模块交互方式，Vite 都可以处理。例如，在一个 TS 文件中，如果有`import { functionA } from './utils.ts';`这样的导入语句，Vite 会准确地找到`utils.ts`文件，并将其编译和处理后提供给当前文件使用。\n - **支持 TS 模块的热替换（HMR）**：和 JavaScript 模块类似，Vite 也支持 TypeScript 模块的热替换。当修改了一个 TS 模块后，Vite 会通过模块热替换机制将更新后的模块发送给浏览器，浏览器会用新模块替换旧模块，同时保持应用的状态。例如，在一个 Vite + React + TS 项目中，如果修改了一个 React 组件的 TSX（TypeScript XML）文件，Vite 会检测到这个变化，通过 HMR 更新这个组件，而不会刷新整个页面。\n\n4. **TS 配置文件（`tsconfig.json`）的协同工作**\n - **读取和应用配置选项**：Vite 会读取项目中的`tsconfig.json`文件来确定 TypeScript 的编译选项。这个文件包含了如目标 JavaScript 版本（`target`）、模块解析方式（`module`）、是否包含类型检查（`noEmitOnError`等选项）等重要信息。Vite 会根据这些配置来正确地编译 TypeScript 文件。例如，如果`tsconfig.json`中设置了`target`为`ES6`，Vite 会将 TS 文件编译为符合 ES6 标准的 JavaScript 代码。\n - **配置文件的更新与 Vite 的响应**：当`tsconfig.json`文件被修改时，Vite 会根据新的配置重新调整对 TypeScript 文件的编译方式。例如，如果在`tsconfig.json`中添加了一个新的路径别名（`paths`选项）用于模块引用，Vite 会识别这个变化，并在后续的模块解析过程中正确地使用这个路径别名来查找和处理相关的 TS 模块。\n\n---\n\n**编译细节**\n\n1. **Vite 的 TS 插件系统工作机制**\n\n - **利用`vite-plugin-typescript`插件**：Vite 在开发过程中通过`vite-plugin-typescript`插件来处理 TypeScript 文件的即时编译。这个插件会在 Vite 开发服务器启动时被加载并初始化。它会自动检测项目中的`tsconfig.json`文件，以获取 TypeScript 的编译选项，如目标编译版本、模块解析规则等。\n - **监听文件变化**：插件会建立一个文件监听器，用于实时监测 TypeScript 文件的变化。当有 TS 文件被修改（例如，保存文件后），插件会立即捕获到这个变化。例如，在开发过程中，当开发者在编辑器中保存了一个`main.ts`文件，插件会察觉到这个文件更新事件。\n\n2. **编译过程细节**\n\n - **语法解析与类型检查（部分）**：插件会首先对 TypeScript 文件进行语法解析，这类似于 TypeScript 编译器（`tsc`）的前端工作。它会检查代码的语法是否正确，包括变量声明、函数定义、类型注解等方面。不过，Vite 中的 TS 插件在开发阶段主要关注代码的编译，对于严格的类型检查，它会和其他工具（如编辑器的 TS 插件）协同工作。例如，对于`const num: number = \"abc\"`这样的错误类型赋值，插件会在编译过程中识别语法问题，但可能不会像完整的`tsc`检查那样提供详细的类型错误链。\n - **转换为 JavaScript 代码**：在解析语法之后，插件会根据`tsconfig.json`中的目标版本（如`ESNext`、`ES6`等）和其他编译规则，将 TypeScript 代码转换为 JavaScript 代码。这个转换过程涉及到诸多 TypeScript 特性的处理，如类型擦除（去除类型注解）、箭头函数转换（如果目标版本较低）、装饰器处理（如果使用）等。例如，对于一个 TypeScript 的箭头函数`const add = (a: number, b: number): number => a + b;`，如果目标版本是`ES5`，插件可能会将其转换为`function add(a, b) { return a + b; }`形式的 JavaScript 函数。\n - **处理模块导入和导出**：插件能够正确处理 TypeScript 中的模块导入（`import`）和导出（`export`）。无论是 ES 模块风格还是 CommonJS 风格的模块交互，插件都会确保在编译后的 JavaScript 中保持正确的模块引用。例如，对于`import { func } from './module.ts';`这样的 TS 模块导入，插件会在编译`module.ts`后，将其正确地转换为 JavaScript 模块引用，使得在浏览器环境中能够正确加载和执行。\n\n3. **与浏览器交互和代码发送**\n - **生成符合浏览器加载的代码格式**：经过编译后的 JavaScript 代码会被格式化为符合浏览器 ES 模块加载的形式。Vite 会确保代码中的模块导入路径、变量声明等都符合浏览器的原生 ES 模块规范。例如，编译后的代码可能会有类似于`import * as module from './module.js';`这样的标准 ES 模块导入语句，其中`.js`扩展名是在编译过程中添加的（即使原始文件是`.ts`），以满足浏览器对模块文件扩展名的识别要求。\n - **即时发送给浏览器**：一旦编译完成，Vite 会立即将编译后的 JavaScript 代码发送给浏览器。当浏览器请求一个 TypeScript 文件时，Vite 能够快速地完成编译并提供编译后的代码，使得浏览器可以像加载普通 JavaScript 模块一样加载和执行这些代码。例如，当浏览器通过`import { app } from './main.ts';`请求`main.ts`时，Vite 会编译`main.ts`为 JavaScript 并发送给浏览器，让浏览器能够顺利地执行应用程序的入口代码。\n",{"_54":436,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1088/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1088/timeline",{"_54":439,"_56":57,"_58":440,"_60":441,"_62":442,"_64":443,"_66":444,"_68":445,"_70":446,"_72":447,"_74":448,"_107":449,"_120":121,"_122":26,"_123":-5,"_124":452,"_126":453,"_148":141,"_142":455,"_144":455,"_147":-5,"_150":151,"_152":456,"_157":-5,"_158":457,"_160":458,"_172":460,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1087","https://api.github.com/repos/pro-collection/interview-question/issues/1087/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1087/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1087/events","https://github.com/pro-collection/interview-question/issues/1087",2778212060,"I_kwDOJGDC6c6lmCbc",1087,"vite 开发和构建有何不同？【热度: 292】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[450,451],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},{"_66":400,"_68":401,"_54":402,"_113":403,"_115":404,"_117":26,"_118":405},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":454,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-01-09T16:00:57Z",{"_154":141,"_155":141,"_156":141},"**关键词**：vite、开发、构建\n\n1. **开发阶段**\n\n - **快速的模块加载**\n - **原理**：在开发阶段，Vite 充分利用浏览器对原生 ES 模块（ESM）的支持。当浏览器请求一个模块时，Vite 直接将对应的 ES 模块文件发送给浏览器，而不需要像传统构建工具那样先进行打包。这使得模块加载速度非常快，因为浏览器可以直接解析和执行这些原生模块。\n - **示例**：假设在一个 Vite 项目中有`main.js`和`utils.js`两个模块，`main.js`通过`import { someFunction } from './utils.js';`来引用`utils.js`中的函数。在开发服务器启动后，当浏览器访问`main.js`并遇到这个`import`语句时，Vite 会直接将`utils.js`发送给浏览器，浏览器能够快速地加载和执行这个模块。\n - **高效的模块热替换（HMR）**\n - **原理**：Vite 的 HMR 功能允许在修改代码后，只更新发生变化的模块，而不需要刷新整个页面。它通过建立一个 WebSocket 连接来实时监听文件变化。当一个模块被修改后，Vite 会将更新后的模块发送给浏览器，浏览器会用新模块替换旧模块，同时保持应用的当前状态。\n - **示例**：如果在上述`utils.js`模块中修改了`someFunction`的实现，Vite 会检测到这个变化，通过 WebSocket 将更新后的`utils.js`发送给浏览器。浏览器接收到新模块后，会更新`main.js`中对`someFunction`的引用，并且应用的其他部分状态（如组件的局部状态）可以保持不变，从而实现了快速的热替换，提高了开发效率。\n - **开发服务器的便利性**\n - **原理**：Vite 提供了一个轻量级的开发服务器，它可以快速启动并且自动处理一些常见的开发任务，如解析`import`语句、处理 CSS 的`@import`等。这个开发服务器还支持一些开发时的功能，如自动打开浏览器、代理请求等。\n - **示例**：在启动 Vite 开发服务器后，它可以自动打开默认浏览器并访问项目的首页。如果项目需要从后端 API 获取数据，并且开发环境和生产环境的 API 地址不同，Vite 的开发服务器可以通过配置代理，将前端请求转发到正确的后端 API 地址，方便开发过程中的联调。\n\n2. **构建阶段（主要是`vite build`）**\n - **代码打包与优化**\n - **原理**：在构建阶段，Vite 使用 Rollup 作为打包工具（在`vite build`过程中）。Rollup 会对项目中的所有 ES 模块进行静态分析，将它们打包成一个或多个适合生产环境的文件。这个过程包括 Tree - Shaking（摇树优化），即剔除未使用的代码，以及作用域提升（Scope Hoisting）来优化代码结构，减少变量查找的层级，从而生成更紧凑、高效的代码。\n - **示例**：假设有一个包含多个工具函数的`utils.js`模块，如`export const add = (a, b) => a + b;`，`export const subtract = (a, b) => a - b;`等。在`main.js`中只使用了`add`函数，通过`import { add } from './utils.js';`引用。在构建过程中，Rollup 会通过 Tree - Shaking 检测到`subtract`等未使用的函数，不会将它们打包到最终的输出文件中，减小了文件大小。\n - **资源处理与整合**\n - **原理**：Vite 在构建阶段会对各种资源（如 CSS、静态图像、字体等）进行处理。对于 CSS，它会将`@import`语句解析并将相关的 CSS 文件合并，还可能进行压缩和代码转换。对于静态资源，它会根据配置将它们复制到输出目录，并可能对文件名进行哈希处理，以方便缓存管理。\n - **示例**：如果项目中有一个`styles.css`文件，其中通过`@import`导入了其他 CSS 文件，如`@import 'normalize.css';`。在构建时，Vite 会将`normalize.css`和`styles.css`合并成一个或多个 CSS 文件，并将它们放置在输出目录的合适位置，同时可能会对 CSS 进行压缩，减少文件大小，提高页面加载速度。\n - **输出格式和部署准备**\n - **原理**：构建阶段会根据配置生成适合生产环境部署的文件格式。Vite 可以生成多种格式的输出，如`umd`、`es`、`cjs`等，以满足不同的部署场景。例如，`umd`格式可以用于在浏览器中通过`\n \n \n \n ```\n - 在这里，`your - main - app - bundle.js`是 Webpack 打包后的应用程序主文件。当 Webpack 在代码中遇到`import _ from 'lodash';`语句时，它不会将`lodash`的代码打包进输出文件，而是假设`lodash`已经在运行时环境中存在，并且可以通过全局变量`lodash`访问。所以在打包后的 JavaScript 代码中，实际上是通过全局变量来引用外部依赖的。\n\n3. **在其他运行环境（如 Node.js）中的加载方式（以 CommonJS 模块为例）**\n\n - **配置`externals`类似操作**：\n - 在 Webpack 配置文件中，对于要作为外部依赖处理的模块（假设是`axios`，用于在 Node.js 环境中进行 HTTP 请求），配置`externals`如下：\n ```javascript\n module.exports = {\n //...其他配置\n externals: {\n axios: \"axios\",\n },\n };\n ```\n - **运行时环境中的模块引用**：\n - 在 Node.js 应用程序代码中，需要确保`axios`已经作为一个 CommonJS 模块安装在项目的`node_modules`目录下或者在全局环境中有相应的模块路径。当运行打包后的代码时，Webpack 不会打包`axios`，而是期望在 Node.js 的模块加载机制中找到它。例如，在打包后的 Node.js 代码中可能会有类似这样的引用：\n ```javascript\n const axios = require(\"axios\");\n ```\n - 此时，Node.js 会按照自己的模块加载规则去查找`axios`模块，就像没有经过 Webpack 打包一样。这是因为 Webpack 通过`externals`配置将`axios`模块的加载责任交给了运行时环境的模块加载系统。\n\n4. **AMD（Asynchronous Module Definition）模块加载方式（适用于支持 AMD 的环境）**\n - **配置`externals`和模块定义**：\n - 假设在一个支持 AMD 的浏览器环境或者 JavaScript 运行环境中，有一个名为`backbone`的外部依赖，在 Webpack 配置文件中设置`externals`：\n ```javascript\n module.exports = {\n //...其他配置\n externals: {\n backbone: \"backbone\",\n },\n };\n ```\n - **AMD 模块加载脚本**：\n - 在 HTML 文件或者 AMD 模块加载器的配置文件中，需要使用 AMD 的方式来加载`backbone`模块。例如，在一个简单的 AMD 配置中，可能会有如下代码来加载`backbone`和应用程序主模块：\n ```html\n \n \n \n \n \n \n \n \n \n \n ```\n - 这里使用`require.js`作为 AMD 模块加载器，通过`require.config`配置`backbone`模块的路径，然后在`require`函数中加载应用程序主模块和`backbone`模块。Webpack 在打包过程中，由于`externals`配置，知道`backbone`是外部依赖，会正确地处理代码中的引用，使得在运行时可以通过 AMD 模块加载器来加载`backbone`模块并正确地执行应用程序。\n",{"_54":731,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1075/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1075/timeline",{"_54":734,"_56":57,"_58":735,"_60":736,"_62":737,"_64":738,"_66":739,"_68":740,"_70":741,"_72":742,"_74":743,"_107":744,"_120":121,"_122":26,"_123":-5,"_124":746,"_126":747,"_148":141,"_142":749,"_144":749,"_147":-5,"_150":151,"_152":750,"_157":-5,"_158":751,"_160":752,"_172":754,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1074","https://api.github.com/repos/pro-collection/interview-question/issues/1074/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1074/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1074/events","https://github.com/pro-collection/interview-question/issues/1074",2685228473,"I_kwDOJGDC6c6gDVW5",1074,"[webpack] 在编译产物的时候，要区分 source 代码和外部依赖代码，该如何处理【热度: 125】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[745],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":748,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-11-23T03:31:59Z",{"_154":141,"_155":141,"_156":141},"**关键词**：webpack 产物\n\n1. **使用 Webpack 的`optimize-module-ids`插件（用于区分模块来源）**\n\n - **原理**：Webpack 在打包过程中会为每个模块分配一个唯一的`module.id`。`optimize-module-ids`插件可以帮助控制模块标识符的生成方式，使得能够根据模块是源文件还是外部依赖来区分它们。\n - **配置步骤**：\n\n - 首先，安装`optimize-module-ids`插件（可能需要自行开发类似功能插件或寻找已有合适插件）。\n - 然后，在 Webpack 配置文件中添加插件配置。例如：\n\n ```javascript\n const CustomModuleIdsPlugin = require(\"optimize-module-ids\");\n module.exports = {\n //...其他配置\n plugins: [\n new CustomModuleIdsPlugin((module) => {\n if (module.resource && module.resource.includes(\"node_modules\")) {\n return \"external\";\n } else {\n return \"source\";\n }\n }),\n ],\n };\n ```\n\n 这个插件会依据模块的资源路径（`module.resource`）来判别模块是源自`node_modules`（外部依赖）还是其他源文件路径。若为外部依赖，模块的`id`会被标记为`external`，否则标记为`source`。如此一来，在最终的打包产物或构建信息里，就能通过这个`id`区分不同来源的模块。\n\n2. **通过构建工具的输出信息区分（适用于简单区分）**\n\n - **查看构建日志**：Webpack 在构建过程中会输出大量的日志信息。可在构建日志里查找模块的路径信息以区分源文件和外部依赖。比如，日志中来自`src`目录的模块通常是源文件，而来自`node_modules`目录的模块则是外部依赖。\n - **分析统计信息（`stats`）**：Webpack 提供了`stats`选项，可生成详细的构建统计信息。通过将`stats`配置为`'verbose'`或其他详细级别，能获取每个模块的路径、大小、依赖关系等信息。在这些信息中，可轻易识别出源文件和外部依赖。例如，配置`stats`如下：\n\n ```javascript\n module.exports = {\n //...其他配置\n stats: \"verbose\",\n };\n ```\n\n 之后便可通过分析生成的统计文件或在终端输出的详细统计信息来区分不同来源的模块。\n\n3. **自定义打包结构或命名规则（在输出阶段区分）**\n\n - **分离输出目录**：在 Webpack 的输出配置（`output`）中，可以设置不同的输出路径来分离源文件和外部依赖的打包产物。例如：\n\n ```javascript\n module.exports = {\n //...其他配置\n output: {\n path: path.resolve(__dirname, \"dist\"),\n filename: (chunkData) => {\n if (chunkData.chunk.name.includes(\"external\")) {\n return \"external-bundles/[name].js\";\n } else {\n return \"source-bundles/[name].js\";\n }\n },\n },\n };\n ```\n\n 这里依据模块所属的`chunk`名称（可在构建过程中通过某些方式将模块所属的`chunk`标记为`external`或`source`），把外部依赖和源文件分别打包到不同的目录（`external-bundles`和`source-bundles`）下，这样在最终的打包产物中就能很直观地进行区分。\n\n - **命名规则**：除了分离输出目录，还可通过命名规则来区分。例如，在输出文件名中添加前缀以表示模块来源，如`source-[name].js`和`external-[name].js`，如此在查看打包文件时就能快速识别模块来源。\n",{"_54":753,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1074/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1074/timeline",{"_54":756,"_56":57,"_58":757,"_60":758,"_62":759,"_64":760,"_66":761,"_68":762,"_70":763,"_72":764,"_74":765,"_107":766,"_120":121,"_122":26,"_123":-5,"_124":768,"_126":769,"_148":141,"_142":771,"_144":772,"_147":-5,"_150":151,"_152":773,"_157":-5,"_158":774,"_160":775,"_172":777,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1073","https://api.github.com/repos/pro-collection/interview-question/issues/1073/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1073/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1073/events","https://github.com/pro-collection/interview-question/issues/1073",2685223512,"I_kwDOJGDC6c6gDUJY",1073,"corejs 是做什么用的，跟 Polyfill 是什么关系【热度: 100】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[767],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},[],{"_54":215,"_64":216,"_58":217,"_66":218,"_68":219,"_70":220,"_72":221,"_118":222,"_136":770,"_138":224,"_140":141,"_120":121,"_142":225,"_144":226,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-11-23T03:25:28Z","2024-11-23T03:25:29Z",{"_154":141,"_155":141,"_156":141},"**关键词**：corejs 和 Polyfill\n\n1. **CoreJs 的作用**\n\n - **提供标准的 JavaScript 功能支持**：CoreJs 是一个 JavaScript 标准库，它提供了许多在现代 JavaScript 环境中被认为是标准的功能。这些功能包括但不限于对 ES6 + 语法的支持，如`Promise`、`Symbol`、`Map`、`Set`等。例如，在一些较旧的浏览器中可能没有原生的`Promise`支持，CoreJs 可以提供一个兼容的`Promise`实现，使得代码能够在这些浏览器中正确运行。\n - **跨浏览器兼容性支持**：它能够填补不同浏览器之间的 JavaScript 功能差距。由于不同浏览器对 JavaScript 标准的实现进度不同，CoreJs 可以确保在各种浏览器环境下都能提供一致的功能。比如，某些浏览器可能没有完全实现`Array.prototype.includes`方法，CoreJs 可以添加这个方法的实现，使得应用程序在这些浏览器中也能使用该功能。\n - **模块化的功能提供**：CoreJs 是模块化的，这意味着可以根据具体的需求选择引入特定的模块。例如，如果只需要在项目中添加`Promise`和`Map`的支持，而不需要其他功能，可以只引入 CoreJs 相关的模块，避免不必要的代码体积增加。\n\n2. **CoreJs 与 Polyfill 的关系**\n - **CoreJs 是 Polyfill 的一种实现方式**：Polyfill 是一个术语，用于描述一段代码，它提供了浏览器中缺失的功能。CoreJs 可以看作是一种全面的 Polyfill 库。当浏览器不支持某个 JavaScript 特性时，CoreJs 可以通过添加相应的代码来模拟该特性，就像填充了浏览器功能的空缺一样。例如，对于`Object.assign`方法，如果浏览器不支持，CoreJs 可以提供一个自定义的函数来实现相同的功能，这个自定义函数就是一种 Polyfill。\n - **Polyfill 可以有多种来源，CoreJs 是常用的一种**：除了 CoreJs 之外，开发人员也可以自己编写 Polyfill 或者使用其他库来提供类似的功能。但是 CoreJs 是经过广泛测试和优化的，它涵盖了大量的 JavaScript 特性，并且能够很好地与 Babel 等工具配合使用。例如，在 Babel 的`@babel/preset - env`配置中，使用`useBuiltIns: 'usage'`选项时，Babel 会根据目标浏览器的情况，自动引入 CoreJs 中的相关 Polyfill，以确保代码在目标浏览器中能够正确运行。这样就能够高效地为项目添加必要的 Polyfill，而不是无差别地引入所有可能的 Polyfill，从而减小代码体积。\n",{"_54":776,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1073/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1073/timeline",{"_54":779,"_56":57,"_58":780,"_60":781,"_62":782,"_64":783,"_66":784,"_68":785,"_70":786,"_72":787,"_74":788,"_107":789,"_120":121,"_122":26,"_123":-5,"_124":791,"_126":792,"_148":141,"_142":794,"_144":795,"_147":-5,"_150":151,"_152":796,"_157":-5,"_158":797,"_160":798,"_172":800,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1072","https://api.github.com/repos/pro-collection/interview-question/issues/1072/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1072/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1072/events","https://github.com/pro-collection/interview-question/issues/1072",2685221785,"I_kwDOJGDC6c6gDTuZ",1072,"[Webpack] 我如何实现在高版本浏览器上使用 es6 产物，在低版本上使用 es5【热度: 122】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[790],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":793,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-11-23T03:23:47Z","2024-11-23T03:23:48Z",{"_154":141,"_155":141,"_156":141},"**关键词**：Webpack es6 产物\n\n1. **分别打包 ES5 和 ES6 产物（从一份 ES6 源码）**\n\n - **配置 Webpack 和 Babel 基础环境**\n - 首先，安装必要的依赖。除了 Webpack 本身相关的依赖外，还需要`babel - loader`、`@babel/core`和`@babel/preset - env`。\n ```bash\n npm install webpack webpack - cli babel - loader @babel/core @babel/preset - env --save - dev\n ```\n - 创建 Webpack 配置文件（例如`webpack.config.js`），并在其中配置基本的模块规则，用于处理 JavaScript 文件。先配置一个简单的 ES6 打包规则：\n ```javascript\n const path = require(\"path\");\n module.exports = {\n entry: \"./src/index.js\", // 假设ES6源码入口文件是index.js\n output: {\n filename: \"es6 - bundle.js\",\n path: path.resolve(__dirname, \"dist/es6\"),\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel - loader\",\n options: {\n presets: [\n [\n \"@babel/preset - env\",\n {\n targets: {\n // 设置一个较高的浏览器版本支持ES6原生，这里假设现代浏览器都支持\n chrome: \"80\",\n firefox: \"70\",\n },\n },\n ],\n ],\n },\n },\n },\n ],\n },\n };\n ```\n - **添加 ES5 打包配置**\n - 为了打包 ES5 产物，在 Webpack 配置文件中添加另一个配置对象。可以通过`webpack - merge`工具（需要安装`webpack - merge`）来合并基础配置和 ES5 特定配置，避免重复配置。\n ```javascript\n const path = require(\"path\");\n const webpackMerge = require(\"webpack - merge\");\n const baseConfig = {\n entry: \"./src/index.js\",\n output: {\n filename: \"es6 - bundle.js\",\n path: path.resolve(__dirname, \"dist/es6\"),\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel - loader\",\n options: {\n presets: [\n [\n \"@babel/preset - env\",\n {\n targets: {\n chrome: \"80\",\n firefox: \"70\",\n },\n },\n ],\n ],\n },\n },\n },\n ],\n },\n };\n const es5Config = {\n output: {\n filename: \"es5 - bundle.js\",\n path: path.resolve(__dirname, \"dist/es5\"),\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel - loader\",\n options: {\n presets: [\n [\n \"@babel/preset - env\",\n {\n targets: {\n // 设置较低的浏览器版本，确保转换为ES5语法\n chrome: \"50\",\n firefox: \"40\",\n },\n useBuiltIns: \"usage\",\n corejs: 3,\n },\n ],\n ],\n },\n },\n },\n ],\n },\n };\n module.exports = [baseConfig, webpackMerge(baseConfig, es5Config)];\n ```\n - 上述配置中，`es5Config`部分重新定义了输出文件名和路径，并且在`babel - loader`的选项中，通过`@babel/preset - env`的`targets`选项设置了较低的浏览器支持范围，这样就可以将源码转换为 ES5 语法并打包到`dist/es5`目录下的`es5 - bundle.js`文件。\n\n2. **区分加载 ES5 还是 ES6 产物**\n - **使用浏览器特性检测脚本（HTML + JavaScript）**\n - 在 HTML 文件（假设是`index.html`）中，可以添加一段 JavaScript 代码来检测浏览器是否支持 ES6 特性。例如，检测`Promise`是否存在（`Promise`是 ES6 的一个典型特性）。\n ```html\n \n \n \n \n Document\n \n \n \n \n \n ```\n - 这种方法简单直接，但有一定的局限性。如果浏览器对 ES6 的支持不完全（例如，支持部分 ES6 语法但不支持检测的特性），可能会导致加载错误的产物。\n - **使用服务端渲染（SSR）或构建时检测（更高级）**\n - 如果是在服务端渲染的应用中，可以在服务端根据用户代理（User - Agent）来判断浏览器版本，进而选择加载 ES5 还是 ES6 产物。这需要在服务端代码（例如 Node.js 中的 Express 应用）中进行逻辑处理。\n - 另一种构建时检测的方法是，在构建过程中生成一个包含浏览器支持信息的配置文件。可以使用`browserslist`工具（`@babel/preset - env`内部也使用了这个工具来确定目标浏览器）结合一些自定义脚本，在构建时确定目标浏览器范围，然后生成一个配置文件（例如`browser - config.json`），内容可能是`{\"supportsES6\": true}`或者`{\"supportsES6\": false}`。在 HTML 文件中，通过读取这个配置文件来加载相应的产物。\n ```javascript\n // 假设这是一个自定义脚本，用于生成browser - config.json\n const browserslist = require(\"browserslist\");\n const fs = require(\"fs\");\n const targets = {\n chrome: \"50\",\n firefox: \"40\",\n };\n const browsers = browserslist(Object.keys(targets).map((browser) => `${browser} >= ${targets[browser]}`));\n const supportsES6 = browsers.some(\n (browser) => browser.includes(\"Chrome >= 80\") || browser.includes(\"Firefox >= 70\")\n );\n fs.writeFileSync(\"browser - config.json\", JSON.stringify({ supportsES6 }));\n ```\n - 然后在 HTML 文件中：\n ```html\n \n \n \n \n \n \n \n \n \n \n ```\n",{"_54":799,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1072/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1072/timeline",{"_54":802,"_56":57,"_58":803,"_60":804,"_62":805,"_64":806,"_66":807,"_68":808,"_70":809,"_72":810,"_74":811,"_107":812,"_120":121,"_122":26,"_123":-5,"_124":814,"_126":815,"_148":141,"_142":817,"_144":818,"_147":-5,"_150":151,"_152":819,"_157":-5,"_158":820,"_160":821,"_172":823,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1071","https://api.github.com/repos/pro-collection/interview-question/issues/1071/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1071/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1071/events","https://github.com/pro-collection/interview-question/issues/1071",2685189427,"I_kwDOJGDC6c6gDL0z",1071,"Webpack 与 Vite 在产物结果上有何区别【热度: 420】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[813],{"_66":370,"_68":371,"_54":372,"_113":373,"_115":374,"_117":26,"_118":375},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":816,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-11-23T03:02:02Z","2024-11-23T03:02:03Z",{"_154":141,"_155":141,"_156":141},"**关键词**：Webpack 与 Vite 产物差异\n\n1. **模块格式和加载方式**\n\n - **Webpack**：\n - 在产物中，Webpack 通常会将多个模块打包成一个或多个 bundle 文件。这些 bundle 文件的格式可以是多种形式，如 CommonJS（在 Node.js 环境下常用）或者 IIFE（立即调用函数表达式，用于浏览器环境）。对于浏览器环境，Webpack 会将所有的 JavaScript 模块打包成一个或几个大的文件，并且通过自定义的加载逻辑来加载模块。例如，在一个简单的 Webpack 打包后的 JavaScript 文件中，可能会看到类似`__webpack_require__`这样的函数来实现模块的加载和解析。\n - 这种打包方式会把所有的模块依赖关系都内建在 bundle 文件中，使得浏览器在加载时只需要加载一个或几个文件即可。但如果应用规模较大，bundle 文件可能会变得非常大，导致首次加载时间过长。为了解决这个问题，Webpack 也支持代码分割（Code Splitting），通过动态`import`等方式将代码分割成多个较小的块，在需要的时候再加载。\n - **Vite**：\n - Vite 在产物中更倾向于保留原生 ES 模块（ESM）的格式。在开发阶段，Vite 利用浏览器对 ES 模块的原生支持来加载模块，而在生产阶段，它也会尽量保持这种格式。这意味着浏览器可以利用原生的``。更新后，可以将其改为``，其中`v=2`是版本号。每次更新项目时，递增这个版本号。\n - 在构建或部署工具中，可以通过配置自动更新这个版本号。例如，在使用 Webpack 构建时，可以使用`html - webpack - plugin`插件结合版本控制工具来自动更新版本号。假设你有一个简单的 Webpack 配置文件，如下：\n ```javascript\n const HtmlWebpackPlugin = require(\"html - webpack - plugin\");\n const webpack = require(\"webpack\");\n const path = require(\"path\");\n module.exports = {\n entry: \"./src/index.js\",\n output: {\n filename: \"main.js\",\n path: path.resolve(__dirname, \"dist\"),\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: \"index.html\",\n // 自定义版本号，这里可以通过读取文件系统中的版本文件或者其他方式来获取真实的版本号\n version: \"2\",\n }),\n new webpack.BannerPlugin(\"版权所有，翻版必究\"),\n ],\n };\n ```\n - 这个配置文件中的`HtmlWebpackPlugin`插件可以将版本号插入到 HTML 文件中引用的静态资源 URL 中。\n2. **利用浏览器缓存清除技术（Service Workers）**\n - **原理**：Service Workers 是一种在浏览器后台运行的脚本，它可以拦截和处理网络请求。通过 Service Workers，可以控制浏览器缓存的清除和更新。当项目更新后，Service Workers 可以检测到新的资源版本，并通知浏览器清除旧的缓存，从而强制刷新页面资源。\n - **示例步骤**：\n - 首先，在网页中注册 Service Workers：\n ```javascript\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker\n .register(\"service - worker.js\")\n .then(function (registration) {\n console.log(\"Service Worker注册成功\");\n })\n .catch(function (error) {\n console.log(\"Service Worker注册失败: \", error);\n });\n }\n ```\n - 然后，在`service - worker.js`文件中编写缓存管理逻辑。例如，以下是一个简单的缓存更新逻辑：\n ```javascript\n self.addEventListener(\"fetch\", function (event) {\n event.respondWith(\n caches.match(event.request).then(function (response) {\n if (response) {\n return response;\n }\n return fetch(event.request);\n })\n );\n });\n self.addEventListener(\"activate\", function (event) {\n var cacheWhitelist = [\"v2 - cache\"];\n event.waitUntil(\n caches.keys().then(function (cacheNames) {\n return Promise.all(\n cacheNames.map(function (cacheName) {\n if (cacheWhitelist.indexOf(cacheName) === -1) {\n return caches.delete(cacheName);\n }\n })\n );\n })\n );\n });\n ```\n - 这里的`activate`事件处理函数用于在 Service Workers 激活时，清除旧的缓存（不在`cacheWhitelist`中的缓存）。`fetch`事件处理函数用于拦截网络请求，首先尝试从缓存中获取资源，如果缓存中没有，则从网络中获取。\n3. **通过 WebSockets 或长轮询进行实时通知（较复杂）**\n - **原理**：建立一个服务器到客户端的实时通信通道，如 WebSockets 或长轮询。当项目更新时，服务器通过这个通道发送一个通知到客户端，客户端收到通知后，刷新页面或者重新加载相关资源。\n - **示例（以 WebSockets 为例）**：\n - 首先，在服务器端（假设使用 Node.js 和`ws`库）建立 WebSockets 服务：\n ```javascript\n const WebSocket = require(\"ws\");\n const wss = new WebSocket.Server({ port: 8080 });\n wss.on(\"connection\", function connection(ws) {\n console.log(\"客户端已连接\");\n // 当项目更新时，发送更新通知\n ws.send(\"update\");\n });\n ```\n - 然后，在客户端建立 WebSockets 连接并监听更新通知：\n ```javascript\n const socket = new WebSocket(\"ws://localhost:8080\");\n socket.addEventListener(\"message\", function (event) {\n if (event.data === \"update\") {\n location.reload();\n }\n });\n ```\n - 这种方法比较复杂，需要在服务器端和客户端都进行额外的配置，但可以实现非常及时的更新通知。\n",{"_54":928,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1067/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1067/timeline",{"_54":931,"_56":57,"_58":932,"_60":933,"_62":934,"_64":935,"_66":936,"_68":937,"_70":938,"_72":939,"_74":940,"_107":941,"_120":121,"_122":26,"_123":-5,"_124":954,"_126":955,"_148":177,"_142":957,"_144":958,"_147":-5,"_150":151,"_152":959,"_157":-5,"_158":960,"_160":961,"_172":963,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/1066","https://api.github.com/repos/pro-collection/interview-question/issues/1066/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1066/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1066/events","https://github.com/pro-collection/interview-question/issues/1066",2683321083,"I_kwDOJGDC6c6f8Dr7",1066,"Object.defineProperty 是否可以监听拦截数组变化【热度: 144】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[942,949],{"_66":943,"_68":944,"_54":945,"_113":946,"_115":947,"_117":26,"_118":948},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_66":950,"_68":951,"_54":952,"_113":953,"_115":404,"_117":26,"_118":405},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":956,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-11-22T14:08:52Z","2025-02-27T10:34:11Z",{"_154":141,"_155":141,"_156":141},"**关键词**：Object.defineProperty 监听数组变化\n\n1. **基本原理与部分可行性**\n - `Object.defineProperty`可以用于监听和拦截数组的某些变化，但不是原生地对所有数组操作都能很好地监听。\n - 数组在 JavaScript 中是特殊的对象，其索引可以看作是对象属性。理论上，我们可以使用`Object.defineProperty`为数组的每个索引（属性）定义属性描述符，以此来尝试监听数组元素的读取和设置操作。\n - 例如，对于一个简单的数组元素设置操作，可以这样定义：\n ```javascript\n let arr = [1, 2, 3];\n Object.defineProperty(arr, \"0\", {\n get: function () {\n console.log(\"读取索引为0的元素\");\n return arr[0];\n },\n set: function (value) {\n console.log(\"设置索引为0的元素\");\n arr[0] = value;\n },\n });\n ```\n - 当通过`arr[0]`读取或设置元素时，相应的`get`和`set`函数会被触发，从而实现对这个特定索引元素的变化监听。\n2. **局限性**\n\n - **无法自动监听所有元素**：这种方式需要为每个要监听的索引单独使用`Object.defineProperty`进行定义。如果数组长度是动态变化的，或者要监听整个数组，这种逐个定义的方式就非常繁琐且不实用。例如，对于一个有很多元素的数组或者长度会不断变化的数组，几乎不可能预先为每个可能的索引都定义属性描述符。\n - **无法直接监听数组方法**：它不能直接监听数组的方法（如`push`、`pop`、`shift`、`unshift`、`splice`等）引起的变化。这些方法会改变数组的状态，但不会触发通过`Object.defineProperty`为数组元素定义的`get`和`set`操作。比如，当使用`push`方法添加元素到数组时，不会自动触发之前为数组元素定义的`set`操作来监听这个新元素的添加。\n\n3. **解决方案 - 重写数组方法实现全面监听**\n\n以下是使用`Object.defineProperty`来实现监听数组部分常见操作（如修改元素、添加元素、删除元素等）的基本思路和示例代码：\n\n**3.1. 整体思路**\n\n要使用`Object.defineProperty`监听数组，主要思路是对数组的原型方法进行重定义，在这些重定义的方法内部，通过`Object.defineProperty`来设置属性描述符，使得在执行这些操作时能够触发自定义的监听函数，从而实现对数组变化的监听。\n\n**3.2. 具体步骤及示例代码**\n\n**（1）创建一个继承自原生数组的新类**\n\n首先，创建一个新的类，让它继承自原生数组，以便后续可以在这个新类上添加自定义的监听逻辑。\n\n```javascript\nfunction ObservableArray() {\n // 调用原生数组构造函数，确保可以像正常数组一样使用\n Array.apply(this, arguments);\n}\nObservableArray.prototype = Object.create(Array.prototype);\nObservableArray.prototype.constructor = ObservableArray;\n```\n\n**（2）重定义数组的部分原型方法**\n\n接下来，重定义数组的一些常见操作的原型方法，比如`push`、`pop`、`shift`、`unshift`、`splice`等，在这些重定义的方法内部添加监听逻辑。\n\n以`push`方法为例：\n\n```javascript\nObservableArray.prototype.push = function () {\n // 保存当前数组长度，用于后续判断添加了几个元素\n var previousLength = this.length;\n\n // 调用原生数组的push方法，执行实际的添加操作\n var result = Array.prototype.push.apply(this, arguments);\n\n // 遍历新添加的元素，为每个元素设置属性描述符以实现监听\n for (var i = previousLength; i < this.length; i++) {\n (function (index) {\n Object.defineProperty(this, index, {\n enumerable: true,\n configurable: true,\n get: function () {\n console.log(\"正在读取索引为\" + index + \"的元素\");\n return this[index];\n },\n set: function (value) {\n console.log(\"正在设置索引为\" + index + \"的元素为\" + value);\n this[index] = value;\n },\n });\n }).call(this, i);\n }\n\n console.log(\"执行了push操作，添加了\" + (this.length - previousLength) + \"个元素\");\n\n return result;\n};\n```\n\n在上述`push`方法的重定义中：\n\n- 首先调用原生数组的`push`方法来执行实际的添加元素操作，并保存添加前的数组长度。\n- 然后，通过循环为新添加的每个元素使用`Object.defineProperty`设置属性描述符。在`get`方法中，当读取该元素时会打印相应信息；在`set`方法中，当设置该元素时也会打印相应信息。\n- 最后，打印出执行`push`操作添加的元素个数。\n\n类似地，可以重定义其他如`pop`、`shift`、`unshift`、`splice`等方法，以下是`pop`方法的重定义示例：\n\n```javascript\nObservableArray.prototype.pop = function () {\n var result = Array.prototype.pop.apply(this, arguments);\n\n if (this.length >= 0) {\n Object.defineProperty(this, this.length, {\n enumerable: true,\n configurable: true,\n get: function () {\n console.log(\"正在读取最后一个元素\");\n return this[this.length];\n },\n set: function (value) {\n console.log(\"正在设置最后一个元素为\" + value);\n this[this.length] = value;\n },\n });\n }\n\n console.log(\"执行了pop操作\");\n\n return result;\n};\n```\n\n**3.3. 使用示例**\n\n创建`ObservableArray`的实例并进行操作来测试监听效果：\n\n```javascript\nvar myArray = new ObservableArray(1, 2, 3);\n\nmyArray.push(4, 5);\nvar poppedElement = myArray.pop();\nmyArray[0] = 10;\n```\n\n在上述示例中：\n\n- 首先创建了一个`ObservableArray`实例`myArray`并初始化为`[1, 2, 3]`。\n- 然后执行`myArray.push(4, 5)`，此时会触发重定义的`push`方法，添加元素的同时会为新添加的元素设置监听逻辑，并且会打印出相关操作信息。\n- 接着执行`myArray.pop()`，触发重定义的`pop`方法，执行弹出操作并设置对最后一个元素的监听逻辑，同时打印出相关操作信息。\n- 最后执行`myArray[0] = 10`，由于之前为数组元素设置了监听逻辑（在`push`方法中对新添加元素设置了监听），所以会触发相应的`set`逻辑，打印出相关信息。\n",{"_54":962,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1066/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1066/timeline","pagination",{"_966":177,"_154":967},"value",32,"actionData","errors"]