{"id":15292536,"url":"https://github.com/baozouai/generate-history-method-webpack-plugin","last_synced_at":"2025-04-13T11:12:44.711Z","repository":{"id":175558949,"uuid":"654076091","full_name":"baozouai/generate-history-method-webpack-plugin","owner":"baozouai","description":"一个根据约定式路由，自动生成路由方法的Webpack插件","archived":false,"fork":false,"pushed_at":"2024-03-21T08:13:50.000Z","size":4525,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T11:12:39.206Z","etag":null,"topics":["auto-generate-history-method","history-param-types","react-router","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/generate-history-method-webpack-plugin","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/baozouai.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"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}},"created_at":"2023-06-15T10:36:58.000Z","updated_at":"2024-07-11T07:09:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"f787fe1d-1d47-4f9b-8e14-7b5a335af262","html_url":"https://github.com/baozouai/generate-history-method-webpack-plugin","commit_stats":null,"previous_names":["baozouai/genetate-history-method-webpack-plugin","baozouai/generate-history-method-webpack-plugin"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baozouai%2Fgenerate-history-method-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baozouai%2Fgenerate-history-method-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baozouai%2Fgenerate-history-method-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/baozouai%2Fgenerate-history-method-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/baozouai","download_url":"https://codeload.github.com/baozouai/generate-history-method-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248703198,"owners_count":21148118,"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":["auto-generate-history-method","history-param-types","react-router","webpack-plugin"],"created_at":"2024-09-30T16:18:39.465Z","updated_at":"2025-04-13T11:12:44.690Z","avatar_url":"https://github.com/baozouai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n\u003ch1 align=\"center\"\u003egenerate-history-method-webpack-plugin\u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  一个根据约定式路由，自动生成路由方法的Webpack插件\n\n[![NPM version][npm-image]][npm-url] ![NPM downloads][download-image]\n\n![Test][test-badge]\n\n\n[npm-image]: https://img.shields.io/npm/v/generate-history-method-webpack-plugin.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/generate-history-method-webpack-plugin\n\n\n[download-image]: https://img.shields.io/npm/dm/generate-history-method-webpack-plugin.svg?style=flat-square\n\n\n\n[test-badge]: https://github.com/baozouai/generate-history-method-webpack-plugin/actions/workflows/ci.yml/badge.svg\n\n\n\n\u003c/div\u003e\n\n中文 | [英文](./README.md)\n\n## 📦  安装\n\n```sh\npnpm add generate-history-method-webpack-plugin -D\n# or\nyarn add generate-history-method-webpack-plugin -D\n# or\nnpm i generate-history-method-webpack-plugin -D\n```\n\n确保你的依赖有`qs`，否则请安装\n\n```sh\npnpm add qs -D\n# or\nyarn add qs -D\n# or\nnpm i qs -D\n```\n\n确保在你项目 src 下面export default对应的history：\n\n比如你使用的是browser模式，可以参考[react-router-6/src/browser_history.ts](./playgrounds/react-router-6/src/browser_history.ts)，那么导出该history\n\n```ts\nimport type { BrowserHistory } from 'history'\nimport { createBrowserHistory } from 'history'\n\nexport type { BrowserHistory }\nexport default createBrowserHistory()\n\n```\n\n比如你使用的是hash模式，可以参考[react-router-6/src/hash_history.ts](./playgrounds/react-router-6/src/hash_history.ts)，那么导出该history\n\n```ts\nimport type { HashHistory } from 'history'\nimport { createHashHistory } from 'history'\n\nexport type { HashHistory }\nexport default createHashHistory()\n\n```\n## ⚙️ 参数\n\n```ts\ninterface GenerateHistoryMethodWebpackPluginOptions {\n  /**\n   * @description 用来定义路由参数类型的文件名\n   * @default index.params\n   *  */\n  paramsName?: string\n  /**\n   * @description 用来识别是路由页面的文件名\n   * @default index.page\n   */\n  pageName?: string\n  /**\n   * 生成的history从哪个模块导入\n   * @default ~history\n   * @example\n   * import history from '~history'\n   */\n  historyModuleName?: string\n  /**\n   * 你原先的history模块名\n   * @default 'history'\n   */\n  originHistoryModuleName?: string\n  /**\n   * 哪个根目录下是存放页面的\n   * @example\n   * path.resolve(cwdPath, 'src/pages') */\n  pagesRootPath: string\n  /**\n   * 路由模式，hash or brower\n   * @default 'browser'\n   */\n  mode?: HistoryMode\n  /** \n   *  react-router 版本, 目前支持 v5 和 v6 */\n  reactRouterVersion: 5 | 6\n}\n```\n\n ## 🔨 使用\n\n```js\n// webpack.config.js\nconst GenerateHistoryMethodWebpackPlugin = require('generate-history-method-webpack-plugin')\nconst path = require('path')\n\nmodule.exports = {\n  ...,\n  plugins: [\n    new GenerateHistoryMethodWebpackPlugin()\n  ],\n}\n\n// 根目录新建 .generate-history-method.config.js\nconst path = require('path')\nmodule.exports = {\n  pagesRootPath: path.resolve(__dirname, 'src/pages'),\n  originHistoryModuleName: '@/browser_history',\n  reactRouterVersion: 6,\n}\n```\n![](./assets/option_example.png)\n\n## 👇 例子\n\n\n- 如果你页面在目录 ` src/pages/system/setting/purchase_setting`, 那么会自动提示对应的路由方法\n\n![](./assets/method_tip.gif)\n\n- 如果你在页面同目录下添加了如 `index.params.ts` 作为页面的参数类型, 那么当天调用方法并传参时，会有对应的类型提示\n\n```ts\n// order_detail/index.params.ts\nexport default interface Params {\n  /** 这是订单id */\n  id: string\n}\n```\n  \n\n![](./assets/params_tip.gif)\n\n更多的使用方法可以参考playgrounds下面的 src/app:\n- [react-router-6](./playgrounds/react-router-6/src/app.tsx)\n- [react-router-6-js](./playgrounds/react-router-6-js/src/app.jsx)\n- [react-router-5](./playgrounds/react-router-5/src/app.tsx)\n- [react-router-5-js](./playgrounds/react-router-5-js/src/app.jsx)\n\n\n以及webpack.config.js:\n\n- [react-router-6](./playgrounds/react-router-6/webpack.config.js)\n- [react-router-6-js](./playgrounds/react-router-6-js/webpack.config.js)\n- [react-router-5](./playgrounds/react-router-5/webpack.config.js)\n- [react-router-5-js](./playgrounds/react-router-5-js/webpack.config.js)\n## 📄 协议\n\ngenerate-history-method-webpack-plugin 遵循 [MIT 协议](./LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaozouai%2Fgenerate-history-method-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaozouai%2Fgenerate-history-method-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaozouai%2Fgenerate-history-method-webpack-plugin/lists"}