{"id":13496297,"url":"https://github.com/geekact/vite-react","last_synced_at":"2025-03-28T18:31:52.555Z","repository":{"id":57393247,"uuid":"349117424","full_name":"geekact/vite-react","owner":"geekact","description":"基于 Vite 打包工具的 react 专属配置","archived":false,"fork":false,"pushed_at":"2024-02-07T04:24:36.000Z","size":915,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T02:17:38.944Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geekact.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-18T15:07:44.000Z","updated_at":"2024-10-09T00:36:17.000Z","dependencies_parsed_at":"2024-01-16T09:54:25.179Z","dependency_job_id":"589d73d4-adc3-4ba5-bed8-1a39fd008f53","html_url":"https://github.com/geekact/vite-react","commit_stats":{"total_commits":138,"total_committers":2,"mean_commits":69.0,"dds":0.3913043478260869,"last_synced_commit":"8887331c367aa619d0ffeb3845424b4820f0b082"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekact%2Fvite-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekact%2Fvite-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekact%2Fvite-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekact%2Fvite-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geekact","download_url":"https://codeload.github.com/geekact/vite-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246080670,"owners_count":20720569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:45.371Z","updated_at":"2025-03-28T18:31:51.543Z","avatar_url":"https://github.com/geekact.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vite-react\n\n基于 [Vite](https://github.com/vitejs/vite) 工具的 react 专属配置\n\n[![npm peer dependency vite version](https://img.shields.io/npm/dependency-version/vite-react/peer/vite?logo=vite)](https://github.com/vitejs/vite)\n[![npm](https://img.shields.io/npm/v/vite-react?logo=npm)](https://www.npmjs.com/package/vite-react)\n[![License](https://img.shields.io/github/license/geekact/vite-react?logo=open-source-initiative)](https://github.com/geekact/vite-react/blob/master/LICENSE)\n[![Code Style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier)](https://github.com/prettier/prettier)\n\n# 安装\n\n```bash\npnpm add vite vite-react -D\n```\n\n# 配置迁移\n\n### package.json\n\n```diff\n{\n  \"devDependencies\": {\n-   \"@vitejs/plugin-legacy\": \"*\",\n-   \"@vitejs/plugin-react\": \"*\",\n-   \"less\": \"*\",\n-   \"sass\": \"*\",\n    \"vite\": \"*\",\n+   \"vite-react\": \"*\"\n    ...\n  },\n  ...\n}\n```\n\n### tsconfig.json\n\n```diff\n{\n  \"compilerOptions\": {\n    ...\n-   \"types\": [\"vite/client\"]\n    ...\n  }\n}\n```\n\n### vite.config.ts\n\n```diff\n- import { defineConfig } from 'vite';\n+ import { defineConfig } from 'vite-react';\n\nexport default defineConfig({\n  ...\n+ react: {},\n+ legacy: true | {},\n+ html: false | {},\n  server: {\n+   watchExtend: {},\n+   qrcode: boolean | {}\n+   https: true,\n  },\n  resolve: {\n+   aliasFromTsconfig: boolean | {}\n  },\n  ...\n});\n```\n\n# 特性\n\n- 自动使用 react/react-swc 插件\n- 内置 sass 和 less 预处理器\n- 自动引入 `vite/client.d.ts` 类型文件，无需在 tsconfig.json 中指定\n- 自动识别在 `tsconfig.json` 中设置的路径别名\n- 启动 vite 服务时默认打开浏览器\n- 打包后的资源按照后缀放置到不同的文件夹\n- 配置 `server.https=true` 时，自动生成信任的SSL证书\n- css-modules 在开发模式下显示具体文件和类名，在打包时则使用哈希值\n- 在指定 `host` 时显示链接二维码以便在手机上快速扫描访问\n- .html 文件在 build 模式自动压缩\n\n# 配置\n\n## react\n\nReact 项目基础插件，自动引入配置。\n\n默认使用[@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)插件，其在开发环境使用 swc 替换 babel，速度会快好几倍。如果要使用基于 babel 的[@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react)，则可以这么配置：\n\n```typescript\nexport default defineConfig({\n  react: {\n    swc: false,\n  },\n});\n```\n\n## legacy\n\n默认值：`false`\n\n使用官方 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 插件兼容不支持 `\u003cscript type=\"module\"\u003e` 标签引入 JS 文件的浏览器。\n\n列举主流浏览器的支持情况：\n\n| 浏览器   | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png\" alt=\"IE\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eIE | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"Edge\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eEdge | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eChrome | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eFirefox | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eSafari | \u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eOpera |\n| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 开始版本 | ❌                                                                                                                                                                                        | 16                                                                                                                                                | 61                                                                                                                                                        | 60                                                                                                                                                            | 10.1                                                                                                                                                      | 48                                                                                                                                                    |\n| 发布时间 | ❌                                                                                                                                                                                        | 2017.10.17                                                                                                                                        | 2017.09.05                                                                                                                                                | 2018.05.09                                                                                                                                                    | 2017.05.27                                                                                                                                                | 2017.09.27                                                                                                                                            |\n\n更多浏览器以及手机浏览器兼容性可参考 https://caniuse.com/es6-module\n\n开启 legacy 方式：\n\n```typescript\nexport default defineConfig({\n  legacy: true,\n});\n```\n\n当然也可以配置一些参数。具体配置请参考 [官方文档](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#options)\n\n```typescript\nexport default defineConfig({\n  legacy: {\n    targets: ['chrome \u003e= 50', 'not dead'],\n  },\n});\n```\n\n## html\n\n对 html 文件进行打包、压缩、传值、实现多页面等处理。请查看官方文档 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html#useroptions)\n\n```typescript\nexport default defineConfig({\n  html: {\n    // ...\n  },\n});\n```\n\n## server.watchExtend\n\n使用插件 [vite-plugin-restart](https://github.com/antfu/vite-plugin-restart) 额外监听文件变化，可重启 vite 服务或者刷新页面。\n\n```typescript\nexport default defineConfig({\n  server: {\n    watchExtend: {\n      restart: [], // 重启服务\n      reload: [], // 刷新页面\n    },\n  },\n});\n```\n\n## server.qrcode\n\n默认值：`true`\n\n在开发时使用了 `host` 时，使用插件 [vite-plugin-qrcode](https://github.com/svitejs/vite-plugin-qrcode) 在终端生成二维码，方便手机立即扫码访问。\n\n```typescript\nexport default defineConfig({\n  server: {\n    qrcode: true | false | {},\n  },\n});\n```\n\n## server.https\n\n设置成`true`时，使用插件 [vite-plugin-mkcert](https://github.com/liuweiGL/vite-plugin-mkcert) 自动生成信任证书并使用http2访问资源\n\n## resolve.aliasFromTsconfig\n\n默认值：`true`\n\n使用插件 [vite-tsconfig-paths](https://github.com/aleclarson/vite-tsconfig-paths) 自动识别`tsconfig.json`配置中设置的路径别名，省去了重复配置别名的麻烦。\n\n```typescript\nexport default defineConfig({\n  resolve: {\n    aliasFromTsconfig: true | false | {},\n  },\n});\n```\n\n# 温馨提示\n\n- 使用 css-modules 时，建议安装 vscode 插件 `clinyong.vscode-css-modules` 以获得更多提示\n- 尽量使用 `lodash-es` 代替 `lodash` 以获得 tree-shaking 优化\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekact%2Fvite-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeekact%2Fvite-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekact%2Fvite-react/lists"}