From b2e906c48ac33dcb79e19c79646429feb9c728a1 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Thu, 19 Aug 2021 15:16:50 +0800 Subject: [PATCH 1/5] fix: migrate webpack-dev-server to 4.0.0 --- .eslintrc.js | 10 +++++++--- packages/build-scripts/package.json | 3 +-- packages/build-scripts/src/commands/start.ts | 2 +- packages/build-scripts/src/core/Context.ts | 2 +- packages/build-scripts/src/service/start.ts | 13 +++++-------- packages/build-scripts/src/types/index.ts | 14 ++++++++++++++ 6 files changed, 29 insertions(+), 15 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6e6de19..4a30108 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,9 +16,13 @@ const jsRules = deepmerge(eslint, { const tsRules = deepmerge(tslint, { rules: { ...commonRules, - '@typescript-eslint/explicit-function-return-type': ['warn', { - allowTypedFunctionExpressions: true, - }], + 'no-useless-constructor': 0, + '@typescript-eslint/explicit-function-return-type': [ + 'warn', + { + allowTypedFunctionExpressions: true, + }, + ], }, }); diff --git a/packages/build-scripts/package.json b/packages/build-scripts/package.json index d8a1da1..6bd820f 100644 --- a/packages/build-scripts/package.json +++ b/packages/build-scripts/package.json @@ -51,12 +51,11 @@ "@types/semver": "^6.2.0", "@types/webpack": "^4.41.30", "@types/webpack-chain": "^5.2.0", - "@types/webpack-dev-server": "^3.11.5", "jest": "^27.0.6", "package-json": "^6.5.0", "ts-jest": "^27.0.3", "typescript": "^3.7.2", "webpack": "^5.0.0", - "webpack-dev-server": "^3.7.2" + "webpack-dev-server": "^4.0.0" } } diff --git a/packages/build-scripts/src/commands/start.ts b/packages/build-scripts/src/commands/start.ts index 1b52e57..f397c4c 100644 --- a/packages/build-scripts/src/commands/start.ts +++ b/packages/build-scripts/src/commands/start.ts @@ -1,6 +1,6 @@ import WebpackService from '../service/WebpackService'; import { IContextOptions, ITaskConfig } from '../core/Context'; -import WebpackDevServer = require('webpack-dev-server'); +import { WebpackDevServer } from '../types'; type StartResult = void | ITaskConfig[] | WebpackDevServer; diff --git a/packages/build-scripts/src/core/Context.ts b/packages/build-scripts/src/core/Context.ts index 19e7969..58f5c4e 100644 --- a/packages/build-scripts/src/core/Context.ts +++ b/packages/build-scripts/src/core/Context.ts @@ -12,6 +12,7 @@ import { MaybeArray, MaybePromise, JsonArray, + WebpackDevServer, } from '../types'; import hijackWebpackResolve from '../utils/hijackWebpack'; import loadConfig from '../utils/loadConfig'; @@ -20,7 +21,6 @@ import assert = require('assert'); import _ = require('lodash'); import camelCase = require('camelcase'); import WebpackChain = require('webpack-chain'); -import WebpackDevServer = require('webpack-dev-server'); import deepmerge = require('deepmerge'); import log = require('../utils/log'); diff --git a/packages/build-scripts/src/service/start.ts b/packages/build-scripts/src/service/start.ts index f191d59..4d648e0 100644 --- a/packages/build-scripts/src/service/start.ts +++ b/packages/build-scripts/src/service/start.ts @@ -2,13 +2,12 @@ import chalk from 'chalk'; import { WebpackOptionsNormalized } from 'webpack'; import Context, { ITaskConfig } from '../core/Context'; import webpackStats from '../utils/webpackStats'; -import { IRunOptions } from '../types'; +import { IRunOptions, WebpackDevServer } from '../types'; import deepmerge = require('deepmerge'); -import WebpackDevServer = require('webpack-dev-server'); import prepareURLs = require('../utils/prepareURLs'); import log = require('../utils/log'); -type DevServer = Record; +type DevServerConfig = Record; export = async function(context: Context, options?: IRunOptions): Promise { const { eject } = options || {}; @@ -28,7 +27,7 @@ export = async function(context: Context, options?: IRunOptions): Promise { if (err) { log.info( diff --git a/packages/build-scripts/src/types/index.ts b/packages/build-scripts/src/types/index.ts index ed933b6..87783e8 100644 --- a/packages/build-scripts/src/types/index.ts +++ b/packages/build-scripts/src/types/index.ts @@ -1,3 +1,5 @@ +import type webpack from 'webpack'; + export interface IHash { [name: string]: T; } @@ -15,3 +17,15 @@ export type MaybePromise = T | Promise; export interface IRunOptions { eject?: boolean; } + +export declare class WebpackDevServer { + constructor(config: Record, webpack: webpack.Compiler | webpack.MultiCompiler); + + public start(callback?: () => void): Promise; + + public startCallback(callback?: () => void): void; + + public stop(callback?: () => void): Promise; + + public stopCallback(callback?: () => void): void; +} \ No newline at end of file From fa79236bbe9e72d86ab4be2820796fef4c5406ad Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Wed, 25 Aug 2021 11:00:23 +0800 Subject: [PATCH 2/5] fix: types of webpack-dev-server --- packages/build-scripts/package.json | 1 + packages/build-scripts/src/commands/start.ts | 2 +- packages/build-scripts/src/core/Context.ts | 2 +- packages/build-scripts/src/service/start.ts | 18 +++++------------- packages/build-scripts/src/types/index.ts | 12 ------------ 5 files changed, 8 insertions(+), 27 deletions(-) diff --git a/packages/build-scripts/package.json b/packages/build-scripts/package.json index 6bd820f..427a7c9 100644 --- a/packages/build-scripts/package.json +++ b/packages/build-scripts/package.json @@ -51,6 +51,7 @@ "@types/semver": "^6.2.0", "@types/webpack": "^4.41.30", "@types/webpack-chain": "^5.2.0", + "@types/webpack-dev-server": "^4.0.0", "jest": "^27.0.6", "package-json": "^6.5.0", "ts-jest": "^27.0.3", diff --git a/packages/build-scripts/src/commands/start.ts b/packages/build-scripts/src/commands/start.ts index f397c4c..d9640bc 100644 --- a/packages/build-scripts/src/commands/start.ts +++ b/packages/build-scripts/src/commands/start.ts @@ -1,6 +1,6 @@ import WebpackService from '../service/WebpackService'; import { IContextOptions, ITaskConfig } from '../core/Context'; -import { WebpackDevServer } from '../types'; +import type WebpackDevServer from 'webpack-dev-server'; type StartResult = void | ITaskConfig[] | WebpackDevServer; diff --git a/packages/build-scripts/src/core/Context.ts b/packages/build-scripts/src/core/Context.ts index 58f5c4e..01d91db 100644 --- a/packages/build-scripts/src/core/Context.ts +++ b/packages/build-scripts/src/core/Context.ts @@ -5,6 +5,7 @@ import webpack, { MultiStats } from 'webpack'; import { Logger } from 'npmlog'; import { AggregatedResult } from '@jest/test-result'; import { GlobalConfig } from '@jest/types/build/Config'; +import type WebpackDevServer from 'webpack-dev-server'; import { IHash, Json, @@ -12,7 +13,6 @@ import { MaybeArray, MaybePromise, JsonArray, - WebpackDevServer, } from '../types'; import hijackWebpackResolve from '../utils/hijackWebpack'; import loadConfig from '../utils/loadConfig'; diff --git a/packages/build-scripts/src/service/start.ts b/packages/build-scripts/src/service/start.ts index 4d648e0..c35b2de 100644 --- a/packages/build-scripts/src/service/start.ts +++ b/packages/build-scripts/src/service/start.ts @@ -2,7 +2,8 @@ import chalk from 'chalk'; import { WebpackOptionsNormalized } from 'webpack'; import Context, { ITaskConfig } from '../core/Context'; import webpackStats from '../utils/webpackStats'; -import { IRunOptions, WebpackDevServer } from '../types'; +import type WebpackDevServer from 'webpack-dev-server'; +import { IRunOptions } from '../types'; import deepmerge = require('deepmerge'); import prepareURLs = require('../utils/prepareURLs'); import log = require('../utils/log'); @@ -89,7 +90,7 @@ export = async function(context: Context, options?: IRunOptions): Promise { - if (err) { - log.info( - 'WEBPACK', - chalk.red('[ERR]: Failed to start webpack dev server'), - ); - log.error('WEBPACK', err.stack || err.toString()); - } - - await applyHook(`after.${command}.devServer`, { + () => { + applyHook(`after.${command}.devServer`, { url: serverUrl, urls, devServer, - err, }); }, ); diff --git a/packages/build-scripts/src/types/index.ts b/packages/build-scripts/src/types/index.ts index 87783e8..a9ddae9 100644 --- a/packages/build-scripts/src/types/index.ts +++ b/packages/build-scripts/src/types/index.ts @@ -17,15 +17,3 @@ export type MaybePromise = T | Promise; export interface IRunOptions { eject?: boolean; } - -export declare class WebpackDevServer { - constructor(config: Record, webpack: webpack.Compiler | webpack.MultiCompiler); - - public start(callback?: () => void): Promise; - - public startCallback(callback?: () => void): void; - - public stop(callback?: () => void): Promise; - - public stopCallback(callback?: () => void): void; -} \ No newline at end of file From 556ae387b3676a7ab2b3f97cfe54821aa5b9cf20 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Wed, 25 Aug 2021 11:02:28 +0800 Subject: [PATCH 3/5] chore: lint --- .eslintrc.js | 1 - 1 file changed, 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4a30108..6fb5a2a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,7 +16,6 @@ const jsRules = deepmerge(eslint, { const tsRules = deepmerge(tslint, { rules: { ...commonRules, - 'no-useless-constructor': 0, '@typescript-eslint/explicit-function-return-type': [ 'warn', { From fde1e5a725c43370230758956192b383588c6f36 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Wed, 25 Aug 2021 11:05:33 +0800 Subject: [PATCH 4/5] chore: remove useless code --- packages/build-scripts/src/types/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/build-scripts/src/types/index.ts b/packages/build-scripts/src/types/index.ts index a9ddae9..ed933b6 100644 --- a/packages/build-scripts/src/types/index.ts +++ b/packages/build-scripts/src/types/index.ts @@ -1,5 +1,3 @@ -import type webpack from 'webpack'; - export interface IHash { [name: string]: T; } From 01b8c75a6ded6aa3a7be6b574ed28771ed86bac5 Mon Sep 17 00:00:00 2001 From: ClarkXia Date: Wed, 25 Aug 2021 11:37:23 +0800 Subject: [PATCH 5/5] chore: changelog and readme --- README.md | 46 ++++++++++++++++++++++++----- packages/build-scripts/CHANGELOG.md | 9 ++++-- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index eed8a82..d6c09d3 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ Options: build-scripts 本身不耦合具体的工程构建逻辑，所以如果希望上述的命令能够正常工作，需要在配置文件中指定对应的插件。插件内部将会设置具体的 webpack 配置和 jest 测试配置。 -`build.json` 作为 build-scripts 默认的工程配置，在 build-scripts 执行时会默认在根目录读取该文件。 +`build.json` 作为 build-scripts 默认的工程配置，在 build-scripts 执行时会默认在根目录读取该文件。如果存在复杂场景可以通过 cli 参数 `--config` 指定 js / ts 文件。 配置方式： @@ -171,7 +171,8 @@ context 参数包含运行时的各种环境信息： - `command` 当前运行命令 `start|build|test` - `commandArgs` script 命令执行时接受到的参数 - `rootDir` 项目根目录 -- `userConfig` 用户在 build.json 中配置的内容 +- `originalUserConfig` 用户在 build.json 中配置的原始内容 +- `userConfig` 用户配置，包含被 modifyUserConfig 修改后的结果 - `pkg 项目` package.json 中的内容 - `webpack` webpack 实例，插件中针对 webpack 的逻辑均使用此方式引入 @@ -235,7 +236,7 @@ start 命令： | before.start.run | { args: CommandArgs; webpackConfig: WebpackConfig[] } | webpack 执行构建之前 | | after.start.compile | { url: string; stats: WebpackAssets; isFirstCompile: boolean } | 编译结束，每次重新编译都会执行 | | before.start.devServer | { url: string; devServer: WebpackDevServer } | server 中间件加载后，webpack devServer 启动前 | -| after.start.devServer | { url: string; devServer: WebpackDevServer; err: Error } | webpack devServer 启动后 | +| after.start.devServer | { url: string; devServer: WebpackDevServer } | webpack devServer 启动后 | build 命令： @@ -354,7 +355,7 @@ module.exports = ({ modifyConfigRegistration }) => { #### modifyUserConfig -通过 modifyUserConfig 可以修改通过 registerUserConfig 注册的基础配置，在插件中快速复用基础配置的处理逻辑。 +通过 modifyUserConfig 可以修改通过 registerUserConfig 注册的基础配置，在插件中快速复用基础配置的处理逻辑： ```js module.exports = ({ modifyUserConfig }) => { @@ -365,6 +366,22 @@ module.exports = ({ modifyUserConfig }) => { }; ``` +通过指定具体修改的基础配置，快速完成配置的修改： + +```js +module.exports = ({ modifyUserConfig }) => { + modifyUserConfig('entry', 'src/app'); + + // 通过对象路径修改，比如修改对象 { outputAssetsPath: { js: 'js-dist'} } 可通过以下方式 + modifyUserConfig('outputAssetsPath.js', 'js'); + + // 支持深合并，默认情况下 modifyUserConfig 将覆盖原有配置，通过配置参数支持配置的合并 + modifyUserConfig('outputAssetsPath', { + js: 'js-output' + }, { deepmerge: true }); +}; +``` + > API 执行的生命周期：所有插件对于修改配置函数将保存至 modifyConfigRegistration 中，在 runUserConfig 执行前完成对当前 userConfig 内容的修改 #### registerCliOption @@ -391,7 +408,7 @@ module.exports = ({ registerCliOption }) => { ```js module.exports = ({ modifyConfigRegistration }) => { - modifyConfigRegistration('https', cliRegistration => { + modifyCliRegistration('https', cliRegistration => { return { ...cliRegistration, // 修正 commands 字段 @@ -444,7 +461,7 @@ module.exports = ({ getValue }) => { #### registerMethod -向工程核心注册相关方法，方便其他插件进行复用。 +向工程核心注册相关方法，方便其他插件进行复用： ```js module.exports = ({ registerMethod }) => { @@ -456,6 +473,20 @@ module.exports = ({ registerMethod }) => { }; ``` +registerMethod 注册方式时，通过参数指定可以获取调用该方法的具体插件名： + +```js +module.exports = ({ registerMethod }) => { + // 注册方法 + registerMethod('pipeAppRouterBefore', (pluginName) => (content) => { + console.log('plugin name', pluginName); + console.log('content', content); + // 执行相关注册逻辑，可以返回相应的值 + return true; + }, { pluginName: true }); +}; +``` + #### applyMethod 调用其他插件的注册方法 @@ -470,7 +501,7 @@ module.exports = ({ applyMethod }) => { ## 升级到 1.x -build-scripts 1.x 中不再耦合具体的 webpack 和 jest 版本，建议在基础插件中依赖 webpack 和 jest，并由具体插件根据具体的依赖版本进行基础链路的配置。 +build-scripts 1.x 中不再耦合具体的 webpack、webpack-dev-server 和 jest 版本，建议在基础插件中依赖 webpack 和 jest，并由具体插件根据具体的依赖版本进行基础链路的配置。 如果历史项目升级，可以在 package.json 中增加依赖： @@ -479,6 +510,7 @@ build-scripts 1.x 中不再耦合具体的 webpack 和 jest 版本，建议在 "devDependencies": { + "jest": "^26.4.2", + "webpack": "^4.27.1", ++ "webpack-dev-server": "^4.0.0", - "@alib/build-scripts": "^0.1.0", + "build-scripts": "^1.0.0", } diff --git a/packages/build-scripts/CHANGELOG.md b/packages/build-scripts/CHANGELOG.md index 07a7193..a771aa0 100644 --- a/packages/build-scripts/CHANGELOG.md +++ b/packages/build-scripts/CHANGELOG.md @@ -2,8 +2,13 @@ ## 1.1.0 -- [fix] move webpack-dev-server to peerDependencies -- [feat] enhance regsiterMethod API, make it possible to get plugin name when applyMethod +- [refactor] support custom command by extend Context +- [feat] support config written with typescript and es module +- [feat] enhance API modifyUserConfig while modify userConfig by config path `modifyUserConfig('output.path', 'dir')` +- [feat] support deep merge of modifyUserConfig by options +- [feat] enhance registerMethod API, make it possible to get plugin name when applyMethod +- [feat] add `originalUserConfig` to plugin API +- [fix] move webpack-dev-server to peerDependencies and migrate webpack-dev-server to 4.0.0 ## 1.0.1