feat: add genetate-history-method bin and support .generate-history-m…

…ethod.config.js

README-zh_CN.md

@@ -1,6 +1,6 @@
 
 <p align="center">
-<h1 align="center">genetate-history-method-webpack-plugin</h1>
+<h1 align="center">generate-history-method-webpack-plugin</h1>
 </p>
 
 <div align="center">
@@ -11,15 +11,15 @@
 ![Test][test-badge]
 
 
-[npm-image]: https://img.shields.io/npm/v/genetate-history-method-webpack-plugin.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/genetate-history-method-webpack-plugin
+[npm-image]: https://img.shields.io/npm/v/generate-history-method-webpack-plugin.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/generate-history-method-webpack-plugin
 
 
-[download-image]: https://img.shields.io/npm/dm/genetate-history-method-webpack-plugin.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/generate-history-method-webpack-plugin.svg?style=flat-square
 
 
 
-[test-badge]: https://github.com/baozouai/genetate-history-method-webpack-plugin/actions/workflows/ci.yml/badge.svg
+[test-badge]: https://github.com/baozouai/generate-history-method-webpack-plugin/actions/workflows/ci.yml/badge.svg
 
 
 
@@ -30,11 +30,11 @@
 ## 📦  安装
 
 ```sh
-pnpm add genetate-history-method-webpack-plugin -D
+pnpm add generate-history-method-webpack-plugin -D
 # or
-yarn add genetate-history-method-webpack-plugin -D
+yarn add generate-history-method-webpack-plugin -D
 # or
-npm i genetate-history-method-webpack-plugin -D
+npm i generate-history-method-webpack-plugin -D
 ```
 
 确保你的依赖有`qs`，否则请安装
@@ -117,7 +117,7 @@ interface GenerateHistoryMethodWebpackPluginOptions {
 ```js
 // webpack.config.js
 // webpack.config.js
-const GenerateHistoryMethodWebpackPlugin = require('genetate-history-method-webpack-plugin')
+const GenerateHistoryMethodWebpackPlugin = require('generate-history-method-webpack-plugin')
 const path = require('path')
 
 module.exports = {
@@ -168,4 +168,4 @@ export default interface Params {
 - [react-router-5-js](./playgrounds/react-router-5-js/webpack.config.js)
 ## 📄 协议
 
-genetate-history-method-webpack-plugin 遵循 [MIT 协议](./LICENSE).
+generate-history-method-webpack-plugin 遵循 [MIT 协议](./LICENSE).

README.md

@@ -1,6 +1,6 @@
 
 <p align="center">
-<h1 align="center">genetate-history-method-webpack-plugin</h1>
+<h1 align="center">generate-history-method-webpack-plugin</h1>
 </p>
 
 <div align="center">
@@ -11,15 +11,15 @@
 ![Test][test-badge]
 
 
-[npm-image]: https://img.shields.io/npm/v/genetate-history-method-webpack-plugin.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/genetate-history-method-webpack-plugin
+[npm-image]: https://img.shields.io/npm/v/generate-history-method-webpack-plugin.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/generate-history-method-webpack-plugin
 
 
-[download-image]: https://img.shields.io/npm/dm/genetate-history-method-webpack-plugin.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/generate-history-method-webpack-plugin.svg?style=flat-square
 
 
 
-[test-badge]: https://github.com/baozouai/genetate-history-method-webpack-plugin/actions/workflows/ci.yml/badge.svg
+[test-badge]: https://github.com/baozouai/generate-history-method-webpack-plugin/actions/workflows/ci.yml/badge.svg
 
 
 
@@ -30,11 +30,11 @@ English | [中文](./README-zh_CN.md)
 ## 📦  Install
 
 ```sh
-pnpm add genetate-history-method-webpack-plugin -D
+pnpm add generate-history-method-webpack-plugin -D
 # or
-yarn add genetate-history-method-webpack-plugin -D
+yarn add generate-history-method-webpack-plugin -D
 # or
-npm i genetate-history-method-webpack-plugin -D
+npm i generate-history-method-webpack-plugin -D
 ```
 
 make sure your dependencies have `qs`，otherwise please install
@@ -120,7 +120,7 @@ interface GenerateHistoryMethodWebpackPluginOptions {
 
 ```js
 // webpack.config.js
-const GenerateHistoryMethodWebpackPlugin = require('genetate-history-method-webpack-plugin')
+const GenerateHistoryMethodWebpackPlugin = require('generate-history-method-webpack-plugin')
 const path = require('path')
 
 module.exports = {
@@ -169,4 +169,4 @@ and webpack.config.js:
 
 ## 📄 License
 
-genetate-history-method-webpack-plugin is [MIT licensed](./LICENSE).
+generate-history-method-webpack-plugin is [MIT licensed](./LICENSE).

build.config.ts

@@ -1,6 +1,7 @@
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
+  entries: ['./src/generate-history-method-webpack-plugin', './src/bin/generate-history-method'],
   declaration: true,
   clean: true,
   rollup: {

package.json

@@ -1,17 +1,20 @@
 {
-  "name": "genetate-history-method-webpack-plugin",
+  "name": "generate-history-method-webpack-plugin",
   "version": "1.2.1",
   "packageManager": "pnpm@8.3.1",
   "description": "A webpack Plugin for automatically generating routing methods based on conventional routing",
   "author": "baozouai <baozouai@gmail.com>",
   "license": "MIT",
-  "homepage": "https://github.com/baozouai/genetate-history-method-webpack-plugin",
+  "homepage": "https://github.com/baozouai/generate-history-method-webpack-plugin",
   "repository": {
     "type": "git",
-    "url": "https://github.com/baozouai/genetate-history-method-webpack-plugin.git"
+    "url": "https://github.com/baozouai/generate-history-method-webpack-plugin.git"
   },
   "bugs": {
-    "url": "https://github.com/baozouai/genetate-history-method-webpack-plugin/issues"
+    "url": "https://github.com/baozouai/generate-history-method-webpack-plugin/issues"
+  },
+  "bin": {
+    "generate-history-method": "dist/generate-history-method.cjs"
   },
   "keywords": [
     "webpack",
@@ -20,9 +23,9 @@
     "webpack-plugin",
     "add react history method"
   ],
-  "main": "dist/genetate-history-method-webpack-plugin.cjs",
-  "types": "dist/genetate-history-method-webpack-plugin.d.ts",
-  "module": "./dist/genetate-history-method-webpack-plugin.mjs",
+  "main": "dist/generate-history-method-webpack-plugin.cjs",
+  "types": "dist/generate-history-method-webpack-plugin.d.ts",
+  "module": "./dist/generate-history-method-webpack-plugin.mjs",
   "files": [
     "dist"
   ],

playgrounds/react-router-5-js/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { DefinePlugin } = require('webpack')
-const GenerateHistoryMethodWebpackPlugin = require('../../dist/genetate-history-method-webpack-plugin.cjs')
+const GenerateHistoryMethodWebpackPlugin = require('../../dist/generate-history-method-webpack-plugin.cjs')
 const isHash = process.env.HISTORY_MODE === 'hash'
 module.exports = {
   entry: './src/index.jsx',

playgrounds/react-router-5/.generate-history-method.config.js

@@ -0,0 +1,9 @@
+const path = require('path')
+
+const isHash = process.env.HISTORY_MODE === 'hash'
+module.exports = {
+  pagesRootPath: path.resolve(__dirname, 'src/pages'),
+  originHistoryModuleName: isHash ? '@/hash_history' : '@/browser_history',
+  mode: process.env.HISTORY_MODE,
+  reactRouterVersion: 5, 
+}

playgrounds/react-router-5/package.json

@@ -28,6 +28,7 @@
     "typescript": "^4.9.5",
     "webpack": "^5.87.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "generate-history-method-webpack-plugin": "workspace:*"
   }
 }

playgrounds/react-router-5/tsconfig.json

@@ -22,5 +22,5 @@
     },
 
   },
-  "include": ["src", "./webpack.config.js"]
+  "include": ["src"]
 }

