ssr: 支持注入 injectContext

imsunhao · Dec 13, 2018 · 2813de6 · 2813de6
1 parent a8d90f5
commit 2813de6
Show file tree

Hide file tree

Showing 11 changed files with 189 additions and 70 deletions.
diff --git a/@types/index.d.ts b/@types/index.d.ts
@@ -76,6 +76,11 @@ declare namespace build {
          * * 默认值 ./dist/build
          */
         output?: string
+
+        /**
+         * 注入的上下文 配置文件目录
+         */
+        injectContext?: any
       }
 
       /**
@@ -152,18 +157,31 @@ declare namespace build {
      */
     interface Request extends expressRequest {
       /**
-       * 当前 rander 设备上下文
+       * 当前 注入的上下文
        */
-      renderContext?: any
+      injectContext?: any
 
       /**
-       * 当前 rander Env环境 key
+       * 当前 render Env环境 key
        */
       renderEnv?: string[]
     }
 
     namespace getRender {
-      interface opts {}
+      /**
+       * 获取 render 配置参数
+       */
+      interface opts {
+        /**
+         * 注入的上下文
+         */
+        context: any
+
+        /**
+         * 发布文件地址 默认为本地
+         */
+        publicPath?: string
+      }
       type renderFn = (
         req: BuildService.Request,
         res: expressResponse,
@@ -233,6 +251,14 @@ declare namespace build {
     interface getOptionsInject {
       argv: BuildService.parsedArgs
       mode: ConfigOptions.webpackMode
+
+      /**
+       * 注入的上下文
+       * * 用户自行配置
+       * * 详情 参见 --injectContext
+       */
+      injectContext: any
+
       /**
        * 获取 正确的路径
        * @param path 相对root路径
@@ -255,9 +281,9 @@ declare namespace build {
       rootDir?: string
 
       /**
-       * 当前 站点信息
+       * 注入的上下文
        */
-      siteInfo?: any
+      injectContext?: any
 
       /**
        * render 配置

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ### api 文档 TODO
 
--  文档还没出
+- 文档还没出
 - 但是有类型 在@types 中
 
 ### 功能
@@ -13,6 +13,7 @@
 - 开发项目 `service:dev`
 - 打包项目 `service:build`
 - 启动项目 `service:start`
+- 检查构建 `service:ci`
 
 ### 命令参数 帮助 -h
 
@@ -38,12 +39,12 @@
 
 ### 特性
 
-#### 支持 SSR 使用webpack4 打包 css无法提取的问题
+#### 支持 SSR 使用 webpack4 打包 css 无法提取的问题
 
 #### 支持 注入 Env
 
-- 为了方便打包一遍, 多种环境公用一套代码. 比如: stage环境 release环境 线上环境
-- 代码仅仅与node环境一致, 而不是webpack打包时决定
+- 为了方便打包一遍, 多种环境公用一套代码. 比如: stage 环境 release 环境 线上环境
+- 代码仅仅与 node 环境一致, 而不是 webpack 打包时决定
 
 #### 支持 webpack dll
 
@@ -52,12 +53,12 @@
 
 #### 支持 服务器端 express 开发
 
-- 提供 中间件 扩展
-- 提供 路由 扩展
+- 提供 中间件 扩展
+- 提供 路由 扩展
 - 支持热部署开发
 - 支持静态配置
 - 支持转发配置
 
-##### 提供 中间件  扩展
+##### 提供 中间件 扩展
 
-##### 提供 路由  扩展
+##### 提供 路由 扩展
diff --git a/bin/utils.js b/bin/utils.js
@@ -13,11 +13,12 @@ function getArgv() {
       d: 'dll',
       c: 'config-file',
       fd: 'fileDescriptor',
+      ic: 'injectContext',
       cl: 'clear',
       v: 'version'
     },
     boolean: ['h', 'd', 'v', 'cl'],
-    string: ['H', 'c', 'fd', 'e', 'o'],
+    string: ['H', 'c', 'fd', 'e', 'o', 'ic'],
     default: {
       c: 'build.config.json'
     }
@@ -28,13 +29,14 @@ function getArgv() {
       Description
         Starts the application in ${process.env.NODE_ENV} mode
       Options
-        --port, -p          A port number on which to start the application
-        --hostname, -H      Hostname on which to start the application
-        --clear, --cl       clear cache
-        --dll, -d           build webpack dll
-        --version, -v       look over version
-        --config-file, -c   Path to config file (default: build.config.json)
-        --help, -h          Displays this message
+        --port, -p            A port number on which to start the application
+        --hostname, -H        Hostname on which to start the application
+        --clear, --cl         clear cache
+        --dll, -d             build webpack dll
+        --injectContext, -ic  Path to injectContext file
+        --version, -v         look over version
+        --config-file, -c     Path to config file (default: build.config.json)
+        --help, -h            Displays this message
   `)
     process.exit(0)
   }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bestminr/build",
-  "version": "1.5.9",
+  "version": "1.6.0",
   "license": "MIT",
   "scripts": {
     "publish": "npm publish --access=public",

diff --git a/src/bin/dev.ts b/src/bin/dev.ts
@@ -18,10 +18,9 @@ async function devMain(argv: BuildService.parsedArgs) {
 
   // const webpack: any = options.webpack
   // const clientConfig = webpack.client
-  // const serverConfig = webpack.server
+  // const serverConfig = webpack.client
   // console.log('-------------------------------------')
-  // console.log('clientConfig', clientConfig.module.rules[5].test instanceof RegExp)
-  // console.log('clientConfig', clientConfig.module.rules[5].test.constructor)
+  // console.log('clientConfig', JSON.stringify(clientConfig, null, 2))
   // console.log('-------------------------------------')
   // console.log('getServerConfig', JSON.stringify(serverConfig, null, 2))
   // console.log('-------------------------------------')

diff --git a/src/config/webpack.client.config.ts b/src/config/webpack.client.config.ts
@@ -44,6 +44,6 @@ export async function getClientConfig(options: ConfigOptions.options) {
     },
     getStyle(options, { isServer: false }),
     await getClientDllPlugin(options),
-    client
+    client,
   )
 }
diff --git a/src/config/webpack.dll.config.ts b/src/config/webpack.dll.config.ts
@@ -7,6 +7,7 @@ import consola from 'consola'
 import webpack from 'webpack'
 
 import { getCommonConfig } from './webpack.common.config'
+import VueSSRClientPlugin from 'vue-server-renderer/client-plugin'
 
 export function getDllConfig(
   options: ConfigOptions.options
@@ -46,7 +47,12 @@ export function getDllConfig(
         maxEntrypointSize: 1024 * 500,
         maxAssetSize: 1024 * 500,
         hints: isProd ? 'warning' : false
-      }
+      },
+      plugins: [
+        new VueSSRClientPlugin({
+          filename: 'vue-ssr-dll-manifest.json'
+        }),
+      ]
     },
     getDllPlugin(dll),
     dll.webpack

diff --git a/src/render.ts b/src/render.ts
@@ -65,7 +65,7 @@ export function serverDevRender(app: Express) {
           clientManifest
         }),
         {
-          siteInfo: config.siteInfo
+          context: config.injectContext
         }
       )
       ready(render)
@@ -139,13 +139,31 @@ export function serverRender(app: Express) {
     if (
       config.render &&
       config.render.bundle &&
-      config.render.options.clientManifestPath
+      config.render.options.clientManifestPath &&
+      config.webpack &&
+      config.webpack.client &&
+      config.webpack.client.output
     ) {
-      const bundle = JSON.parse(readFileSync(config.render.bundle, 'utf-8'))
       const template = readFileSync(config.render.options.templatePath, 'utf-8')
       const clientManifest = JSON.parse(
         readFileSync(config.render.options.clientManifestPath, 'utf-8')
       )
+      if (config.webpack.dll) {
+        const dllManifest = JSON.parse(
+          readFileSync(path.resolve(config.webpack.dll.path, './vue-ssr-dll-manifest.json'), 'utf-8')
+        )
+        dllManifest.all.forEach((js: string) => {
+          clientManifest.all.push( 'dll/' + js)
+        })
+        dllManifest.initial.forEach((js: string) => {
+          clientManifest.initial.unshift( 'dll/' + js)
+        })
+      }
+
+      const publicPath = config.webpack.client.output.publicPath
+
+      clientManifest.publicPath = publicPath
+
       const options = Object.assign(
         {
           ...BASE_RENDER_OPTIONS,
@@ -155,10 +173,11 @@ export function serverRender(app: Express) {
         config.render.options
       )
 
-      const renderer = createBundleRenderer(bundle, options)
+      const renderer = createBundleRenderer(config.render.bundle, options)
 
       const render: any = getRender(renderer, {
-        siteInfo: config.siteInfo
+        context: config.injectContext,
+        publicPath,
       })
 
       app.use(cookieParser())