Hello, Jest!

;\n};\n\nexport default App;\n```\n\n对应的测试文件 `App.test.tsx` 可以这样写：\n\n```typescript\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport App from \"./App\";\n\ntest(\"renders App component\", () => {\n render();\n const element = screen.getByText(\"Hello, Jest!\");\n expect(element).toBeInTheDocument();\n});\n```\n\n在终端运行以下命令来执行测试：\n\n```bash\nnpm test\n```\n\n通过以上步骤，你就可以在使用 Babel 编译的 React TypeScript 项目中配置好 Jest 进行测试了。\n","reactions",{"_54":161,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1109/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/1109/timeline","performed_via_github_app","state_reason","score",1,{"_54":178,"_56":57,"_58":179,"_60":180,"_62":181,"_64":182,"_66":183,"_68":184,"_70":185,"_72":186,"_74":187,"_107":188,"_120":121,"_122":26,"_123":-5,"_124":190,"_126":191,"_148":141,"_142":193,"_144":193,"_147":-5,"_149":150,"_102":-5,"_151":194,"_156":-5,"_157":195,"_159":196,"_171":198,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1108","https://api.github.com/repos/pro-collection/interview-question/issues/1108/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1108/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1108/events","https://github.com/pro-collection/interview-question/issues/1108",2947011579,"I_kwDOJGDC6c6vp9P7",1108,"jest 有哪些重要配置？【热度: 180】",{"_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},[189],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":192,"_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-03-25T15:49:36Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端单测 jest 配置\n\nJest 有许多重要配置项，它们能帮助你根据项目需求定制测试环境和流程。以下是一些关键的 Jest 配置项及其用途：\n\n### 1. `testMatch`\n\n- **作用**：指定 Jest 要测试的文件匹配模式。Jest 会在项目中查找符合这些模式的文件并执行测试。\n- **示例**：\n\n```javascript\nmodule.exports = {\n testMatch: [\"**/__tests__/**/*.js?(x)\", \"**/?(*.)+(spec|test).js?(x)\"],\n};\n```\n\n上述配置表示 Jest 会查找 `__tests__` 目录下的所有 `.js` 或 `.jsx` 文件，以及文件名包含 `spec` 或 `test` 的 `.js` 或 `.jsx` 文件。\n\n### 2. `moduleNameMapper`\n\n- **作用**：用于映射模块名，可将特定的模块名映射到另一个模块或文件。常见用途是处理样式文件、图片等资源文件的导入，避免在测试时实际加载这些资源。\n- **示例**：\n\n```javascript\nmodule.exports = {\n moduleNameMapper: {\n \"\\\\.(css|less|scss|sass)$\": \"identity-obj-proxy\",\n \"\\\\.(jpg|jpeg|png|gif|svg)$\": \"/__mocks__/fileMock.js\",\n },\n};\n```\n\n这里将 CSS 等样式文件映射到 `identity-obj-proxy`，将图片文件映射到自定义的模拟文件 `fileMock.js`。\n\n### 3. `setupFilesAfterEnv`\n\n- **作用**：在每个测试文件运行前执行的脚本文件列表。常用于设置测试环境，如引入测试工具、全局配置等。\n- **示例**：\n\n```javascript\nmodule.exports = {\n setupFilesAfterEnv: [\"/src/setupTests.js\"],\n};\n```\n\n在 `setupTests.js` 文件中可以进行一些全局的测试配置，例如引入 `@testing-library/jest-dom` 扩展断言：\n\n```javascript\nimport \"@testing-library/jest-dom\";\n```\n\n### 4. `testEnvironment`\n\n- **作用**：指定测试运行的环境，常见的值有 `node` 和 `jsdom`。`node` 适用于 Node.js 环境的测试，`jsdom` 模拟了浏览器环境，适用于前端 JavaScript 代码的测试。\n- **示例**：\n\n```javascript\nmodule.exports = {\n testEnvironment: \"jsdom\",\n};\n```\n\n### 5. `coverageDirectory`\n\n- **作用**：指定代码覆盖率报告的输出目录。\n- **示例**：\n\n```javascript\nmodule.exports = {\n coverageDirectory: \"/coverage\",\n};\n```\n\n### 6. `coverageThreshold`\n\n- **作用**：设置代码覆盖率的阈值。可以为全局或特定文件设置分支、函数、行和语句的覆盖率阈值，如果测试结果未达到这些阈值，Jest 会报错。\n- **示例**：\n\n```javascript\nmodule.exports = {\n coverageThreshold: {\n global: {\n branches: 80,\n functions: 80,\n lines: 80,\n statements: 80,\n },\n },\n};\n```\n\n### 7. `transform`\n\n- **作用**：指定如何转换不同类型的文件。通常用于处理 Babel 转换，将 ES6+ 代码转换为兼容的 JavaScript 代码。\n- **示例**：\n\n```javascript\nmodule.exports = {\n transform: {\n \"^.+\\\\.(js|jsx)$\": \"babel-jest\",\n },\n};\n```\n\n上述配置表示使用 `babel-jest` 来转换 `.js` 和 `.jsx` 文件。\n\n### 8. `verbose`\n\n- **作用**：一个布尔值，控制是否在测试结果中显示每个测试用例的详细信息。设置为 `true` 会显示更详细的测试结果。\n- **示例**：\n\n```javascript\nmodule.exports = {\n verbose: true,\n};\n```\n\n### 9. `watchPlugins`\n\n- **作用**：指定在 watch 模式下使用的插件。例如，`jest-watch-typeahead` 插件可以让你在 watch 模式下通过输入文件名或测试用例名来快速过滤测试。\n- **示例**：\n\n```javascript\nmodule.exports = {\n watchPlugins: [\"jest-watch-typeahead/filename\", \"jest-watch-typeahead/testname\"],\n};\n```\n\n这些配置项能帮助你更好地定制 Jest 的行为，满足不同项目的测试需求。你可以根据项目的具体情况进行选择和配置。\n",{"_54":197,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1108/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1108/timeline",{"_54":200,"_56":57,"_58":201,"_60":202,"_62":203,"_64":204,"_66":205,"_68":206,"_70":207,"_72":208,"_74":209,"_107":210,"_120":121,"_122":26,"_123":-5,"_124":212,"_126":213,"_148":141,"_142":215,"_144":215,"_147":-5,"_149":150,"_102":-5,"_151":216,"_156":-5,"_157":217,"_159":218,"_171":220,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1107","https://api.github.com/repos/pro-collection/interview-question/issues/1107/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1107/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1107/events","https://github.com/pro-collection/interview-question/issues/1107",2947005605,"I_kwDOJGDC6c6vp7yl",1107,"如何排除样式文件、图片等资源文件进行单测【热度: 173】",{"_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},[211],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":214,"_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-03-25T15:47:18Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端单测，如何排除样式文件、图片\n\n在进行前端单元测试时，样式文件（如 CSS、SCSS 等）和图片等资源文件通常不会影响代码的逻辑功能，为了让测试更加专注于代码逻辑，避免不必要的依赖和错误，需要排除这些资源文件。下面分别介绍使用不同测试框架（如 Jest）时的处理方法。\n\n### 使用 Jest 排除资源文件\n\n#### 1. 样式文件处理\n\n对于样式文件，可使用 `identity-obj-proxy` 包来模拟样式导入。`identity-obj-proxy` 会将所有的 CSS 类名转换为相同的字符串，从而避免实际加载 CSS 文件。\n\n**安装依赖**\n\n```bash\nnpm install --save-dev identity-obj-proxy\n```\n\n**配置 Jest**\n在 `jest.config.js` 或 `package.json` 中的 `jest` 配置里添加如下内容：\n\n```javascript\nmodule.exports = {\n // ...其他配置\n moduleNameMapper: {\n \"\\\\.(css|less|scss|sass)$\": \"identity-obj-proxy\",\n },\n};\n```\n\n或者在 `package.json` 中：\n\n```json\n{\n \"jest\": {\n \"moduleNameMapper\": {\n \"\\\\.(css|less|scss|sass)$\": \"identity-obj-proxy\"\n }\n }\n}\n```\n\n这样，当在测试代码中导入 CSS 文件时，Jest 会使用 `identity-obj-proxy` 来模拟，而不会真正加载 CSS 文件。\n\n**示例代码**\n假设有如下组件：\n\n```jsx\n// MyComponent.jsx\nimport React from \"react\";\nimport \"./styles.css\";\n\nconst MyComponent = () => {\n return

Hello, World!

;\n};\n\nexport default MyComponent;\n```\n\n测试代码可以正常编写，不用担心 `styles.css` 文件的加载问题：\n\n```javascript\n// MyComponent.test.js\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport MyComponent from \"./MyComponent\";\n\ntest(\"renders MyComponent\", () => {\n render();\n const element = screen.getByText(\"Hello, World!\");\n expect(element).toBeInTheDocument();\n});\n```\n\n#### 2. 图片文件处理\n\n对于图片文件，可使用一个简单的模块来模拟图片导入。\n\n**配置 Jest**\n在 `jest.config.js` 或 `package.json` 中的 `jest` 配置里添加如下内容：\n\n```javascript\nmodule.exports = {\n // ...其他配置\n moduleNameMapper: {\n \"\\\\.(jpg|jpeg|png|gif|svg)$\": \"/__mocks__/fileMock.js\",\n },\n};\n```\n\n或者在 `package.json` 中：\n\n```json\n{\n \"jest\": {\n \"moduleNameMapper\": {\n \"\\\\.(jpg|jpeg|png|gif|svg)$\": \"/__mocks__/fileMock.js\"\n }\n }\n}\n```\n\n**创建模拟文件**\n在项目根目录下创建 `__mocks__` 文件夹，并在其中创建 `fileMock.js` 文件，内容如下：\n\n```javascript\nmodule.exports = \"test-file-stub\";\n```\n\n这样，当在测试代码中导入图片文件时，Jest 会使用 `fileMock.js` 中的模拟值来替代，而不会真正加载图片文件。\n\n**示例代码**\n假设有如下组件：\n\n```jsx\n// ImageComponent.jsx\nimport React from \"react\";\nimport myImage from \"./my-image.png\";\n\nconst ImageComponent = () => {\n return $\"Test$ ;\n};\n\nexport default ImageComponent;\n```\n\n测试代码可以正常编写，不用担心 `my-image.png` 文件的加载问题：\n\n```javascript\n// ImageComponent.test.js\nimport React from \"react\";\nimport { render, screen } from \"@testing-library/react\";\nimport ImageComponent from \"./ImageComponent\";\n\ntest(\"renders ImageComponent\", () => {\n render();\n const imageElement = screen.getByAltText(\"Test Image\");\n expect(imageElement).toBeInTheDocument();\n});\n```\n\n通过以上配置，你可以在 Jest 单元测试中排除样式文件和图片等资源文件的干扰，专注于代码逻辑的测试。\n",{"_54":219,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1107/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1107/timeline",{"_54":222,"_56":57,"_58":223,"_60":224,"_62":225,"_64":226,"_66":227,"_68":228,"_70":229,"_72":230,"_74":231,"_107":232,"_120":121,"_122":26,"_123":-5,"_124":234,"_126":235,"_148":141,"_142":248,"_144":247,"_147":-5,"_149":150,"_102":-5,"_151":249,"_156":-5,"_157":250,"_159":251,"_171":253,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1106","https://api.github.com/repos/pro-collection/interview-question/issues/1106/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1106/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1106/events","https://github.com/pro-collection/interview-question/issues/1106",2946997935,"I_kwDOJGDC6c6vp56v",1106,"单测中，如果有一些三方依赖，想排除这个三方依赖进行测试，该如何做？【热度: 387】",{"_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},[233],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":244,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_146":-5,"_147":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题",{"_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},433,"2023-03-06T15:00:27Z","2025-03-25T15:44:32Z","2025-03-25T15:44:31Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端单测，如何排除三方依赖\n\n在单元测试里，当存在三方依赖时，为保证测试的独立性与稳定性，你可以采用模拟（Mock）或桩（Stub）的方式排除这些三方依赖。下面结合不同的测试框架和场景，介绍具体的实现方法。\n\n### 使用 Jest 进行模拟\n\nJest 是一个功能强大的 JavaScript 测试框架，它内置了模拟功能，可方便地模拟三方依赖。\n\n#### 模拟模块\n\n若三方依赖以模块形式引入，可使用 `jest.mock` 方法模拟该模块。\n\n**示例代码**：\n\n```javascript\n// api.js （三方依赖模块）\nexport const fetchData = async () => {\n const response = await fetch(\"https://example.com/api/data\");\n return response.json();\n};\n\n// myModule.js （使用三方依赖的模块）\nimport { fetchData } from \"./api\";\n\nexport const processData = async () => {\n const data = await fetchData();\n return data.length;\n};\n\n// myModule.test.js （测试文件）\nimport { processData } from \"./myModule\";\njest.mock(\"./api\");\nimport { fetchData } from \"./api\";\n\ndescribe(\"processData\", () => {\n test(\"should return the length of the data\", async () => {\n const mockData = [\"item1\", \"item2\", \"item3\"];\n fetchData.mockResolvedValue(mockData);\n\n const result = await processData();\n expect(result).toBe(mockData.length);\n });\n});\n```\n\n在上述示例中，`jest.mock('./api')` 模拟了 `api.js` 模块，`fetchData.mockResolvedValue(mockData)` 指定了 `fetchData` 函数的返回值。\n\n#### 模拟全局对象或函数\n\n若三方依赖是全局对象或函数，可使用 `jest.spyOn` 或直接覆盖该对象或函数。\n\n**示例代码**：\n\n```javascript\n// myFunction.js\nexport const myFunction = () => {\n return Math.random();\n};\n\n// myFunction.test.js\nimport { myFunction } from \"./myFunction\";\n\ndescribe(\"myFunction\", () => {\n test(\"should return a mocked value\", () => {\n const originalMathRandom = Math.random;\n Math.random = () => 0.5;\n\n const result = myFunction();\n expect(result).toBe(0.5);\n\n Math.random = originalMathRandom;\n });\n});\n```\n\n此例中，通过覆盖 `Math.random` 函数来模拟其返回值，测试结束后恢复原始函数。\n\n### 使用 Sinon 进行模拟\n\nSinon 是一个流行的 JavaScript 测试工具，可创建间谍（spy）、存根（stub）和模拟（mock）对象。\n\n#### 安装 Sinon\n\n```bash\nnpm install --save-dev sinon\n```\n\n#### 使用 Sinon 存根函数\n\n```javascript\n// api.js\nexport const fetchData = async () => {\n const response = await fetch(\"https://example.com/api/data\");\n return response.json();\n};\n\n// myModule.js\nimport { fetchData } from \"./api\";\n\nexport const processData = async () => {\n const data = await fetchData();\n return data.length;\n};\n\n// myModule.test.js\nimport sinon from \"sinon\";\nimport { processData } from \"./myModule\";\nimport { fetchData } from \"./api\";\n\ndescribe(\"processData\", () => {\n let stub;\n beforeEach(() => {\n stub = sinon.stub();\n stub.resolves([\"item1\", \"item2\", \"item3\"]);\n sinon.replace(fetchData, \"fetchData\", stub);\n });\n\n afterEach(() => {\n sinon.restore();\n });\n\n test(\"should return the length of the data\", async () => {\n const result = await processData();\n expect(result).toBe(3);\n });\n});\n```\n\n在这个示例中，使用 `sinon.stub` 创建一个存根函数，使用 `sinon.replace` 替换 `fetchData` 函数，测试结束后使用 `sinon.restore` 恢复原始函数。\n\n通过以上方法，你可以在单元测试中排除三方依赖，确保测试的独立性和稳定性。\n",{"_54":252,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1106/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1106/timeline",{"_54":255,"_56":57,"_58":256,"_60":257,"_62":258,"_64":259,"_66":260,"_68":261,"_70":262,"_72":263,"_74":264,"_107":265,"_120":121,"_122":26,"_123":-5,"_124":267,"_126":268,"_148":141,"_142":270,"_144":270,"_147":-5,"_149":150,"_102":-5,"_151":271,"_156":-5,"_157":272,"_159":273,"_171":275,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1105","https://api.github.com/repos/pro-collection/interview-question/issues/1105/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1105/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1105/events","https://github.com/pro-collection/interview-question/issues/1105",2946991594,"I_kwDOJGDC6c6vp4Xq",1105,"如何对 react 状态库进行单测，比如 redux、recoil 等状态库【热度: 170】",{"_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},[266],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":269,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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-03-25T15:42:24Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端单测模拟 react 状态\n\n下面分别介绍如何对 Redux 和 Recoil 这两种常见的 React 状态库进行单元测试。\n\n### 测试 Redux\n\nRedux 是一个可预测的状态容器，主要由 actions、reducers 和 store 构成。单元测试时可分别对这些部分进行测试。\n\n#### 1. 测试 Actions\n\nActions 是用于描述状态变化的普通 JavaScript 对象。可以测试 action 创建函数是否返回正确的 action 对象。\n\n```javascript\n// actions.js\nexport const increment = () => ({\n type: \"INCREMENT\",\n});\n\n// actions.test.js\nimport { increment } from \"./actions\";\n\ndescribe(\"increment action\", () => {\n test(\"should return an action with type INCREMENT\", () => {\n const action = increment();\n expect(action.type).toBe(\"INCREMENT\");\n });\n});\n```\n\n#### 2. 测试 Reducers\n\nReducers 是纯函数，接收当前状态和 action，返回新的状态。可以测试 reducer 在不同 action 下是否返回正确的状态。\n\n```javascript\n// reducer.js\nconst initialState = {\n count: 0,\n};\n\nconst counterReducer = (state = initialState, action) => {\n switch (action.type) {\n case \"INCREMENT\":\n return {\n ...state,\n count: state.count + 1,\n };\n default:\n return state;\n }\n};\n\nexport default counterReducer;\n\n// reducer.test.js\nimport counterReducer from \"./reducer\";\n\ndescribe(\"counterReducer\", () => {\n test(\"should handle INCREMENT action\", () => {\n const initialState = { count: 0 };\n const action = { type: \"INCREMENT\" };\n const newState = counterReducer(initialState, action);\n expect(newState.count).toBe(1);\n });\n\n test(\"should return the same state for unknown action\", () => {\n const initialState = { count: 0 };\n const action = { type: \"UNKNOWN_ACTION\" };\n const newState = counterReducer(initialState, action);\n expect(newState).toEqual(initialState);\n });\n});\n```\n\n#### 3. 测试 Connected Components\n\n如果组件通过 `connect` 函数连接到 Redux store，可以使用 `enzyme` 或 `@testing-library/react` 来测试组件是否正确接收和使用 store 中的状态和 actions。\n\n```jsx\n// CounterComponent.jsx\nimport React from \"react\";\nimport { connect } from \"react-redux\";\nimport { increment } from \"./actions\";\n\nconst CounterComponent = ({ count, increment }) => (\n

Count: {count}

\n \n

\n);\n\nconst mapStateToProps = (state) => ({\n count: state.count,\n});\n\nconst mapDispatchToProps = {\n increment,\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);\n\n// CounterComponent.test.js\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport { Provider } from \"react-redux\";\nimport configureStore from \"redux-mock-store\";\nimport CounterComponent from \"./CounterComponent\";\n\nconst mockStore = configureStore([]);\n\ndescribe(\"CounterComponent\", () => {\n let store;\n\n beforeEach(() => {\n store = mockStore({ count: 0 });\n });\n\n test(\"should display the count from the store\", () => {\n render(\n \n \n \n );\n const countElement = screen.getByText(\"Count: 0\");\n expect(countElement).toBeInTheDocument();\n });\n\n test(\"should dispatch increment action on button click\", () => {\n render(\n \n \n \n );\n const incrementButton = screen.getByText(\"Increment\");\n fireEvent.click(incrementButton);\n const actions = store.getActions();\n expect(actions).toEqual([{ type: \"INCREMENT\" }]);\n });\n});\n```\n\n### 测试 Recoil\n\nRecoil 是一个用于管理 React 应用状态的库，主要包含 atoms（原子状态）和 selectors（派生状态）。\n\n#### 1. 测试 Atoms\n\nAtoms 是 Recoil 中的基本状态单元。可以测试 atoms 的初始值是否正确。\n\n```javascript\n// atoms.js\nimport { atom } from \"recoil\";\n\nexport const counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\n// atoms.test.js\nimport { counterState } from \"./atoms\";\nimport { useRecoilValue } from \"recoil\";\nimport { renderHook } from \"@testing-library/react-hooks\";\n\ndescribe(\"counterState\", () => {\n test(\"should have an initial value of 0\", () => {\n const { result } = renderHook(() => useRecoilValue(counterState));\n expect(result.current).toBe(0);\n });\n});\n```\n\n#### 2. 测试 Selectors\n\nSelectors 是基于 atoms 或其他 selectors 派生出来的状态。可以测试 selectors 是否正确计算派生状态。\n\n```javascript\n// selectors.js\nimport { atom, selector } from \"recoil\";\n\nexport const counterState = atom({\n key: \"counterState\",\n default: 0,\n});\n\nexport const doubleCounterSelector = selector({\n key: \"doubleCounterSelector\",\n get: ({ get }) => {\n const count = get(counterState);\n return count * 2;\n },\n});\n\n// selectors.test.js\nimport { counterState, doubleCounterSelector } from \"./selectors\";\nimport { useRecoilValue, set } from \"recoil\";\nimport { renderHook } from \"@testing-library/react-hooks\";\n\ndescribe(\"doubleCounterSelector\", () => {\n test(\"should return double the counter value\", () => {\n const { result } = renderHook(() => useRecoilValue(doubleCounterSelector));\n expect(result.current).toBe(0);\n\n const { set } = renderHook(() => ({\n set: (value) => useSetRecoilState(counterState)(value),\n })).result.current;\n\n set(5);\n const { result: newResult } = renderHook(() => useRecoilValue(doubleCounterSelector));\n expect(newResult.current).toBe(10);\n });\n});\n```\n\n#### 3. 测试 Recoil 组件\n\n可以测试使用 Recoil 状态的组件是否正确更新和渲染。\n\n```jsx\n// CounterComponent.jsx\nimport React from \"react\";\nimport { useRecoilState } from \"recoil\";\nimport { counterState } from \"./atoms\";\n\nconst CounterComponent = () => {\n const [count, setCount] = useRecoilState(counterState);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n return (\n

Count: {count}

\n \n

\n );\n};\n\nexport default CounterComponent;\n\n// CounterComponent.test.js\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport { RecoilRoot } from \"recoil\";\nimport CounterComponent from \"./CounterComponent\";\n\ndescribe(\"CounterComponent\", () => {\n test(\"should display the count and increment on button click\", () => {\n render(\n \n \n \n );\n const countElement = screen.getByText(\"Count: 0\");\n expect(countElement).toBeInTheDocument();\n\n const incrementButton = screen.getByText(\"Increment\");\n fireEvent.click(incrementButton);\n\n const newCountElement = screen.getByText(\"Count: 1\");\n expect(newCountElement).toBeInTheDocument();\n });\n});\n```\n\n通过以上方法，可以对 Redux 和 Recoil 状态库进行有效的单元测试，确保状态管理逻辑的正确性。\n",{"_54":274,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1105/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1105/timeline",{"_54":277,"_56":57,"_58":278,"_60":279,"_62":280,"_64":281,"_66":282,"_68":283,"_70":284,"_72":285,"_74":286,"_107":287,"_120":121,"_122":26,"_123":-5,"_124":289,"_126":290,"_148":141,"_142":292,"_144":292,"_147":-5,"_149":150,"_102":-5,"_151":293,"_156":-5,"_157":294,"_159":295,"_171":297,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1104","https://api.github.com/repos/pro-collection/interview-question/issues/1104/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1104/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1104/events","https://github.com/pro-collection/interview-question/issues/1104",2946983621,"I_kwDOJGDC6c6vp2bF",1104,"jest 单测，如何测试 react 组件交互【热度: 200】",{"_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},[288],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":291,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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-03-25T15:40:15Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端单测模拟 react 交互\n\n在 Jest 中测试 React 组件交互，通常会结合 React Testing Library 一起使用，它专注于从用户交互的角度来测试组件，鼓励编写接近用户实际使用场景的测试用例。以下将详细介绍测试 React 组件交互的步骤和示例。\n\n### 1. 安装依赖\n\n首先要确保项目中安装了 Jest、React Testing Library 以及相关的 React 依赖。若还未安装，可使用以下命令进行安装：\n\n```bash\nnpm install --save-dev jest @testing-library/react @testing-library/jest-dom\n```\n\n### 2. 编写测试用例\n\n下面通过几个不同交互场景的示例，展示如何使用 Jest 和 React Testing Library 测试 React 组件的交互。\n\n#### 示例 1：测试按钮点击事件\n\n假设存在一个简单的 React 组件，点击按钮会更新文本内容：\n\n```jsx\n// ButtonComponent.jsx\nimport React, { useState } from \"react\";\n\nconst ButtonComponent = () => {\n const [text, setText] = useState(\"未点击\");\n const handleClick = () => {\n setText(\"已点击\");\n };\n return (\n

