From f9cc938a7ec26c805ac9b09baa4b41c372b476e2 Mon Sep 17 00:00:00 2001
From: baozouai
Date: Tue, 18 Jul 2023 21:35:47 +0800
Subject: [PATCH] feat: add genetate-history-method bin and support
.generate-history-method.config.js
---
README-zh_CN.md | 20 ++--
README.md | 20 ++--
build.config.ts | 1 +
package.json | 17 +--
.../react-router-5-js/webpack.config.js | 2 +-
.../.generate-history-method.config.js | 9 ++
playgrounds/react-router-5/package.json | 3 +-
playgrounds/react-router-5/tsconfig.json | 2 +-
playgrounds/react-router-5/webpack.config.js | 5 +-
.../react-router-6-js/webpack.config.js | 2 +-
playgrounds/react-router-6/webpack.config.js | 2 +-
pnpm-lock.yaml | 3 +
src/bin/generate-history-method.ts | 3 +
src/const.ts | 2 +
...generate-history-method-webpack-plugin.ts} | 103 +++++++++++-------
15 files changed, 118 insertions(+), 76 deletions(-)
create mode 100644 playgrounds/react-router-5/.generate-history-method.config.js
create mode 100644 src/bin/generate-history-method.ts
create mode 100644 src/const.ts
rename src/{genetate-history-method-webpack-plugin.ts => generate-history-method-webpack-plugin.ts} (79%)
diff --git a/README-zh_CN.md b/README-zh_CN.md
index 7a5cade..26c5fd5 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -1,6 +1,6 @@
-
genetate-history-method-webpack-plugin
+generate-history-method-webpack-plugin
@@ -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).
\ No newline at end of file
+generate-history-method-webpack-plugin 遵循 [MIT 协议](./LICENSE).
\ No newline at end of file
diff --git a/README.md b/README.md
index 93fe4a2..7b4eb7c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-
genetate-history-method-webpack-plugin
+
generate-history-method-webpack-plugin
@@ -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).
\ No newline at end of file
+generate-history-method-webpack-plugin is [MIT licensed](./LICENSE).
\ No newline at end of file
diff --git a/build.config.ts b/build.config.ts
index 5e31538..0f64173 100644
--- a/build.config.ts
+++ b/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: {
diff --git a/package.json b/package.json
index 40cbb3c..ce8a59e 100644
--- a/package.json
+++ b/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 ",
"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"
],
diff --git a/playgrounds/react-router-5-js/webpack.config.js b/playgrounds/react-router-5-js/webpack.config.js
index 3a4c4a9..218964a 100644
--- a/playgrounds/react-router-5-js/webpack.config.js
+++ b/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',
diff --git a/playgrounds/react-router-5/.generate-history-method.config.js b/playgrounds/react-router-5/.generate-history-method.config.js
new file mode 100644
index 0000000..6a5de2c
--- /dev/null
+++ b/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,
+}
\ No newline at end of file
diff --git a/playgrounds/react-router-5/package.json b/playgrounds/react-router-5/package.json
index a5101d6..c52e649 100644
--- a/playgrounds/react-router-5/package.json
+++ b/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:*"
}
}
diff --git a/playgrounds/react-router-5/tsconfig.json b/playgrounds/react-router-5/tsconfig.json
index e4fe8e2..1e8b7df 100644
--- a/playgrounds/react-router-5/tsconfig.json
+++ b/playgrounds/react-router-5/tsconfig.json
@@ -22,5 +22,5 @@
},
},
- "include": ["src", "./webpack.config.js"]
+ "include": ["src"]
}
diff --git a/playgrounds/react-router-5/webpack.config.js b/playgrounds/react-router-5/webpack.config.js
index fb95bef..54c6f57 100644
--- a/playgrounds/react-router-5/webpack.config.js
+++ b/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,
}),
// ...其他插件
],
diff --git a/playgrounds/react-router-6-js/webpack.config.js b/playgrounds/react-router-6-js/webpack.config.js
index 1d34a05..9a98e25 100644
--- a/playgrounds/react-router-6-js/webpack.config.js
+++ b/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',
diff --git a/playgrounds/react-router-6/webpack.config.js b/playgrounds/react-router-6/webpack.config.js
index f6b2da4..d3c0e28 100644
--- a/playgrounds/react-router-6/webpack.config.js
+++ b/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',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 545bb60..be8d06e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -90,6 +90,9 @@ importers:
'@types/react-router-dom':
specifier: 5.3.3
version: 5.3.3
+ generate-history-method-webpack-plugin:
+ specifier: workspace:*
+ version: link:../..
html-webpack-plugin:
specifier: ^5.5.3
version: 5.5.3(webpack@5.87.0)
diff --git a/src/bin/generate-history-method.ts b/src/bin/generate-history-method.ts
new file mode 100644
index 0000000..27b7ee8
--- /dev/null
+++ b/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()
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000..abd0af6
--- /dev/null
+++ b/src/const.ts
@@ -0,0 +1,2 @@
+import { resolve } from 'path'
+export const CONFIG_FILE_PATH = resolve(process.cwd(), '.generate-history-method.config.js')
diff --git a/src/genetate-history-method-webpack-plugin.ts b/src/generate-history-method-webpack-plugin.ts
similarity index 79%
rename from src/genetate-history-method-webpack-plugin.ts
rename to src/generate-history-method-webpack-plugin.ts
index a32e154..04beea8 100644
--- a/src/genetate-history-method-webpack-plugin.ts
+++ b/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()
},
)
}