feat: 添加 storybook 的支持

README.md

@@ -18,7 +18,7 @@
 - 开发项目 `service:dev`
 - 打包项目 `service:build`
 - 启动项目 `service:start`
-- 检查构建 `service:ci`
+- storybook webpack扩展支持 `build-storybook`
 
 ### 命令参数 帮助 -h
 
@@ -33,7 +33,7 @@
 
 ### 技术栈
 
-- vue 2.5
+- vue 2.6
 - vue-property-decorator
 - vue-router
 - vue-server-renderer
@@ -43,9 +43,14 @@
 - webpack 4
 - express 4
 - babel 7
+- storybook 5
 
 ### 特性
 
+#### 内置支持 storybook
+
+- 方便开发组件
+
 #### 支持 SSR 使用 webpack4 打包 css 无法提取的问题
 
 #### 支持 注入 Env

bin/storybook

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const argv = require('./utils').getArgv()
+
+require('../dist/bootstrap-storybook').bootstrapStorybook(argv)

bin/utils.js

@@ -114,5 +114,5 @@ function getArgv() {
 }
 
 module.exports = {
-  getArgv
+  getArgv,
 }

package.json

@@ -30,8 +30,10 @@
   "bin": {
     "service:start": "./bin/start",
     "service:build": "./bin/build",
-    "service:dev": "./bin/dev"
+    "service:dev": "./bin/dev",
+    "bootstrap:storybook": "./bin/storybook"
   },
