feat: 完成 custom build 移除单独的 svg build

@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
       }
 

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
 

bin/build-svg → bin/custom-build

@@ -4,4 +4,4 @@ process.env.SPRITE = true
 
 const argv = require('./utils').getArgv()
 
-require('../dist/build-svg').start(argv)
+require('../dist/custom-build').start(argv)

bin/utils.js

@@ -9,14 +9,15 @@ function getArgv() {
     h: 'help',
     e: 'entry',
     o: 'output',
+    t: 'target',
     d: 'dll',
     c: 'config-file',
     fd: 'fileDescriptor',
     ic: 'injectContext',
     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'],

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",

packages/start/bin/utils.js

@@ -9,14 +9,15 @@ function getArgv() {
     h: 'help',
     e: 'entry',
     o: 'output',
+    t: 'target',
     d: 'dll',
     c: 'config-file',
     fd: 'fileDescriptor',
     ic: 'injectContext',
     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'],

src/bin/build-svg.ts → 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('-------------------------------------')
 }

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)
   }
 }

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

src/config/webpack.svg.config.ts → 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)
   }

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

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
 

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')