feat: 添加 build-svg 命令

@types/index.d.ts

@@ -237,6 +237,7 @@ declare namespace build {
    */
   namespace ConfigOptions {
     type webpackMode = 'development' | 'production' | 'none'
+    type webpackConfigMode =  webpackMode | 'svg'
 
     /**
      * getStyle 额外参数
@@ -250,7 +251,7 @@ declare namespace build {
      */
     interface getOptionsInject {
       argv: BuildService.parsedArgs
-      mode: ConfigOptions.webpackMode
+      mode: ConfigOptions.webpackConfigMode
 
       /**
        * 注入的上下文
@@ -358,6 +359,7 @@ declare namespace build {
         base?: Configuration
         client?: Configuration
         server?: serverConfig
+        svg?: serverConfig
       }
 
       /**
@@ -379,6 +381,10 @@ declare namespace build {
         webpack: Configuration
       }
 
+      interface svgConfig extends Configuration {
+        webpack: Configuration
+      }
+
       /**
        * server 插件 配置
        */

bin/build-svg

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+process.env.SPRITE = true
+
+const argv = require('./utils').getArgv()
+
+require('../dist/build-svg').start(argv)

doc/src/store/editor/index.ts

@@ -1,14 +1,10 @@
 export * from './type'
 
-import Vue from 'vue'
-import Vuex from 'vuex'
 import actions, { dispatch } from './actions'
 import mutations, { commit, getState } from './mutations'
 import getters from './getters'
 import state from './state'
 
-Vue.use(Vuex)
-
 export default {
   namespaced: true,
   state: state(),

package.json

@@ -28,6 +28,7 @@
   ],
   "bin": {
     "service:build": "./bin/build",
+    "service:build-svg": "./bin/build-svg",
     "service:dev": "./bin/dev",
     "bootstrap:storybook": "./bin/storybook"
   },

src/bin/build-svg.ts

@@ -0,0 +1,23 @@
+import { BuildService } from '@types'
+import consola from 'consola'
+import { svgBuild } from 'src/build'
+import { simpleInitConfig } from 'src/utils'
+
+async function buildMain(argv: BuildService.parsedArgs) {
+  consola.ready(`@bestminr/build-svg v${argv.version}`)
+  consola.start('start with SPRITE mode')
+  const options = await simpleInitConfig(argv, 'svg')
+
+  svgBuild()
+
+  // const webpack: any = options.webpack
+  // const svgConfig = webpack.svg
+  // console.log('-------------------------------------')
+  // console.log('svgConfig', JSON.stringify(svgConfig, null, 2))
+  // console.log('-------------------------------------')
+  // delete options.webpack
+  // console.log('options', JSON.stringify(options, null, 2))
+  // console.log('-------------------------------------')
+}
+
+export { buildMain as start }

src/build.ts

@@ -1,5 +1,6 @@
 import { getConfig } from 'src/utils'
-import { compiler } from 'src-utils-compiler'
+import { compiler, svgCompiler } from 'src-utils-compiler'
+import consola from 'consola'
 
 export function serverBuild() {
   const config = getConfig()
@@ -17,3 +18,15 @@ export function serverBuild() {
     'production'
   )
 }
+
+export function svgBuild() {
+  const config = getConfig()
+  const svgConfig: any = config.webpack ? config.webpack.svg || {} : {}
+
+  if (svgConfig) {
+    svgCompiler(svgConfig)
+  } else {
+    consola.fatal('[svgBuild] svgConfig is undefined!')
+    return process.exit(1)
+  }
+}

src/config/index.ts

@@ -1,8 +1,9 @@
 import { getClientConfig, getClientConfigSync } from './webpack.client.config'
+import { getSvgConfig } from './webpack.svg.config'
 import { getServerConfig } from './webpack.server.config'
 import HappyPack from 'happypack'
 
-export { getClientConfig, getServerConfig, getClientConfigSync }
+export { getClientConfig, getServerConfig, getClientConfigSync, getSvgConfig }
 
 /**
  * 制作 HappyPack plugin

src/config/webpack.base.config.ts

@@ -12,107 +12,109 @@ import { ConfigOptions } from '@types'
 
 export function getBaseConfig(options: ConfigOptions.options) {
   if (!(options.babelrc && options.webpack)) {
-    consola.fatal(
-      'getBaseConfig options.babelrc or options.webpack is undefined'
-    )
+    consola.fatal('getBaseConfig options.babelrc or options.webpack is undefined')
     return process.exit(1)
   }
+  const base = options.webpack ? options.webpack.base || {} : {}
+  // consola.fatal(tsLoader)
+
+  return (merge as any)(getCommonBaseConfig(options), base)
+}
+
+export function getCommonBaseConfig(options: ConfigOptions.options) {
+  if (!(options.babelrc && options.webpack)) {
+    consola.fatal('[getCommonBaseConfig] options.babelrc or options.webpack is undefined')
+    return process.exit(1)
+  }
+
   const mode = options.webpack.mode || 'production'
   const isProd = mode === 'production'
-  const base = options.webpack ? options.webpack.base || {} : {}
+  const babelLoder = {
+    loader: 'babel-loader',
+    options: options.babelrc
+  }
   const tsLoader: any = {
     loader: 'ts-loader',
     options: {
       appendTsSuffixTo: [/\.vue$/],
       transpileOnly: true,
-      happyPackMode: true,
+      happyPackMode: true
     }
   }
   if (options.tsconfig) {
     tsLoader.options.context = options.rootDir
     tsLoader.options.configFile = options.tsconfig
   }
-  // consola.fatal(tsLoader)
-
-  const babelLoder = {
-    loader: 'babel-loader',
-    options: options.babelrc
-  }
-
-  return (merge as any)(
-    getCommonConfig(mode),
-    {
-      mode: isProd ? 'production' : 'development',
-      context: options.rootDir,
-      devtool: isProd ? false : '#cheap-module-source-map',
-      output: {
-        path: './dist',
-        filename: '[chunkhash].js'
-      },
-      resolve: {
-        extensions: ['.ts', '.js', '.vue', '.json']
-      },
-      module: {
-        noParse: /es6-promise\.js$/,
-        rules: [
-          {
-            test: /\.vue$/,
-            loader: 'vue-loader',
-            options: {
-              compilerOptions: {
-                preserveWhitespace: false
-              }
+  return (merge as any)(getCommonConfig(mode), {
+    mode: isProd ? 'production' : 'development',
+    context: options.rootDir,
+    devtool: isProd ? false : '#cheap-module-source-map',
+    output: {
+      path: './dist',
+      filename: '[chunkhash].js'
+    },
+    resolve: {
+      extensions: ['.ts', '.js', '.vue', '.json']
+    },
+    module: {
+      noParse: /es6-promise\.js$/,
+      rules: [
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader',
+          options: {
+            compilerOptions: {
+              preserveWhitespace: false
             }
-          },
-          {
-            test: /\.js$/,
-            loader: 'happypack/loader?id=babel',
-            exclude: /node_modules/
-          },
-          {
-            test: /\.tsx?$/,
-            loader: 'happypack/loader?id=ts',
-            exclude: /node_modules/
           }
-        ]
-      },
-      optimization: {
-        minimizer: [
-          new UglifyJsPlugin({
-            uglifyOptions: {
-              compress: {
-                warnings: false
-              },
-              output: {
-                ecma: 5
-              },
-              ecma: 8
+        },
+        {
+          test: /\.js$/,
+          loader: 'happypack/loader?id=babel',
+          exclude: /node_modules/
+        },
+        {
+          test: /\.tsx?$/,
+          loader: 'happypack/loader?id=ts',
+          exclude: /node_modules/
+        }
+      ]
+    },
+    optimization: {
+      minimizer: [
+        new UglifyJsPlugin({
+          uglifyOptions: {
+            compress: {
+              warnings: false
+            },
+            output: {
+              ecma: 5
             },
-            parallel: true
+            ecma: 8
+          },
+          parallel: true
+        })
+      ]
+    },
+    performance: {
+      maxEntrypointSize: 1024 * 300,
+      maxAssetSize: 1024 * 300,
+      hints: isProd ? 'warning' : false
+    },
+    plugins: (isProd
+      ? []
+      : [
+          new Webpackbar(),
+          new FriendlyErrorsPlugin(),
+          new ForkTsCheckerWebpackPlugin({
+            vue: true, // 开启以检测 .vue 文件中的类型错误
+            ignoreDiagnostics: [2339]
           })
         ]
-      },
-      performance: {
-        maxEntrypointSize: 1024 * 300,
-        maxAssetSize: 1024 * 300,
-        hints: isProd ? 'warning' : false
-      },
-      plugins: (isProd
-        ? []
-        : [
-            new Webpackbar(),
-            new FriendlyErrorsPlugin(),
-            new ForkTsCheckerWebpackPlugin({
-              vue: true, // 开启以检测 .vue 文件中的类型错误
-              ignoreDiagnostics: [2339]
-            })
-          ]
-      ).concat([
-        new VueLoaderPlugin(),
-        makeHappyPack('ts', [tsLoader]),
-        makeHappyPack('babel', [babelLoder])
-      ])
-    },
-    base
-  )
+    ).concat([
+      new VueLoaderPlugin(),
+      makeHappyPack('ts', [tsLoader]),
+      makeHappyPack('babel', [babelLoder])
+    ])
+  })
 }

src/config/webpack.config.config.ts

@@ -19,11 +19,7 @@ export const babelLoder = {
   }
 }
 
-export function getConfigConfig({
-  rootDir
-}: {
-  rootDir: string
-}): webpack.Configuration {
+export function getConfigConfig({ rootDir }: { rootDir: string }): webpack.Configuration {
   return (merge as any)(getCommonConfig('development'), {
     name: 'config',
     devtool: false,
@@ -53,4 +49,4 @@ export function getConfigConfig({
     },
     plugins: []
   })
-}
+}

src/config/webpack.server.config.ts

@@ -57,7 +57,7 @@ export function getServerConfig(options: ConfigOptions.options) {
     )
   } else {
     consola.fatal(
-      'getServerConfig options.webpack.server is undefined'
+      '[getServerConfig] options.webpack.server is undefined'
     )
     return process.exit(1)
   }

src/config/webpack.svg.config.ts

@@ -0,0 +1,35 @@
+import merge from 'webpack-merge'
+import { getCommonBaseConfig } from './webpack.base.config'
+import consola from 'consola'
+
+import { ConfigOptions } from '@types'
+
+export function getSvgConfig(options: ConfigOptions.options) {
+  if (!(options.webpack && options.webpack.mode)) {
+    consola.fatal(
+      '[getSvgConfig] 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 || {}
+    const mode = options.webpack.mode || 'production'
+    const base: any = options.webpack ? options.webpack.base || {} : {}
+    return (merge as any)(
+      getCommonBaseConfig(options),
+      {
+        name: 'svg',
+        mode,
+        devtool: false,
+        output: base.output,
+        resolve: base.resolve
+      },
+      svg
+    )
+  } else {
+    consola.fatal(
+      '[getServerConfig] options.webpack.svg is undefined'
+    )
+    return process.exit(1)
+  }
+}