{text}

\n \n

\n );\n};\n\nexport default ButtonComponent;\n```\n\n对应的测试代码如下：\n\n```javascript\n// ButtonComponent.test.js\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport ButtonComponent from \"./ButtonComponent\";\n\ntest(\"点击按钮后文本更新\", () => {\n render();\n // 查找按钮元素\n const button = screen.getByText(\"点击我\");\n // 查找文本元素\n const textElement = screen.getByText(\"未点击\");\n // 模拟点击事件\n fireEvent.click(button);\n // 断言文本内容是否更新\n expect(screen.getByText(\"已点击\")).toBeInTheDocument();\n});\n```\n\n在这个测试用例中，首先使用 `render` 函数渲染组件，接着使用 `screen.getByText` 方法查找按钮和文本元素，再用 `fireEvent.click` 模拟点击按钮的操作，最后通过 `expect` 断言文本内容是否更新。\n\n#### 示例 2：测试输入框输入事件\n\n假设有一个输入框组件，输入内容后会显示输入的值：\n\n```jsx\n// InputComponent.jsx\nimport React, { useState } from \"react\";\n\nconst InputComponent = () => {\n const [inputValue, setInputValue] = useState(\"\");\n const handleChange = (e) => {\n setInputValue(e.target.value);\n };\n return (\n