+  "main": "./dist/index.js",
   "typings": "@types/index.d.ts",
   "repository": {
     "type": "git",
@@ -111,6 +113,7 @@
     "babel-loader": "^8.0.4",
     "babel-plugin-component": "^1.1.1",
     "babel-preset-latest-node": "^2.0.0-beta.3",
+    "babel-preset-vue": "^2.0.2",
     "base64url": "^3.0.1",
     "compression": "^1.7.3",
     "consola": "2.2.4",

src/bin/bootstrap-storybook.ts

@@ -0,0 +1,38 @@
+import { BuildService } from '@types'
+
+import consola from 'consola'
+import rimraf from 'rimraf'
+import { resolve } from 'path'
+import { writeFileSync } from 'fs'
+import { getUserConfigSync } from 'src/utils'
+
+export function bootstrapStorybook(argv: BuildService.parsedArgs) {
+  consola.info('clear cache')
+  const rootDir = resolve(argv._[0] || '.')
+  const storybookRootDir = resolve(argv._[0] || '.storybook')
+  const storybookConfigPath = resolve(storybookRootDir, './storybook.build.config')
+
+  rimraf.sync(storybookConfigPath)
+
+  const config = getUserConfigSync('development', argv)
+
+  delete config.webpack
+
+  config.mode = process.env.NODE_ENV
+
+  const template = `#!/usr/bin/env node
+const path = require('path')
+const rootDir = '${rootDir}'
+const resolve = function (p) {
+  return path.resolve(rootDir, p)
+}
+
+const config = ${JSON.stringify(config, null, 2)}
+
+config.resolve = resolve
+
+module.exports = config
+  `
+
+  writeFileSync(storybookConfigPath, template, 'utf8')
+}

src/config/index.ts

@@ -1,4 +1,4 @@
-import { getClientConfig } from './webpack.client.config'
+import { getClientConfig, getClientConfigSync } from './webpack.client.config'
 import { getServerConfig } from './webpack.server.config'
 
-export { getClientConfig, getServerConfig }
+export { getClientConfig, getServerConfig, getClientConfigSync }

src/config/webpack.client.config.ts

@@ -6,14 +6,12 @@ import webpack from 'webpack'
 import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
 
 import { ConfigOptions } from '@types'
-import { getClientDllPlugin, getExternals } from 'src/utils/plugins.webpack'
+import { getClientDllPlugin, getExternals, getClientDllPluginSync } from 'src/utils/plugins.webpack'
 
-export async function getClientConfig(options: ConfigOptions.options) {
-  const client = options.webpack ? options.webpack.client || {} : {}
+function baseGetClientConfig(options: ConfigOptions.options) {
   const { externals, alias } = getExternals(options, 'client')
   const mode = options.webpack.mode || 'production'
   const isProd = mode === 'production'
-
   return (merge as any)(
     getBaseConfig(options),
     {
@@ -52,7 +50,27 @@ export async function getClientConfig(options: ConfigOptions.options) {
       ]
     },
     getStyle(options, { isServer: false }),
+  )
+}
+
+export async function getClientConfig(options: ConfigOptions.options) {
+  const client = options.webpack ? options.webpack.client || {} : {}
+
+  return (merge as any)(
+    baseGetClientConfig(options),
     await getClientDllPlugin(options),
     client,
   )
 }
+
+
+export function getClientConfigSync(options: ConfigOptions.options) {
+  const client = options.webpack ? options.webpack.client || {} : {}
+
+  return (merge as any)(
+    baseGetClientConfig(options),
+    getClientDllPluginSync(options),
+    client,
+  )
+
+}

src/index.ts

@@ -0,0 +1,39 @@
+import { ConfigOptions } from '@types'
+import { setWebpackSync } from 'src/utils'
+import consola from 'consola'
+
+/**
+ * 使用现有的注入数据来解析用户的配置文件
+ * @param INJECT_CONTEXT 使用 yarn build-storybook 后, 生成的 .storybook/storybook.build.config
+ * @param CONFIG 使用 yarn service:dev 后, 生成的 dist/xx/xx_config.js
+ */
+export function resoveBuildConfig(INJECT_CONTEXT, CONFIG) {
+  if (!INJECT_CONTEXT || !INJECT_CONTEXT.rootDir) {
+    consola.fatal('[resoveBuildConfig] INJECT_CONTEXT is', INJECT_CONTEXT)
+    process.exit(1)
+  }
+  if (!CONFIG) {
+    consola.fatal('[resoveBuildConfig] CONFIG is', CONFIG)
+    process.exit(1)
+  }
+  CONFIG = CONFIG.default(INJECT_CONTEXT)
+  // console.log('--------------------------')
+  // console.dir(INJECT_CONTEXT, {
+  //   depth: null
+  // })
+  // console.log('--------------------------')
+  // console.dir(CONFIG, {
+  //   depth: null
+  // })
+  // console.log('--------------------------')
+  const options: ConfigOptions.options = CONFIG
+  options.rootDir = INJECT_CONTEXT.rootDir
+  options.injectContext = INJECT_CONTEXT.injectContext
+  setWebpackSync(options, INJECT_CONTEXT.mode)
+  // console.log('--------------------------')
+  // console.dir(options, {
+  //   depth: null
+  // })
+  // console.log('--------------------------')
+  return options
+}

src/utils/compiler.webpack.ts

@@ -151,6 +151,33 @@ export function compiler(
   }
 }
 
+export function compilerConfigSync(
+  configOptions: BuildService.parsedArgs.config,
+  mode: ConfigOptions.webpackMode
+) {
+  const entryName = `${mode === 'none' ? 'production' : mode}_config`
+  const { entry, output } = configOptions
+  if (!(entry && output)) {
+    consola.fatal('[compilerConfigSync]: entry or output is undefined')
+    return process.exit(1)
+  }
+  const path = resolve(output, `${entryName}.js`)
+  let config: any = {}
+  if (existsSync(path)) {
+    try {
+      const souce = readFileSync(path, 'utf-8')
+      config = requireFromString(souce)
+    } catch (error) {
+      consola.fatal('[compilerConfigSync]', error)
+      return process.exit(1)
+    }
+    return config
+  } else {
+    consola.fatal('[compilerConfigSync]: path is unExist!', path)
+    return process.exit(1)
+  }
+}
+
 /**
  * webpack 编译 配置文件
  * @param configOptions 配置文件 设置

src/utils/index.ts

@@ -1,7 +1,7 @@
 import { resolve } from 'path'
 import { ConfigOptions, BuildService } from '@types'
 
-import { getClientConfig, getServerConfig } from 'src/config'
+import { getClientConfig, getServerConfig, getClientConfigSync } from 'src/config'
 import { existsSync, readFileSync } from 'fs'
 import consola from 'consola'
 import { createResolve } from 'src/utils/path'
@@ -13,7 +13,7 @@ import compression from 'compression'
 import proxyMiddleware from 'http-proxy-middleware'
 import LRU from 'lru-cache'
 import HappyPack from 'happypack'
-import { compilerConfig, compilerDll } from 'src/utils/compiler.webpack'
+import { compilerConfig, compilerDll, compilerConfigSync } from 'src/utils/compiler.webpack'
 
 /**
  * 获取 根目录 地址
@@ -133,18 +133,12 @@ function setVersion(options: ConfigOptions.options) {
   }
 }
 
-/**
- * 设置 webpack
- * @param options build 通用 webpack 配置
- * @param mode webpack 环境
- */
-async function setWebpack(
+function baseSetWebpack(
   options: ConfigOptions.options,
   mode: ConfigOptions.webpackMode
 ) {
   options.webpack = options.webpack || {}
   options.webpack.mode = mode
-  options.webpack.client = await getClientConfig(options)
   options.webpack.server = getServerConfig(options)
   // const isProduction = mode ? mode !== 'development' : true
   // if (!isProduction) {
@@ -159,6 +153,34 @@ async function setWebpack(
   return options
 }
 
+/**
+ * 设置 webpack
+ * @param options build 通用 webpack 配置
+ * @param mode webpack 环境
+ */
+async function setWebpack(
+  options: ConfigOptions.options,
+  mode: ConfigOptions.webpackMode
+) {
+  options.webpack.client = await getClientConfig(options)
+  baseSetWebpack(options, mode)
+  return options
+}
+
+/**
+ * 同步 设置 webpack
+ * @param options build 通用 webpack 配置
+ * @param mode webpack 环境
+ */
+export function setWebpackSync(
+  options: ConfigOptions.options,
+  mode: ConfigOptions.webpackMode
+) {
+  options.webpack.client = getClientConfigSync(options)
+  baseSetWebpack(options, mode)
+  return options
+}
+
 /**
  * 通过 用户的设定 完善 argv参数
  * @param options build 通用 webpack 配置
@@ -207,6 +229,50 @@ function getInjectContext(configOptions: BuildService.parsedArgs.config) {
   return injectContext
 }
 
+export function getUserConfigSync(
+  mode: ConfigOptions.webpackMode,
+  argv: BuildService.parsedArgs
+) {
+  const configOptions = getConfigFileOptions(argv)
+  const injectContext = getInjectContext(configOptions)
+  const rootDir = getRootDir(argv)
+
+  let options: any
+
+  if (existsSync(configOptions.entry || '')) {
+    options = compilerConfigSync(configOptions, mode)
+    if (!options) {
+      options = {}
+    } else {
+      const args: ConfigOptions.getOptionsInject = {
+        argv,
+        mode,
+        resolve: createResolve(rootDir),
+        injectContext
+      }
+      options = options.default(args)
+      options.rootDir = options.rootDir || rootDir
+    }
+    if (options.default) {
+      options = options.default
+    }
+  } else if (argv['config-file'] !== 'buildService.config.js') {
+    consola.fatal('Could not load config file: ' + argv['config-file'])
+    return process.exit(1)
+  }
+
+  if (!options.injectContext) {
+    options.injectContext = injectContext
+  } else {
+    options.injectContext = {
+      ...injectContext,
+      ...options.injectContext
+    }
+  }
+
+  return options
+}
+
 /**
  * 获取 用户配置
  * @param configOptions 配置文件 设置
@@ -529,9 +595,7 @@ export class RouterStackManagement {
     this.router = app._router
     this.startIndex = this.stack.length - 1
     consola.info(
-      `RouterStackManagement 已经初始化完成 当前 startIndex = ${
-        this.startIndex
-      }`
+      `RouterStackManagement 已经初始化完成 当前 startIndex = ${this.startIndex}`
     )
   }
 
@@ -573,9 +637,7 @@ export class RouterStackManagement {
       stack.splice(current.index, 1, stack.pop())
       current.hotUpDateCount++
       consola.info(
-        `stack Index = ${index} currentIndex = ${
-          current.index
-        } 已经更新, 当前更新次数 = ${current.hotUpDateCount}`
+        `stack Index = ${index} currentIndex = ${current.index} 已经更新, 当前更新次数 = ${current.hotUpDateCount}`
       )
     }
   }