playgrounds/react-router-5/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { DefinePlugin } = require('webpack')
-const GenerateHistoryMethodWebpackPlugin = require('../../dist/genetate-history-method-webpack-plugin.cjs')
+const GenerateHistoryMethodWebpackPlugin = require('../../dist/generate-history-method-webpack-plugin.cjs')
 const isHash = process.env.HISTORY_MODE === 'hash'
 module.exports = {
   entry: './src/index.tsx',
@@ -38,10 +38,7 @@ module.exports = {
       template: 'public/index.html',
     }),
     new GenerateHistoryMethodWebpackPlugin({
-      pagesRootPath: path.resolve(__dirname, 'src/pages'),
       originHistoryModuleName: isHash ? '@/hash_history' : '@/browser_history',
-      mode: process.env.HISTORY_MODE,
-      reactRouterVersion: 5,
     }),
     // ...其他插件
   ],

playgrounds/react-router-6-js/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { DefinePlugin } = require('webpack')
-const GenerateHistoryMethodWebpackPlugin = require('../../dist/genetate-history-method-webpack-plugin.cjs')
+const GenerateHistoryMethodWebpackPlugin = require('../../dist/generate-history-method-webpack-plugin.cjs')
 const isHash = process.env.HISTORY_MODE === 'hash'
 module.exports = {
   entry: './src/index.jsx',

playgrounds/react-router-6/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { DefinePlugin } = require('webpack')
-const GenerateHistoryMethodWebpackPlugin = require('../../dist/genetate-history-method-webpack-plugin.cjs')
+const GenerateHistoryMethodWebpackPlugin = require('../../dist/generate-history-method-webpack-plugin.cjs')
 const isHash = process.env.HISTORY_MODE === 'hash'
 module.exports = {
   entry: './src/index.tsx',

src/bin/generate-history-method.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+import GenerateHistoryMethodWebpackPlugin from '../generate-history-method-webpack-plugin'
+new GenerateHistoryMethodWebpackPlugin().run()

src/const.ts

@@ -0,0 +1,2 @@
+import { resolve } from 'path'
+export const CONFIG_FILE_PATH = resolve(process.cwd(), '.generate-history-method.config.js')

src/genetate-history-method-webpack-plugin.ts → src/generate-history-method-webpack-plugin.ts

@@ -3,6 +3,7 @@ import { dirname, extname, resolve } from 'path'
 import { validate } from 'schema-utils'
 import glob from 'glob'
 import schema from './schema.json'
+import { CONFIG_FILE_PATH } from './const'
 
 const cwdPath = process.cwd()
 
@@ -68,7 +69,26 @@ class GenerateHistoryMethodWebpackPlugin {
   reactRouterVersion: AllowReactRouterVersion
   exportHistoryName: string
 
-  constructor(options: GenerateHistoryMethodWebpackPluginOptions) {
+  getDefaultConfig() {
+    if (existsSync(CONFIG_FILE_PATH)) {
+      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
+      const config = require(CONFIG_FILE_PATH)
+      return config as GenerateHistoryMethodWebpackPluginOptions
+    }
+    return {}
+  }
+
+  combindConfig(config: GenerateHistoryMethodWebpackPluginOptions) {
+    const defaultConfig = this.getDefaultConfig()
+    return {
+      ...defaultConfig,
+      ...config,
+    }
+  }
+
+  constructor(options = {} as GenerateHistoryMethodWebpackPluginOptions) {
+    const combineOptions = this.combindConfig(options)
     const {
       paramsName = 'index.params',
       pageName = 'index.page',
@@ -78,10 +98,9 @@ class GenerateHistoryMethodWebpackPlugin {
       exportHistoryName = 'history',
       pagesRootPath,
       reactRouterVersion,
-    } = options || {}
-
+    } = combineOptions
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    validate(schema as any, options)
+    validate(schema as any, combineOptions)
     this.paramsName = paramsName
     this.pageName = pageName
     this.historyModuleName = historyModuleName
@@ -100,48 +119,52 @@ class GenerateHistoryMethodWebpackPlugin {
     return this.reactRouterVersion === 6
   }
 
-  apply(compiler: any) {
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-    compiler.hooks.beforeCompile.tap(
-      GenerateHistoryMethodWebpackPlugin.name,
-      () => {
-        const filePattern = `${this.pagesRootPath}/**/${this.pageName}.{tsx,js,jsx}` // 匹配的文件模式
+  run() {
+    const filePattern = `${this.pagesRootPath}/**/${this.pageName}.{tsx,js,jsx}` // 匹配的文件模式
 
-        glob(filePattern, (err, files) => {
-          if (err) {
-            console.warn(err)
-            return
-          }
-          const isExistTS = files.some(file => /\.tsx?/.test(extname(file)))
-          this.contents = []
+    glob(filePattern, (err, files) => {
+      if (err) {
+        console.warn(err)
+        return
+      }
+      const isExistTS = files.some(file => /\.tsx?/.test(extname(file)))
+      this.contents = []
 
-          this.addTopImport()
-          this.generateUseHistoryHook(isExistTS)
-          this.generateRouter(isExistTS)
+      this.addTopImport()
+      this.generateUseHistoryHook(isExistTS)
+      this.generateRouter(isExistTS)
 
-          const { urlObj, paramsMap } = this.getParamsMapAndUrlObj(files)
-          const urlKeys = Object.keys(urlObj)
+      const { urlObj, paramsMap } = this.getParamsMapAndUrlObj(files)
+      const urlKeys = Object.keys(urlObj)
 
-          this.generateURL_MAP(urlObj)
-          this.generateFormatUrlFn(isExistTS)
-          this.generateHistory(paramsMap, urlKeys, isExistTS)
-          this.generateUseSearchParamsHook(isExistTS)
+      this.generateURL_MAP(urlObj)
+      this.generateFormatUrlFn(isExistTS)
+      this.generateHistory(paramsMap, urlKeys, isExistTS)
+      this.generateUseSearchParamsHook(isExistTS)
 
-          this.contents.unshift('// @eslint-ignored')
-          const contentStr = this.contents.join('\n')
-          const outputPath = resolve(
-            cwdPath,
+      this.contents.unshift('// @eslint-ignored')
+      const contentStr = this.contents.join('\n')
+      const outputPath = resolve(
+        cwdPath,
               `node_modules/${this.historyModuleName}.${isExistTS ? 'tsx' : 'js'}`,
-          ) // 输出文件路径
-          if (existsSync(outputPath)) {
-            // 已存在则对比是否变化，没变化则没必要写入
-            const originFile = readFileSync(outputPath, 'utf-8')
-            if (originFile === contentStr)
-              return
-          }
-          writeFileSync(outputPath, contentStr)
-        })
+      ) // 输出文件路径
+      if (existsSync(outputPath)) {
+        // 已存在则对比是否变化，没变化则没必要写入
+        const originFile = readFileSync(outputPath, 'utf-8')
+        if (originFile === contentStr)
+          return
+      }
+      writeFileSync(outputPath, contentStr)
+    })
+  }
+
+  apply(compiler: any) {
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+    compiler.hooks.beforeCompile.tap(
+      GenerateHistoryMethodWebpackPlugin.name,
+      () => {
+        this.run()
       },
     )
   }