\n \n

{inputValue}

\n );\n};\n\nexport default InputComponent;\n```\n\n对应的测试代码如下：\n\n```javascript\n// InputComponent.test.js\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport InputComponent from \"./InputComponent\";\n\ntest(\"输入框输入内容后文本更新\", () => {\n render();\n // 查找输入框元素\n const inputElement = screen.getByRole(\"textbox\");\n // 模拟输入操作\n fireEvent.change(inputElement, { target: { value: \"测试内容\" } });\n // 断言文本内容是否更新\n expect(screen.getByText(\"测试内容\")).toBeInTheDocument();\n});\n```\n\n此测试用例中，先渲染组件，然后使用 `screen.getByRole` 方法查找输入框元素，通过 `fireEvent.change` 模拟输入操作，最后断言显示的文本内容是否正确。\n\n#### 示例 3：测试表单提交事件\n\n假设有一个表单组件，提交表单后会显示提交成功的提示：\n\n```jsx\n// FormComponent.jsx\nimport React, { useState } from \"react\";\n\nconst FormComponent = () => {\n const [submitted, setSubmitted] = useState(false);\n const handleSubmit = (e) => {\n e.preventDefault();\n setSubmitted(true);\n };\n return (\n \n );\n};\n\nexport default FormComponent;\n```\n\n对应的测试代码如下：\n\n```javascript\n// FormComponent.test.js\nimport React from \"react\";\nimport { render, fireEvent, screen } from \"@testing-library/react\";\nimport FormComponent from \"./FormComponent\";\n\ntest(\"表单提交后显示提交成功提示\", () => {\n render();\n // 查找提交按钮元素\n const submitButton = screen.getByText(\"提交\");\n // 模拟表单提交事件\n fireEvent.click(submitButton);\n // 断言是否显示提交成功提示\n expect(screen.getByText(\"提交成功\")).toBeInTheDocument();\n});\n```\n\n在这个测试用例里，同样先渲染组件，使用 `screen.getByText` 方法查找提交按钮元素，通过 `fireEvent.click` 模拟表单提交操作，最后断言是否显示提交成功的提示信息。\n\n通过以上示例，你可以掌握在 Jest 中使用 React Testing Library 测试 React 组件交互的基本方法。在实际项目中，可根据组件的具体交互逻辑编写相应的测试用例。\n",{"_54":296,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1104/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1104/timeline",{"_54":299,"_56":57,"_58":300,"_60":301,"_62":302,"_64":303,"_66":304,"_68":305,"_70":306,"_72":307,"_74":308,"_107":309,"_120":121,"_122":26,"_123":-5,"_124":311,"_126":312,"_148":141,"_142":314,"_144":314,"_147":-5,"_149":150,"_102":-5,"_151":315,"_156":-5,"_157":316,"_159":317,"_171":319,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1103","https://api.github.com/repos/pro-collection/interview-question/issues/1103/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1103/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1103/events","https://github.com/pro-collection/interview-question/issues/1103",2946959219,"I_kwDOJGDC6c6vpwdz",1103,"前端单测，如何通过单测模拟请求【热度: 265】",{"_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},[310],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":313,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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-03-25T15:33:05Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端单测模拟请求\n\n在前端单元测试里，模拟请求是很重要的操作，它能让你在不依赖真实后端服务的情况下对前端代码进行测试。以下以 React 项目为例，结合不同的测试框架和模拟工具，为你介绍模拟请求的方法。\n\n### 使用 Jest 和 axios-mock-adapter 模拟 axios 请求\n\n`axios` 是常用的 HTTP 请求库，`axios-mock-adapter` 能方便地模拟 `axios` 请求。\n\n#### 安装依赖\n\n```bash\nnpm install --save-dev axios-mock-adapter\n```\n\n#### 示例代码\n\n假设你有一个使用 `axios` 发送请求的组件：\n\n```jsx\n// UserList.jsx\nimport React, { useEffect, useState } from \"react\";\nimport axios from \"axios\";\n\nconst UserList = () => {\n const [users, setUsers] = useState([]);\n\n useEffect(() => {\n const fetchUsers = async () => {\n try {\n const response = await axios.get(\"https://api.example.com/users\");\n setUsers(response.data);\n } catch (error) {\n console.error(\"Error fetching users:\", error);\n }\n };\n fetchUsers();\n }, []);\n\n return (\n

