From 8fdeb173223f5e4ba2de99b7e952c23397feeda4 Mon Sep 17 00:00:00 2001 From: sunhao Date: Thu, 17 Oct 2019 19:09:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=20custom=20build=20?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=8D=95=E7=8B=AC=E7=9A=84=20svg=20build?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- @types/index.d.ts | 51 +++++++++++++------ README.md | 3 +- bin/{build-svg => custom-build} | 2 +- bin/utils.js | 3 +- package.json | 4 +- packages/start/bin/utils.js | 3 +- src/bin/{build-svg.ts => custom-build.ts} | 16 +++--- src/build.ts | 10 ++-- src/config/index.ts | 4 +- ...nfig.ts => webpack.custom-build.config.ts} | 22 +++++--- src/utils/compiler.webpack.ts | 5 +- src/utils/index.ts | 38 +++++++++----- webpack.js | 2 +- 13 files changed, 102 insertions(+), 61 deletions(-) rename bin/{build-svg => custom-build} (77%) rename src/bin/{build-svg.ts => custom-build.ts} (54%) rename src/config/{webpack.svg.config.ts => webpack.custom-build.config.ts} (53%) diff --git a/@types/index.d.ts b/@types/index.d.ts index 0a2abf4..fbde30c 100644 --- a/@types/index.d.ts +++ b/@types/index.d.ts @@ -58,6 +58,11 @@ declare namespace build { * * 仅仅打包dll */ dll: boolean + + /** + * 定制打包 名称 + */ + target: string } namespace parsedArgs { @@ -182,11 +187,7 @@ declare namespace build { */ publicPath?: string } - type renderFn = ( - req: BuildService.Request, - res: expressResponse, - next: NextFunction - ) => void + type renderFn = (req: BuildService.Request, res: expressResponse, next: NextFunction) => void type updateType = 'bundle' | 'clientManifest' | 'template' } @@ -213,12 +214,22 @@ declare namespace build { * dev compiler 参数 */ interface devCompilerOptions extends compilerBaseOptions { - clientCompilerDone: ( - { devMiddleware, stats }: { devMiddleware: any; stats: webpack.Stats } - ) => void - serverCompilerDone: ( - { err, stats, mfs }: { err: any; stats: webpack.Stats; mfs: MFS } - ) => void + clientCompilerDone: ({ + devMiddleware, + stats + }: { + devMiddleware: any + stats: webpack.Stats + }) => void + serverCompilerDone: ({ + err, + stats, + mfs + }: { + err: any + stats: webpack.Stats + mfs: MFS + }) => void app: Express } @@ -237,7 +248,6 @@ declare namespace build { */ namespace ConfigOptions { type webpackMode = 'development' | 'production' | 'none' - type webpackConfigMode = webpackMode | 'svg' /** * getStyle 额外参数 @@ -251,7 +261,7 @@ declare namespace build { */ interface getOptionsInject { argv: BuildService.parsedArgs - mode: ConfigOptions.webpackConfigMode + mode: ConfigOptions.webpackMode /** * 注入的上下文 @@ -317,6 +327,11 @@ declare namespace build { */ webpack?: options.webpack + /** + * 定制打包 配置 + */ + customBuild?: options.customBuild + /** * exclude 排除 第三方包 */ @@ -359,7 +374,13 @@ declare namespace build { base?: Configuration client?: Configuration server?: serverConfig - svg?: serverConfig + } + + /** + * 定制打包 配置 + */ + type customBuild = { + [key in string]: Configuration } /** @@ -381,7 +402,7 @@ declare namespace build { webpack: Configuration } - interface svgConfig extends Configuration { + interface customConfig extends Configuration { webpack: Configuration } diff --git a/README.md b/README.md index 4f637bf..10490c8 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,8 @@ - 开发项目 `service:dev` - 打包项目 `service:build` - 启动项目 `service:start` -- storybook webpack扩展支持 `build-storybook` +- storybook webpack扩展支持 `service:bootstrap-storybook` +- 定制打包 webpack支持 `service:custom-buid` ### 命令参数 帮助 -h diff --git a/bin/build-svg b/bin/custom-build similarity index 77% rename from bin/build-svg rename to bin/custom-build index ff2a9d0..965bb0d 100755 --- a/bin/build-svg +++ b/bin/custom-build @@ -4,4 +4,4 @@ process.env.SPRITE = true const argv = require('./utils').getArgv() -require('../dist/build-svg').start(argv) \ No newline at end of file +require('../dist/custom-build').start(argv) \ No newline at end of file diff --git a/bin/utils.js b/bin/utils.js index f78a2ce..a0b0494 100644 --- a/bin/utils.js +++ b/bin/utils.js @@ -9,6 +9,7 @@ function getArgv() { h: 'help', e: 'entry', o: 'output', + t: 'target', d: 'dll', c: 'config-file', fd: 'fileDescriptor', @@ -16,7 +17,7 @@ function getArgv() { cl: 'clear', v: 'version' } - const string = ['H', 'c', 'fd', 'e', 'o', 'ic'] + const string = ['H', 'c', 'fd', 'e', 'o', 'ic', 't'] const argv = parseArgs(process.argv.slice(2), { alias, boolean: ['h', 'd', 'v', 'cl'], diff --git a/package.json b/package.json index bf472bc..cbc6807 100644 --- a/package.json +++ b/package.json @@ -28,9 +28,9 @@ ], "bin": { "service:build": "./bin/build", - "service:build-svg": "./bin/build-svg", + "service:custom-build": "./bin/custom-build", "service:dev": "./bin/dev", - "bootstrap:storybook": "./bin/storybook" + "service:bootstrap-storybook": "./bin/storybook" }, "main": "./dist/index.js", "typings": "@types/index.d.ts", diff --git a/packages/start/bin/utils.js b/packages/start/bin/utils.js index f78a2ce..a0b0494 100644 --- a/packages/start/bin/utils.js +++ b/packages/start/bin/utils.js @@ -9,6 +9,7 @@ function getArgv() { h: 'help', e: 'entry', o: 'output', + t: 'target', d: 'dll', c: 'config-file', fd: 'fileDescriptor', @@ -16,7 +17,7 @@ function getArgv() { cl: 'clear', v: 'version' } - const string = ['H', 'c', 'fd', 'e', 'o', 'ic'] + const string = ['H', 'c', 'fd', 'e', 'o', 'ic', 't'] const argv = parseArgs(process.argv.slice(2), { alias, boolean: ['h', 'd', 'v', 'cl'], diff --git a/src/bin/build-svg.ts b/src/bin/custom-build.ts similarity index 54% rename from src/bin/build-svg.ts rename to src/bin/custom-build.ts index 705af7d..9db1bc5 100755 --- a/src/bin/build-svg.ts +++ b/src/bin/custom-build.ts @@ -1,21 +1,21 @@ import { BuildService } from '@types' import consola from 'consola' -import { svgBuild } from 'src/build' -import { simpleInitConfig } from 'src/utils' +import { customBuild } from 'src/build' +import { customBuildInitConfig } from 'src/utils' async function buildMain(argv: BuildService.parsedArgs) { - consola.ready(`@bestminr/build-svg v${argv.version}`) + consola.ready(`@bestminr/custom-build v${argv.version}`) consola.start('start with SPRITE mode') - const options = await simpleInitConfig(argv, 'svg') + const options = await customBuildInitConfig(argv, 'development') - svgBuild() + customBuild() - // const webpack: any = options.webpack - // const svgConfig = webpack.svg + // const customBuildConfig: any = options.customBuild // console.log('-------------------------------------') - // console.log('svgConfig', JSON.stringify(svgConfig, null, 2)) + // console.log('customConfig', JSON.stringify(customBuildConfig, null, 2)) // console.log('-------------------------------------') // delete options.webpack + // delete options.customBuild // console.log('options', JSON.stringify(options, null, 2)) // console.log('-------------------------------------') } diff --git a/src/build.ts b/src/build.ts index 15b20f5..663ada9 100644 --- a/src/build.ts +++ b/src/build.ts @@ -19,14 +19,14 @@ export function serverBuild() { ) } -export function svgBuild() { +export function customBuild() { const config = getConfig() - const svgConfig: any = config.webpack ? config.webpack.svg || {} : {} + const customConfig: any = config.customBuild || {} - if (svgConfig) { - svgCompiler(svgConfig) + if (customConfig) { + svgCompiler(customConfig) } else { - consola.fatal('[svgBuild] svgConfig is undefined!') + consola.fatal('[customBuild] customConfig is undefined!') return process.exit(1) } } \ No newline at end of file diff --git a/src/config/index.ts b/src/config/index.ts index ead6bb5..26f4776 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1,9 +1,9 @@ import { getClientConfig, getClientConfigSync } from './webpack.client.config' -import { getSvgConfig } from './webpack.svg.config' +import { getCustomConfig } from './webpack.custom-build.config' import { getServerConfig } from './webpack.server.config' import HappyPack from 'happypack' -export { getClientConfig, getServerConfig, getClientConfigSync, getSvgConfig } +export { getClientConfig, getServerConfig, getClientConfigSync, getCustomConfig } /** * 制作 HappyPack plugin diff --git a/src/config/webpack.svg.config.ts b/src/config/webpack.custom-build.config.ts similarity index 53% rename from src/config/webpack.svg.config.ts rename to src/config/webpack.custom-build.config.ts index 26bee67..2f42a26 100644 --- a/src/config/webpack.svg.config.ts +++ b/src/config/webpack.custom-build.config.ts @@ -4,31 +4,39 @@ import consola from 'consola' import { ConfigOptions } from '@types' -export function getSvgConfig(options: ConfigOptions.options) { +export function getCustomConfig(options: ConfigOptions.options, target: string) { if (!(options.webpack && options.webpack.mode)) { consola.fatal( - '[getSvgConfig] options.webpack or options.webpack.mode is undefined' + '[getCustomConfig] options.webpack or options.webpack.mode is undefined' ) return process.exit(1) } - if (options.webpack.svg) { - const svg = options.webpack.svg.webpack || options.webpack.svg || {} + + if (!(options.customBuild && options.customBuild[target])) { + consola.fatal( + `[getCustomConfig] options.customBuild or options.customBuild[${target}] is undefined` + ) + return process.exit(1) + } + + if (options.customBuild[target]) { + const customBuild = options.customBuild[target] || {} const mode = options.webpack.mode || 'production' const base: any = options.webpack ? options.webpack.base || {} : {} return (merge as any)( getCommonBaseConfig(options), { - name: 'svg', + name: target, mode, devtool: false, output: base.output, resolve: base.resolve }, - svg + customBuild ) } else { consola.fatal( - '[getServerConfig] options.webpack.svg is undefined' + `[getServerConfig] options.webpack[${target}] is undefined` ) return process.exit(1) } diff --git a/src/utils/compiler.webpack.ts b/src/utils/compiler.webpack.ts index e541c7c..d8cbdc4 100644 --- a/src/utils/compiler.webpack.ts +++ b/src/utils/compiler.webpack.ts @@ -155,7 +155,7 @@ export function compiler( } -export function svgCompiler(config: ConfigOptions.options.svgConfig) { +export function svgCompiler(config: ConfigOptions.options.customConfig) { const compiler = getCompiler(config) compiler.run((err, stats) => { console.log( @@ -175,7 +175,7 @@ export function svgCompiler(config: ConfigOptions.options.svgConfig) { */ export function compilerConfig( configOptions: BuildService.parsedArgs.config, - mode: ConfigOptions.webpackConfigMode, + mode: ConfigOptions.webpackMode, { rootDir }: { rootDir: string } ): Promise<() => webpack.Configuration> { return new Promise(function(this: any, done) { @@ -187,7 +187,6 @@ export function compilerConfig( consola.fatal('compilerConfig: entry or output is undefined') return process.exit(1) } - if (mode === 'svg') mode = 'development' webpackConfig.mode = mode webpackConfig.entry = { [entryName]: entry diff --git a/src/utils/index.ts b/src/utils/index.ts index 5afa446..5920264 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -2,7 +2,7 @@ import { resolve } from 'path' import { ConfigOptions, BuildService } from '@types' import { - getSvgConfig, + getCustomConfig, getClientConfig, getServerConfig, getClientConfigSync @@ -192,20 +192,30 @@ function baseSetWebpack(options: ConfigOptions.options) { */ async function setWebpack( options: ConfigOptions.options, - mode: ConfigOptions.webpackConfigMode + mode: ConfigOptions.webpackMode ) { options.webpack = options.webpack || {} - if (mode === 'svg') { - options.webpack.mode = 'development' - options.webpack.svg = getSvgConfig(options) - } else { - options.webpack.mode = mode - options.webpack.client = await getClientConfig(options) - baseSetWebpack(options) - } + options.webpack.mode = mode + options.webpack.client = await getClientConfig(options) + baseSetWebpack(options) return options } +function setCustomBuild( + options: ConfigOptions.options, + argv: BuildService.parsedArgs, + mode: ConfigOptions.webpackMode +) { + const target = argv.target + if (!target) { + consola.fatal('[setCustomBuild] target is undefined!') + return process.exit(1) + } + options.webpack = options.webpack || {} + options.webpack.mode = mode + options.customBuild = getCustomConfig(options, target) +} + /** * 同步 设置 webpack * @param options build 通用 webpack 配置 @@ -323,7 +333,7 @@ export function getUserConfigSync( async function getUserConfig( configOptions: BuildService.parsedArgs.config, injectContext: any, - mode: ConfigOptions.webpackConfigMode, + mode: ConfigOptions.webpackMode, argv: BuildService.parsedArgs ) { const rootDir = getRootDir(argv) @@ -409,9 +419,9 @@ export async function initConfig( return options } -export async function simpleInitConfig( +export async function customBuildInitConfig( argv: BuildService.parsedArgs, - mode: ConfigOptions.webpackConfigMode + mode: ConfigOptions.webpackMode ) { const configOptions = getConfigFileOptions(argv) @@ -422,7 +432,7 @@ export async function simpleInitConfig( argv ) - await setWebpack(options, mode) + await setCustomBuild(options, argv, mode) options.buildVersion = argv.version diff --git a/webpack.js b/webpack.js index a936c60..76fecd0 100644 --- a/webpack.js +++ b/webpack.js @@ -10,7 +10,7 @@ module.exports = { entry: { index: resolve('./src/index.ts'), build: resolve('./src/bin/build.ts'), - 'build-svg': resolve('./src/bin/build-svg.ts'), + 'custom-build': resolve('./src/bin/custom-build.ts'), dev: resolve('./src/bin/dev.ts'), 'bootstrap-storybook': resolve('./src/bin/bootstrap-storybook.ts'), 'empty-module': resolve('./src/utils/empty-module.js')