{user.name}

\n );\n};\n\nexport default UserList;\n```\n\n对应的单元测试代码如下：\n\n```javascript\n// UserList.test.js\nimport React from \"react\";\nimport { render, waitFor } from \"@testing-library/react\";\nimport axios from \"axios\";\nimport MockAdapter from \"axios-mock-adapter\";\nimport UserList from \"./UserList\";\n\ndescribe(\"UserList\", () => {\n let mock;\n\n beforeEach(() => {\n // 创建 axios 模拟适配器\n mock = new MockAdapter(axios);\n });\n\n afterEach(() => {\n // 重置模拟适配器\n mock.restore();\n });\n\n test(\"should render user list after successful fetch\", async () => {\n const mockUsers = [\n { id: 1, name: \"User 1\" },\n { id: 2, name: \"User 2\" },\n ];\n // 模拟 GET 请求\n mock.onGet(\"https://api.example.com/users\").reply(200, mockUsers);\n\n const { getByText } = render();\n\n // 等待请求完成\n await waitFor(() => {\n expect(getByText(\"User 1\")).toBeInTheDocument();\n expect(getByText(\"User 2\")).toBeInTheDocument();\n });\n });\n});\n```\n\n在这个示例中，`axios-mock-adapter` 被用于模拟 `axios` 的 `GET` 请求。`beforeEach` 函数在每个测试用例执行前创建模拟适配器，`afterEach` 函数在测试用例执行后重置适配器。`mock.onGet` 方法用于指定要模拟的请求 URL，并返回模拟的响应数据。\n\n### 使用 Jest 内置的 `jest.fn()` 模拟请求函数\n\n如果你没有使用 `axios` 这类请求库，而是自定义了请求函数，可使用 Jest 的 `jest.fn()` 来模拟。\n\n#### 示例代码\n\n```javascript\n// api.js\nexport const fetchData = async () => {\n const response = await fetch(\"https://api.example.com/data\");\n return response.json();\n};\n```\n\n```javascript\n// api.test.js\nimport { fetchData } from \"./api\";\n\njest.mock(\"./api\", () => ({\n fetchData: jest.fn(),\n}));\n\ndescribe(\"fetchData\", () => {\n test(\"should return mock data\", async () => {\n const mockData = { message: \"Mock data\" };\n fetchData.mockResolvedValue(mockData);\n\n const result = await fetchData();\n expect(result).toEqual(mockData);\n });\n});\n```\n\n这里使用 `jest.mock` 来模拟 `fetchData` 函数，`mockResolvedValue` 方法用于指定模拟函数的返回值。\n\n通过上述方法，你可以在前端单元测试中有效地模拟请求，从而更全面地对前端代码进行测试。\n",{"_54":318,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1103/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1103/timeline",{"_54":321,"_56":57,"_58":322,"_60":323,"_62":324,"_64":325,"_66":326,"_68":327,"_70":328,"_72":329,"_74":330,"_107":331,"_120":121,"_122":26,"_123":-5,"_124":333,"_126":334,"_148":141,"_142":336,"_144":336,"_147":-5,"_149":150,"_102":-5,"_151":337,"_156":-5,"_157":338,"_159":339,"_171":341,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1102","https://api.github.com/repos/pro-collection/interview-question/issues/1102/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1102/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1102/events","https://github.com/pro-collection/interview-question/issues/1102",2946937043,"I_kwDOJGDC6c6vprDT",1102,"如何保障前端项目质量【热度: 717】",{"_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},[332],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":335,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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-03-25T15:27:04Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端项目质量保证\n\n保障前端项目质量可从开发流程、代码规范、测试体系、部署监控等多方面入手，以下是详细介绍：\n\n### 遵循规范的开发流程\n\n- **需求分析与设计**：和产品经理、设计师等充分沟通，理解项目需求和设计方案。输出详细的需求文档和设计稿，为后续开发提供清晰的指引。\n- **代码编写**：按照设计方案进行代码开发，采用模块化、组件化的开发方式，提高代码的可维护性和可复用性。\n- **代码审查**：组织团队成员进行代码审查，检查代码是否符合规范、是否存在潜在的问题。可以使用工具如 ESLint、Stylelint 等进行静态代码分析。\n- **测试**：开展单元测试、集成测试和端到端测试，确保代码的功能正确性。同时，进行性能测试、兼容性测试等，保证项目在不同环境下的稳定性和性能表现。\n- **部署上线**：借助自动化部署工具，如 Jenkins、GitLab CI/CD 等，将代码部署到生产环境。部署前进行预发布环境测试，确保上线的稳定性。\n\n### 制定并遵守代码规范\n\n- **语法规范**：依据项目使用的前端技术栈，制定相应的语法规范。例如，使用 ESLint 规范 JavaScript 代码，使用 Stylelint 规范 CSS 代码。\n- **命名规范**：统一变量名、函数名、类名等的命名规则，提高代码的可读性。例如，采用驼峰命名法或下划线命名法。\n- **代码风格**：统一代码的缩进、空格、注释等风格，使代码具有一致性。可以使用 Prettier 等工具自动格式化代码。\n\n### 构建完善的测试体系\n\n- **单元测试**：针对单个函数、组件或模块编写测试用例，确保其功能的正确性。常用的单元测试框架有 Jest、Mocha 等。\n- **集成测试**：测试多个组件或模块之间的交互是否正常。可以使用 React Testing Library、Vue Test Utils 等工具进行集成测试。\n- **端到端测试**：模拟用户在浏览器中的真实操作，确保整个应用的功能正常。常用的端到端测试框架有 Cypress、Puppeteer 等。\n- **性能测试**：使用工具如 Lighthouse、WebPageTest 对前端应用的性能进行测试，包括页面加载时间、响应时间等指标。根据测试结果对代码和资源进行优化。\n- **兼容性测试**：在不同的浏览器（如 Chrome、Firefox、Safari 等）和设备（如手机、平板、电脑等）上进行测试，确保项目的兼容性。\n\n### 实施监控与反馈机制\n\n- **错误监控**：使用工具如 Sentry 对前端应用的错误进行监控，及时发现和解决线上问题。\n- **性能监控**：持续监控前端应用的性能指标，如页面加载时间、响应时间等，及时发现性能瓶颈并进行优化。\n- **用户反馈**：收集用户的反馈意见，了解用户在使用过程中遇到的问题和需求，及时进行改进。\n",{"_54":340,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1102/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1102/timeline",{"_54":343,"_56":57,"_58":344,"_60":345,"_62":346,"_64":347,"_66":348,"_68":349,"_70":350,"_72":351,"_74":352,"_107":353,"_120":121,"_122":26,"_123":-5,"_124":355,"_126":356,"_148":141,"_142":358,"_144":359,"_147":-5,"_149":150,"_102":-5,"_151":360,"_156":-5,"_157":361,"_159":362,"_171":364,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1101","https://api.github.com/repos/pro-collection/interview-question/issues/1101/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1101/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1101/events","https://github.com/pro-collection/interview-question/issues/1101",2946927626,"I_kwDOJGDC6c6vpowK",1101,"前端 e2e 测试，该如何选型【热度: 335】",{"_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},[354],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":357,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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-03-25T15:24:25Z","2025-03-25T15:24:26Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端测试\n\n在进行前端端到端（E2E）测试选型时，需要综合考虑多方面因素，如测试框架的功能特性、易用性、社区支持、性能等。以下为你介绍几种常见的前端 E2E 测试工具，并给出选型建议。\n\n### 常见前端 E2E 测试工具\n\n#### 1. Cypress\n\n- **优点**\n - **易于上手**：提供了简洁直观的 API，测试代码编写简单，无需复杂的配置即可快速开始测试。\n - **实时反馈**：具有实时重新加载功能，在修改测试代码时能即时看到测试结果，提高开发和调试效率。\n - **自动等待**：Cypress 会自动等待元素加载完成、动画结束等，无需手动添加等待时间，减少测试代码的复杂性。\n - **可视化调试**：提供可视化界面，可直观查看测试执行过程，方便定位问题。\n- **缺点**\n - **仅支持 Chrome 家族浏览器**：在跨浏览器测试方面存在一定局限性。\n - **项目规模限制**：对于大型项目，测试运行速度可能会受到影响。\n- **适用场景**：适合小型到中型的前端项目，尤其是单页面应用（SPA），注重开发效率和调试体验的团队。\n\n#### 2. Puppeteer\n\n- **优点**\n - **强大的自动化能力**：基于 Chrome 或 Chromium 浏览器，可模拟各种复杂的用户操作，如页面滚动、文件上传、截图等。\n - **性能出色**：直接控制浏览器，无需额外的中间层，测试执行速度快。\n - **灵活度高**：可与其他测试框架和工具集成，满足不同的测试需求。\n- **缺点**\n - **学习曲线较陡**：API 相对复杂，对于初学者来说上手难度较大。\n - **缺乏内置断言**：需要手动集成断言库来进行结果验证。\n- **适用场景**：适合需要模拟复杂用户操作、进行性能测试或与其他工具深度集成的项目。\n\n#### 3. Selenium WebDriver\n\n- **优点**\n - **跨浏览器支持**：支持多种主流浏览器，如 Chrome、Firefox、Safari 等，可进行全面的跨浏览器测试。\n - **多语言支持**：支持多种编程语言，如 Java、Python、JavaScript 等，方便不同技术栈的团队使用。\n - **社区成熟**：拥有庞大的社区和丰富的文档资源，遇到问题容易找到解决方案。\n- **缺点**\n - **配置复杂**：需要手动配置浏览器驱动和环境，测试代码编写和维护成本较高。\n - **性能问题**：由于需要通过 WebDriver 协议与浏览器进行交互，测试执行速度相对较慢。\n- **适用场景**：适合大型项目和对跨浏览器兼容性要求较高的项目，尤其是企业级应用。\n\n#### 4. Playwright\n\n- **优点**\n - **跨浏览器和跨平台**：支持 Chrome、Firefox、Safari 等多种浏览器，且能在不同操作系统上运行，提供统一的 API。\n - **自动等待和智能断言**：具备自动等待机制，同时提供智能断言功能，简化测试代码编写。\n - **录制和回放**：支持录制用户操作并生成测试代码，方便快速创建测试用例。\n- **缺点**\n - **社区相对较小**：与 Selenium 相比，社区资源和生态系统还不够完善。\n- **适用场景**：适合需要进行跨浏览器测试，且希望提高测试开发效率的项目。\n\n### 选型建议\n\n- **项目规模和复杂度**\n\n - 小型项目：Cypress 是一个不错的选择，其简单易用的特点可以帮助团队快速搭建测试环境。\n - 中型项目：Puppeteer 或 Playwright 可以满足对自动化能力和跨浏览器支持的需求，同时保持较高的测试效率。\n - 大型项目：Selenium WebDriver 凭借其强大的跨浏览器支持和成熟的社区生态，更适合应对复杂的测试场景。\n\n- **团队技术栈**\n\n - 如果团队主要使用 JavaScript 进行开发，Cypress、Puppeteer 和 Playwright 会更容易集成到现有项目中。\n - 如果团队熟悉 Java 或 Python 等编程语言，Selenium WebDriver 是一个合适的选择。\n\n- **测试需求**\n - 如果需要进行大量的性能测试和复杂的用户操作模拟，Puppeteer 更具优势。\n - 如果对跨浏览器兼容性要求极高，Selenium WebDriver 或 Playwright 是首选。\n - 如果注重开发效率和调试体验，Cypress 会是更好的选择。\n\n综上所述，在选择前端 E2E 测试工具时，需要根据项目的实际情况和团队的技术能力进行综合考虑，以确保选择的工具能够满足项目的测试需求。\n",{"_54":363,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1101/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1101/timeline",{"_54":366,"_56":57,"_58":367,"_60":368,"_62":369,"_64":370,"_66":371,"_68":372,"_70":373,"_72":374,"_74":375,"_107":376,"_120":121,"_122":26,"_123":-5,"_124":378,"_126":379,"_148":141,"_142":381,"_144":381,"_147":-5,"_149":150,"_102":-5,"_151":382,"_156":-5,"_157":383,"_159":384,"_171":386,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1100","https://api.github.com/repos/pro-collection/interview-question/issues/1100/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1100/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1100/events","https://github.com/pro-collection/interview-question/issues/1100",2946919682,"I_kwDOJGDC6c6vpm0C",1100,"前端单元测试， react 项目为例，该如何做单测选型【热度: 405】",{"_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},[377],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":380,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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-03-25T15:22:08Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端测试\n\n在 React 项目中进行单元测试选型时，你需要综合考量测试框架、断言库、模拟工具等多个方面，以下是详细的选型建议：\n\n### 测试框架\n\n#### Jest\n\n- **优点**\n - **功能集成度高**：集测试运行器、断言库、模拟功能于一体，无需额外安装大量依赖，配置简单，能快速上手。\n - **性能出色**：支持并行测试，可显著缩短测试时间。同时，它具备快照测试功能，能方便地对组件的渲染结果进行比对。\n - **社区生态丰富**：有大量的插件和工具可供使用，社区文档完善，遇到问题容易找到解决方案。\n- **适用场景**：适合大多数 React 项目，尤其是初学者和追求高效测试流程的团队。\n- **示例代码**：\n\n```javascript\nimport React from \"react\";\nimport { render } from \"@testing-library/react\";\nimport MyComponent from \"./MyComponent\";\n\ntest(\"renders MyComponent correctly\", () => {\n const { getByText } = render();\n const element = getByText(/Hello, World!/i);\n expect(element).toBeInTheDocument();\n});\n```\n\n#### Mocha\n\n- **优点**\n - **灵活性强**：可以与各种断言库（如 Chai）和模拟库（如 Sinon）自由搭配，满足不同项目的个性化需求。\n - **跨环境支持**：既能在浏览器环境中运行，也能在 Node.js 环境中运行，方便进行不同环境下的测试。\n- **适用场景**：适用于对测试流程有特殊要求，或者需要与其他工具深度集成的 React 项目。\n- **示例代码**：\n\n```javascript\nconst assert = require(\"assert\");\nconst React = require(\"react\");\nconst { render } = require(\"@testing-library/react\");\nconst MyComponent = require(\"./MyComponent\");\n\ndescribe(\"MyComponent\", function () {\n it(\"should render with correct text\", function () {\n const { getByText } = render();\n const element = getByText(/Hello, World!/i);\n assert.ok(element);\n });\n});\n```\n\n### 断言库\n\n#### Jest 内置断言\n\n- **优点**：与 Jest 框架无缝集成，语法简洁易懂，能满足大部分常见的断言需求。\n- **适用场景**：在使用 Jest 作为测试框架时，优先使用其内置断言。\n- **示例代码**：\n\n```javascript\nconst result = 1 + 2;\nexpect(result).toBe(3);\n```\n\n#### Chai\n\n- **优点**：提供了多种断言风格（如 BDD、TDD），可根据团队的编程习惯选择合适的风格。它还支持与不同的测试框架集成。\n- **适用场景**：当需要更丰富的断言方式，或者在使用 Mocha 等框架时，Chai 是一个不错的选择。\n- **示例代码**：\n\n```javascript\nconst chai = require(\"chai\");\nconst expect = chai.expect;\nconst result = 1 + 2;\nexpect(result).to.equal(3);\n```\n\n### 模拟工具\n\n#### Jest Mock\n\n- **优点**：Jest 内置的模拟功能强大，能轻松模拟函数、模块和组件。它可以自动跟踪函数的调用情况，方便进行断言。\n- **适用场景**：在使用 Jest 进行测试时，使用其内置的模拟功能即可满足大部分需求。\n- **示例代码**：\n\n```javascript\nconst mockFunction = jest.fn();\nmockFunction();\nexpect(mockFunction).toHaveBeenCalled();\n```\n\n#### Sinon\n\n- **优点**：功能全面，支持创建间谍（spy）、存根（stub）和模拟（mock）对象。它可以独立于测试框架使用，与各种断言库兼容。\n- **适用场景**：当需要更复杂的模拟功能，或者在使用 Mocha 等框架时，Sinon 是一个很好的选择。\n- **示例代码**：\n\n```javascript\nconst sinon = require(\"sinon\");\nconst myObject = {\n myMethod: function () {},\n};\nconst spy = sinon.spy(myObject, \"myMethod\");\nmyObject.myMethod();\nexpect(spy.called).to.be.true;\n```\n\n### 测试工具库\n\n#### React Testing Library\n\n- **优点**：专注于从用户交互的角度测试组件，鼓励编写接近用户实际使用场景的测试用例。它不依赖于组件的内部实现细节，能提高测试的稳定性。\n- **适用场景**：适用于各种 React 项目，尤其是注重用户体验和组件交互的项目。\n- **示例代码**：\n\n```javascript\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport MyButton from \"./MyButton\";\n\ntest(\"button click event\", () => {\n const mockClick = jest.fn();\n const { getByText } = render();\n const button = getByText(\"Click me\");\n fireEvent.click(button);\n expect(mockClick).toHaveBeenCalled();\n});\n```\n\n#### Enzyme\n\n- **优点**：提供了丰富的 API 来操作和断言 React 组件的输出。它支持浅渲染（shallow rendering），可以只渲染组件本身，而不渲染其子组件，方便进行单元测试。\n- **适用场景**：适用于需要深入测试组件内部结构和状态的项目。不过，随着 React 官方推荐从实现细节转向用户交互的测试方式，Enzyme 的使用逐渐减少。\n- **示例代码**：\n\n```javascript\nimport React from \"react\";\nimport { shallow } from \"enzyme\";\nimport MyComponent from \"./MyComponent\";\n\ntest(\"MyComponent should render correctly\", () => {\n const wrapper = shallow();\n expect(wrapper.find(\"div\").length).toBe(1);\n});\n```\n\n在选型时，你需要根据项目的规模、复杂度、团队技术栈和个人偏好等因素进行综合考虑，选择最适合项目的测试方案。\n",{"_54":385,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1100/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1100/timeline",{"_54":388,"_56":57,"_58":389,"_60":390,"_62":391,"_64":392,"_66":393,"_68":394,"_70":395,"_72":396,"_74":397,"_107":398,"_120":121,"_122":26,"_123":-5,"_124":400,"_126":401,"_148":141,"_142":403,"_144":403,"_147":-5,"_149":150,"_102":-5,"_151":404,"_156":-5,"_157":405,"_159":406,"_171":408,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1099","https://api.github.com/repos/pro-collection/interview-question/issues/1099/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1099/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1099/events","https://github.com/pro-collection/interview-question/issues/1099",2946893034,"I_kwDOJGDC6c6vpgTq",1099,"如何搭建前端测试环境【热度: 505】",{"_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},[399],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":402,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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-03-25T15:14:10Z",{"_153":141,"_154":141,"_155":141},"**关键词**：前端测试\n\n搭建前端测试体系是一个系统性工程，下面从几个关键方面详细介绍其搭建步骤：\n\n### 1. 规划测试策略\n\n- **确定测试范围**：明确需要测试的前端项目部分，例如页面布局、交互功能、组件、API 调用等。要考虑项目的规模、复杂度以及业务的关键功能点。\n- **设定测试目标**：比如保证代码质量、提升用户体验、减少线上故障等。不同的目标会影响测试的深度和广度。\n- **制定测试计划**：规划测试的阶段、时间节点、参与人员等。例如，在开发的不同阶段安排不同类型的测试，如单元测试在开发过程中同步进行，集成测试在模块合并后开展等。\n\n### 2. 选择测试框架和工具\n\n#### 单元测试\n\n- **Jest**：功能强大且易于上手，有丰富的断言库和模拟功能，自带测试运行器，能自动并行执行测试用例，广泛应用于 React、Vue 等项目。\n- **Mocha**：灵活度高，可搭配不同的断言库（如 Chai）和模拟库（如 Sinon）使用，支持异步测试，适用于各种 JavaScript 项目。\n\n#### 集成测试\n\n- **React Testing Library**：专注于从用户交互角度测试 React 组件，鼓励编写接近用户使用场景的测试用例。\n- **Vue Test Utils**：是 Vue.js 官方提供的测试工具，能方便地挂载和测试 Vue 组件，处理组件间的交互。\n\n#### 端到端（E2E）测试\n\n- **Cypress**：具有实时重新加载、自动等待等特性，能直观展示测试运行过程，易于调试，适合各种前端项目，尤其是单页面应用。\n- **Puppeteer**：基于 Chrome 或 Chromium 浏览器，可模拟复杂的用户操作，如页面滚动、文件上传等，常用于性能测试和自动化操作。\n\n### 3. 编写测试用例\n\n#### 单元测试用例\n\n针对单个函数、组件或模块编写测试用例，确保其功能的正确性。例如，对于一个计算两个数之和的函数，可以编写以下测试用例：\n\n```javascript\nfunction sum(a, b) {\n return a + b;\n}\n\ntest(\"adds 1 + 2 to equal 3\", () => {\n expect(sum(1, 2)).toBe(3);\n});\n```\n\n#### 集成测试用例\n\n测试多个组件或模块之间的交互是否正常。例如，测试一个表单组件与数据提交逻辑的集成：\n\n```javascript\nimport React from \"react\";\nimport { render, fireEvent } from \"@testing-library/react\";\nimport Form from \"./Form\";\n\ntest(\"form submits data correctly\", () => {\n const mockSubmit = jest.fn();\n const { getByLabelText, getByText } = render(

);\n const input = getByLabelText(\"Name\");\n const submitButton = getByText(\"Submit\");\n\n fireEvent.change(input, { target: { value: \"John\" } });\n fireEvent.click(submitButton);\n\n expect(mockSubmit).toHaveBeenCalledWith({ name: \"John\" });\n});\n```\n\n#### 端到端测试用例\n\n模拟用户在浏览器中的真实操作流程，确保整个应用的功能正常。例如，使用 Cypress 测试一个登录页面：\n\n```javascript\ndescribe(\"Login page\", () => {\n it(\"logs in successfully\", () => {\n cy.visit(\"/login\");\n cy.get('input[name=\"username\"]').type(\"testuser\");\n cy.get('input[name=\"password\"]').type(\"testpassword\");\n cy.get('button[type=\"submit\"]').click();\n cy.url().should(\"include\", \"/dashboard\");\n });\n});\n```\n\n### 4. 集成持续集成/持续部署（CI/CD）\n\n将测试集成到 CI/CD 流程中，每次代码提交或合并时自动触发测试。常见的 CI/CD 工具有 Jenkins、GitLab CI/CD 和 GitHub Actions。以下是一个使用 GitHub Actions 运行 Jest 单元测试的示例配置文件：\n\n```yaml\nname: Test\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n test:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v2\n - name: Set up Node.js\n uses: actions/setup-node@v2\n with:\n node-version: 14\n - name: Install dependencies\n run: npm install\n - name: Run tests\n run: npm test\n```\n\n### 5. 代码覆盖率检测\n\n使用工具如 Istanbul（Jest 内置支持）检测代码的测试覆盖率，确保测试覆盖到尽可能多的代码。可以在 CI/CD 流程中设置代码覆盖率阈值，若不达标则阻止代码部署。例如，在 Jest 配置中设置覆盖率阈值：\n\n```json\n{\n \"coverageThreshold\": {\n \"global\": {\n \"branches\": 80,\n \"functions\": 80,\n \"lines\": 80,\n \"statements\": 80\n }\n }\n}\n```\n\n### 6. 性能测试和监控\n\n使用工具如 Lighthouse、WebPageTest 对前端应用的性能进行测试，包括页面加载时间、响应时间等指标。根据测试结果对代码和资源进行优化。同时，建立性能监控系统，持续跟踪应用的性能变化。\n\n### 7. 维护和优化测试体系\n\n随着项目的发展，不断维护和更新测试用例，确保测试的有效性和准确性。定期审查测试体系，根据项目需求和技术发展进行调整和优化。例如，引入新的测试框架或工具，改进测试用例的编写方式等。\n",{"_54":407,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1099/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1099/timeline",{"_54":410,"_56":57,"_58":411,"_60":412,"_62":413,"_64":414,"_66":415,"_68":416,"_70":417,"_72":418,"_74":419,"_107":420,"_120":121,"_122":26,"_123":-5,"_124":428,"_126":429,"_148":141,"_142":431,"_144":432,"_147":-5,"_149":150,"_102":-5,"_151":433,"_156":-5,"_157":434,"_159":435,"_171":437,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1098","https://api.github.com/repos/pro-collection/interview-question/issues/1098/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1098/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1098/events","https://github.com/pro-collection/interview-question/issues/1098",2843035647,"I_kwDOJGDC6c6pdUf_",1098,"自定义 eslint 插件，要求常量为大写 snake 命名方式，该怎么做【热度: 35】",{"_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},[421],{"_66":422,"_68":423,"_54":424,"_113":425,"_115":426,"_117":26,"_118":427},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":430,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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:49:33Z","2025-02-10T16:49:34Z",{"_153":141,"_154":141,"_155":141},"**关键词**：eslint 插件实现\n\n### 1. 项目结构\n\n假设你的项目根目录为 `your-project`，在项目中创建插件相关的目录结构：\n\n```\nyour-project/\n├── .eslintrc.js\n├── src/\n│ └── ...\n├── eslint-plugin-local/\n│ ├── lib/\n│ │ ├── rules/\n│ │ │ └── uppercase-snake-case.js\n│ │ └── index.js\n```\n\n### 2. 编写插件代码\n\n#### 规则组件（`eslint-plugin-local/lib/rules/uppercase-snake-case.js`）\n\n```javascript\nmodule.exports = {\n meta: {\n type: \"suggestion\",\n docs: {\n description: \"Enforce uppercase snake case naming convention\",\n category: \"Stylistic Issues\",\n recommended: false,\n },\n schema: [],\n messages: {\n invalidNaming: 'Variable name \"{{name}}\" should be in uppercase snake case.',\n },\n },\n create(context) {\n return {\n VariableDeclarator(node) {\n const { id } = node;\n if (id.type === \"Identifier\") {\n const name = id.name;\n const isUppercaseSnakeCase = /^[A-Z_]+$/.test(name);\n if (!isUppercaseSnakeCase) {\n context.report({\n node: id,\n messageId: \"invalidNaming\",\n data: {\n name,\n },\n });\n }\n }\n },\n };\n },\n};\n```\n\n#### 插件入口文件（`eslint-plugin-local/lib/index.js`）\n\n```javascript\nmodule.exports = {\n rules: {\n \"uppercase-snake-case\": require(\"./rules/uppercase-snake-case\"),\n },\n configs: {\n recommended: {\n rules: {\n \"eslint-plugin-local/uppercase-snake-case\": \"error\",\n },\n },\n },\n};\n```\n\n### 3. 配置 ESLint\n\n在项目根目录下的 `.eslintrc.js` 文件中进行配置，让 ESLint 能够识别并使用本地插件：\n\n```javascript\nmodule.exports = {\n // 告诉 ESLint 从哪里查找插件\n plugins: [\n {\n rules: require(\"./eslint-plugin-local/lib/index.js\").rules,\n configs: require(\"./eslint-plugin-local/lib/index.js\").configs,\n },\n ],\n extends: [\"plugin:eslint-plugin-local/recommended\"],\n parser: \"@typescript-eslint/parser\",\n parserOptions: {\n ecmaVersion: 2020,\n sourceType: \"module\",\n },\n};\n```\n\n#### 代码解释：\n\n- `plugins` 数组中的对象用于直接引入本地插件的规则和配置。\n- `extends` 用于应用插件中定义的推荐配置。\n\n### 4. 运行 ESLint\n\n确保你的项目已经安装了 ESLint，然后在项目根目录下运行 ESLint 检查：\n\n```bash\nnpx eslint src\n```\n\n这里的 `src` 是你的项目代码所在目录，你可以根据实际情况修改为其他目录。\n\n通过以上步骤，你就可以在自己的项目中使用本地编写的 ESLint 插件了。当你修改插件代码后，再次运行 ESLint 检查，就能看到最新的检查结果。\n",{"_54":436,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1098/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1098/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":451,"_126":452,"_148":141,"_142":454,"_144":454,"_147":-5,"_149":150,"_102":-5,"_151":455,"_156":-5,"_157":456,"_159":457,"_171":459,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1097","https://api.github.com/repos/pro-collection/interview-question/issues/1097/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1097/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1097/events","https://github.com/pro-collection/interview-question/issues/1097",2843010212,"I_kwDOJGDC6c6pdOSk",1097,"eslint 是怎么做到用配置规则去检验代码异常【热度: 75】",{"_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],{"_66":422,"_68":423,"_54":424,"_113":425,"_115":426,"_117":26,"_118":427},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":453,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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:40:10Z",{"_153":141,"_154":141,"_155":141},"**关键词**：eslint 原理\n\nESLint 是一个用于识别和报告 JavaScript 代码中模式问题的工具，它通过配置规则来检验代码异常，下面详细介绍其工作原理和实现过程。\n\n### 1. 规则配置\n\nESLint 允许用户通过配置文件来定义代码检查规则。常见的配置文件格式有 `.eslintrc.js`、`.eslintrc.json`、`.eslintrc.yml` 等。在配置文件中，可以为不同的规则设置不同的级别，规则级别主要有以下三种：\n\n- `off` 或 `0`：关闭该规则。\n- `warn` 或 `1`：开启规则，违反规则时给出警告。\n- `error` 或 `2`：开启规则，违反规则时给出错误。\n\n以下是一个 `.eslintrc.js` 配置文件的示例：\n\n```javascript\nmodule.exports = {\n rules: {\n // 要求使用分号结尾\n semi: [\"error\", \"always\"],\n // 要求使用两个空格缩进\n indent: [\"error\", 2],\n },\n};\n```\n\n### 2. 解析代码\n\nESLint 使用 JavaScript 解析器（如 Espree）将 JavaScript 代码解析成抽象语法树（Abstract Syntax Tree，简称 AST）。AST 是代码的一种树形表示，它以节点的形式描述了代码的语法结构。例如，对于以下代码：\n\n```javascript\nfunction add(a, b) {\n return a + b;\n}\n```\n\n解析后会生成一个包含函数定义、参数、返回语句等节点的 AST。\n\n### 3. 规则检查\n\nESLint 根据配置文件中的规则，遍历 AST 节点，对代码进行检查。每个规则都定义了一个或多个检查函数，这些函数会在遍历到特定类型的 AST 节点时被调用。例如，对于 `semi` 规则，当遍历到语句结束的节点时，会检查该语句是否以分号结尾。\n\n以下是一个简单的自定义规则示例：\n\n```javascript\nmodule.exports = {\n meta: {\n type: \"problem\",\n docs: {\n description: \"Ensure that all function names start with a capital letter\",\n category: \"Best Practices\",\n recommended: true,\n },\n schema: [],\n messages: {\n functionNameShouldStartWithCapital: \"Function name should start with a capital letter\",\n },\n },\n create(context) {\n return {\n FunctionDeclaration(node) {\n const functionName = node.id.name;\n if (functionName[0] !== functionName[0].toUpperCase()) {\n context.report({\n node,\n messageId: \"functionNameShouldStartWithCapital\",\n });\n }\n },\n };\n },\n};\n```\n\n在这个自定义规则中，`create` 函数返回一个对象，对象的属性名是 AST 节点类型（如 `FunctionDeclaration`），对应的属性值是一个检查函数。当遍历到函数声明节点时，会调用该检查函数，检查函数名是否以大写字母开头。\n\n### 4. 报告问题\n\n如果代码违反了配置的规则，ESLint 会记录问题信息，包括问题所在的文件路径、行号、列号、规则名称和错误信息等。最后，ESLint 会将这些问题信息输出到控制台，方便开发者查看和修复。\n\n### 5. 自动修复\n\n对于一些简单的规则违反情况，ESLint 支持自动修复功能。在配置文件中，可以为规则设置 `fixable` 属性，并在规则的检查函数中实现修复逻辑。开发者可以使用 `--fix` 选项来让 ESLint 自动修复代码中的问题。例如：\n\n```bash\neslint --fix yourfile.js\n```\n",{"_54":458,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1097/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1097/timeline",{"_54":461,"_56":57,"_58":462,"_60":463,"_62":464,"_64":465,"_66":466,"_68":467,"_70":468,"_72":469,"_74":470,"_107":471,"_120":121,"_122":26,"_123":-5,"_124":473,"_126":474,"_148":141,"_142":476,"_144":476,"_147":-5,"_149":150,"_102":-5,"_151":477,"_156":-5,"_157":478,"_159":479,"_171":481,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1096","https://api.github.com/repos/pro-collection/interview-question/issues/1096/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1096/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1096/events","https://github.com/pro-collection/interview-question/issues/1096",2842989389,"I_kwDOJGDC6c6pdJNN",1096,"将已经 push 到远端的两个 commit 合并成一个 commit 应该怎么做【热度: 103】",{"_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},[472],{"_66":422,"_68":423,"_54":424,"_113":425,"_115":426,"_117":26,"_118":427},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":475,"_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-02-10T16:32:39Z",{"_153":141,"_154":141,"_155":141},"**关键词**：git rebase 合并 commit\n\n当你已经将两个 `commit` 推送到远端仓库，现在想要将它们合并成一个 `commit`，可以按照以下步骤操作：\n\n### 1. 克隆仓库到本地\n\n如果你还没有在本地克隆该仓库，需要先将远程仓库克隆到本地：\n\n```bash\ngit clone <远程仓库地址>\ncd <仓库目录>\n```\n\n### 2. 查看提交历史\n\n使用 `git log` 命令查看提交历史，确认要合并的两个 `commit` 的哈希值（`commit hash`）。一般来说，新的 `commit` 在前面，旧的 `commit` 在后面。\n\n```bash\ngit log --oneline\n```\n\n例如，输出可能如下：\n\n```\nabcdefg 第三个提交\n1234567 第二个提交\n890abcd 第一个提交\n```\n\n假设你要合并的是 `1234567` 和 `abcdefg` 这两个 `commit`。\n\n### 3. 进行交互式变基\n\n使用 `git rebase -i` 命令进行交互式变基，指定要合并的 `commit` 的前一个 `commit` 的哈希值。在这个例子中，就是 `890abcd`。\n\n```bash\ngit rebase -i 890abcd\n```\n\n执行上述命令后，会打开一个文本编辑器，显示如下内容：\n\n```plaintext\npick abcdefg 第三个提交\npick 1234567 第二个提交\n\n# Rebase 890abcd..abcdefg onto 890abcd (2 commands)\n#\n# Commands:\n# p, pick = use commit\n# r, reword = use commit, but edit the commit message\n# e, edit = use commit, but stop for amending\n# s, squash = use commit, but meld into previous commit\n# f, fixup = like \"squash\", but discard this commit's log message\n# x, exec = run command (the rest of the line) using shell\n# b, break = stop here (continue rebase later with 'git rebase --continue')\n# d, drop = remove commit\n# l, label = label current HEAD with a name\n# t, reset = reset HEAD to a label\n# m, merge [-C | -c ] [# ]\n# . create a merge commit using the original merge commit's\n# . message (or the oneline, if no original merge commit was\n# . specified). Use -c to reword the commit message.\n#\n# These lines can be re-ordered; they are executed from top to bottom.\n#\n# If you remove a line here THAT COMMIT WILL BE LOST.\n#\n# However, if you remove everything, the rebase will be aborted.\n#\n# Note that empty commits are commented out\n```\n\n### 4. 修改提交操作\n\n将第二个 `commit` 前面的 `pick` 改为 `squash` 或 `s`，表示将这个 `commit` 合并到前一个 `commit` 中。修改后的内容如下：\n\n```plaintext\npick abcdefg 第三个提交\ns 1234567 第二个提交\n```\n\n保存并关闭文本编辑器。\n\n### 5. 修改合并后的提交信息\n\n保存退出后，会再次打开一个文本编辑器，让你修改合并后的 `commit` 信息。你可以保留原有的 `commit` 信息，也可以根据需要进行修改。修改完成后，保存并关闭文本编辑器。\n\n### 6. 强制推送修改到远程仓库\n\n由于你已经修改了提交历史，本地的提交历史和远程仓库的提交历史不再一致，需要使用 `git push -f` 命令强制推送修改到远程仓库：\n\n```bash\ngit push -f origin <分支名>\n```\n\n注意：强制推送会覆盖远程仓库的提交历史，可能会影响其他团队成员的工作，建议在操作前与团队成员沟通。\n\n### 7. 通知团队成员更新本地仓库\n\n强制推送后，通知团队成员拉取最新的提交历史：\n\n```bash\ngit pull --rebase origin <分支名>\n```\n\n通过以上步骤，你就可以将已经推送到远端的两个 `commit` 合并成一个 `commit`。\n",{"_54":480,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1096/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1096/timeline",{"_54":483,"_56":57,"_58":484,"_60":485,"_62":486,"_64":487,"_66":488,"_68":489,"_70":490,"_72":491,"_74":492,"_107":493,"_120":121,"_122":26,"_123":-5,"_124":501,"_126":502,"_148":141,"_142":504,"_144":504,"_147":-5,"_149":150,"_102":-5,"_151":505,"_156":-5,"_157":506,"_159":507,"_171":509,"_173":-5,"_174":-5,"_175":176},"https://api.github.com/repos/pro-collection/interview-question/issues/1095","https://api.github.com/repos/pro-collection/interview-question/issues/1095/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1095/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1095/events","https://github.com/pro-collection/interview-question/issues/1095",2842965964,"I_kwDOJGDC6c6pdDfM",1095,"[React] Recoil 里面 selectorFamily 的作用是什么？和 selector 有啥区别【热度: 200】",{"_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},[494],{"_66":495,"_68":496,"_54":497,"_113":498,"_115":499,"_117":26,"_118":500},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":503,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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:23:47Z",{"_153":141,"_154":141,"_155":141},"**关键词**：Recoil selector 和 selectorFamily\n\n在 Recoil 中，`selectorFamily` 和 `selector` 都是用于创建派生状态的工具，但它们在使用场景和功能上存在一些差异，下面为你详细介绍它们的作用以及区别。\n\n### `selector` 的作用\n\n`selector` 用于创建派生状态，它可以根据一个或多个原子（`atom`）状态计算出新的状态。`selector` 的值会自动进行记忆化，只有当依赖的状态发生变化时才会重新计算。以下是一个简单的 `selector` 示例：\n\n```jsx\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 const textLength = useRecoilValue(textLengthState);\n return (\n

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":508,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":511,"_56":57,"_58":512,"_60":513,"_62":514,"_64":515,"_66":516,"_68":517,"_70":518,"_72":519,"_74":520,"_107":521,"_120":121,"_122":26,"_123":-5,"_124":523,"_126":524,"_148":141,"_142":526,"_144":527,"_147":-5,"_149":150,"_102":-5,"_151":528,"_156":-5,"_157":529,"_159":530,"_171":532,"_173":-5,"_174":-5,"_175":176},"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},[522],{"_66":495,"_68":496,"_54":497,"_113":498,"_115":499,"_117":26,"_118":500},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":525,"_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-02-10T16:03:44Z","2025-02-10T16:03:45Z",{"_153":141,"_154":141,"_155":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":531,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":534,"_56":57,"_58":535,"_60":536,"_62":537,"_64":538,"_66":539,"_68":540,"_70":541,"_72":542,"_74":543,"_107":544,"_120":121,"_122":26,"_123":-5,"_124":546,"_126":547,"_148":141,"_142":549,"_144":550,"_147":-5,"_149":150,"_102":-5,"_151":551,"_156":-5,"_157":552,"_159":553,"_171":555,"_173":-5,"_174":-5,"_175":176},"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},[545],{"_66":495,"_68":496,"_54":497,"_113":498,"_115":499,"_117":26,"_118":500},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":548,"_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-02-10T16:01:40Z","2025-02-10T16:01:41Z",{"_153":141,"_154":141,"_155":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":554,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":557,"_56":57,"_58":558,"_60":559,"_62":560,"_64":561,"_66":562,"_68":563,"_70":564,"_72":565,"_74":566,"_107":567,"_120":121,"_122":26,"_123":-5,"_124":569,"_126":570,"_148":141,"_142":572,"_144":572,"_147":-5,"_149":150,"_102":-5,"_151":573,"_156":-5,"_157":574,"_159":575,"_171":577,"_173":-5,"_174":-5,"_175":176},"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},[568],{"_66":495,"_68":496,"_54":497,"_113":498,"_115":499,"_117":26,"_118":500},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":571,"_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-02-10T15:44:47Z",{"_153":141,"_154":141,"_155":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":576,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":579,"_56":57,"_58":580,"_60":581,"_62":582,"_64":583,"_66":584,"_68":585,"_70":586,"_72":587,"_74":588,"_107":589,"_120":121,"_122":26,"_123":-5,"_124":597,"_126":598,"_148":141,"_142":600,"_144":601,"_147":-5,"_149":150,"_102":-5,"_151":602,"_156":-5,"_157":603,"_159":604,"_171":606,"_173":-5,"_174":-5,"_175":176},"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},[590],{"_66":591,"_68":592,"_54":593,"_113":594,"_115":595,"_117":26,"_118":596},5232525911,"LA_kwDOJGDC6c8AAAABN-ICVw","https://api.github.com/repos/pro-collection/interview-question/labels/Nodejs","Nodejs","AC3F88","Nodejs 研究",[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":599,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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",{"_153":141,"_154":141,"_155":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":605,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":608,"_56":57,"_58":609,"_60":610,"_62":611,"_64":612,"_66":613,"_68":614,"_70":615,"_72":616,"_74":617,"_107":618,"_120":121,"_122":26,"_123":-5,"_124":620,"_126":621,"_148":141,"_142":623,"_144":624,"_147":-5,"_149":150,"_102":-5,"_151":625,"_156":-5,"_157":626,"_159":627,"_171":629,"_173":-5,"_174":-5,"_175":176},"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},[619],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":622,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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",{"_153":141,"_154":141,"_155":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":628,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":631,"_56":57,"_58":632,"_60":633,"_62":634,"_64":635,"_66":636,"_68":637,"_70":638,"_72":639,"_74":640,"_107":641,"_120":121,"_122":26,"_123":-5,"_124":650,"_126":651,"_148":176,"_142":653,"_144":654,"_147":-5,"_149":150,"_102":-5,"_151":655,"_156":-5,"_157":656,"_159":657,"_171":659,"_173":-5,"_174":-5,"_175":176},"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},[642,643],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":644,"_68":645,"_54":646,"_113":647,"_115":648,"_117":26,"_118":649},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":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":652,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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","2025-03-27T07:54:49Z",{"_153":141,"_154":141,"_155":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":658,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":661,"_56":57,"_58":662,"_60":663,"_62":664,"_64":665,"_66":666,"_68":667,"_70":668,"_72":669,"_74":670,"_107":671,"_120":121,"_122":26,"_123":-5,"_124":674,"_126":675,"_148":141,"_142":677,"_144":677,"_147":-5,"_149":150,"_102":-5,"_151":678,"_156":-5,"_157":679,"_159":680,"_171":682,"_173":-5,"_174":-5,"_175":176},"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},[672,673],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":644,"_68":645,"_54":646,"_113":647,"_115":648,"_117":26,"_118":649},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":676,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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",{"_153":141,"_154":141,"_155":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":681,"_162":141,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":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":684,"_56":57,"_58":685,"_60":686,"_62":687,"_64":688,"_66":689,"_68":690,"_70":691,"_72":692,"_74":693,"_107":694,"_120":121,"_122":26,"_123":-5,"_124":697,"_126":698,"_148":141,"_142":700,"_144":700,"_147":-5,"_149":150,"_102":-5,"_151":701,"_156":-5,"_157":702,"_159":703,"_171":705,"_173":-5,"_174":-5,"_175":176},"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},[695,696],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":644,"_68":645,"_54":646,"_113":647,"_115":648,"_117":26,"_118":649},[],{"_54":236,"_64":237,"_58":238,"_66":239,"_68":240,"_70":241,"_72":242,"_118":243,"_136":699,"_138":245,"_140":141,"_120":121,"_142":246,"_144":247,"_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",{"_153":141,"_154":141,"_155":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`格式可以用于在浏览器中通过`