feat: 支持注入 injectContext

imsunhao · Dec 14, 2018 · b948f7e · b948f7e
1 parent 2813de6
commit b948f7e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 27 deletions.
diff --git a/src/render.ts b/src/render.ts
@@ -78,8 +78,10 @@ export function serverDevRender(app: Express) {
     stats.warnings.forEach((err: any) => consola.info(err))
     if (stats.errors.length) return
 
-    renderOptions.clientManifest = JSON.parse(
-      readFile(devMiddleware.fileSystem, 'vue-ssr-client-manifest.json')
+    renderOptions.clientManifest = clientManifestAddDll(
+      JSON.parse(
+        readFile(devMiddleware.fileSystem, 'vue-ssr-client-manifest.json')
+      )
     )
     update('clientManifest')
   }
@@ -128,6 +130,26 @@ export function serverDevRender(app: Express) {
   return readyPromise
 }
 
+function clientManifestAddDll(clientManifest: any) {
+  const config = getConfig()
+  if (config.webpack && config.webpack.client && config.webpack.client.output)
+    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)
+      })
+    }
+  return clientManifest
+}
+
 /**
  * prod 服务器渲染 服务
  * @param app Express 实例
@@ -145,20 +167,11 @@ export function serverRender(app: Express) {
       config.webpack.client.output
     ) {
       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')
+      const clientManifest = clientManifestAddDll(
+        JSON.parse(
+          readFileSync(config.render.options.clientManifestPath, '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
 
@@ -177,14 +190,16 @@ export function serverRender(app: Express) {
 
       const render: any = getRender(renderer, {
         context: config.injectContext,
-        publicPath,
+        publicPath
       })
 
       app.use(cookieParser())
 
       app.get('*', render)
     } else {
-      throw new Error('config error, config.render.options.clientManifestPath or config.render.bundle is undefined')
+      throw new Error(
+        'config error, config.render.options.clientManifestPath or config.render.bundle is undefined'
+      )
     }
   } catch (error) {
     consola.fatal('config.render', error)

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -65,7 +65,7 @@ function getConfigFileOptions(
 }
 
 function getDefaultStaticFileExts() {
-  return ['.ico', '.png', '.jpg', '.js', '.css', '.json']
+  return ['.ico', '.png', '.jpg', '.js', '.css', '.json', '.mp4']
 }
 
 let buildServiceConfig: ConfigOptions.options
@@ -118,6 +118,16 @@ async function setWebpack(
   options.webpack.mode = mode
   options.webpack.client = await getClientConfig(options)
   options.webpack.server = getServerConfig(options)
+  // const isProduction = mode ? mode !== 'development' : true
+  // if (!isProduction) {
+  // }
+  const rootDirLength = options.rootDir ? options.rootDir.length : 0
+  let path = (options.webpack.client as any).output.path
+  if (path[path.length - 1] !== '/') {
+    path += '/'
+  }
+  path = path.slice(rootDirLength)
+  process.env.PUBLIC_PATH = path
   return options
 }
 /**
@@ -180,9 +190,10 @@ async function getUserConfig(
         argv,
         mode,
         resolve: createResolve(rootDir),
-        injectContext,
+        injectContext
       }
       options = options.default(args)
+      options.rootDir = options.rootDir || rootDir
     }
     if (options.default) {
       options = options.default
@@ -283,7 +294,7 @@ export function getConfig() {
  * @return express实例: app
  */
 export function serverInit() {
-  const { env, statics, proxyTable, injectContext } = getConfig()
+  const { env, statics, proxyTable, injectContext, webpack } = getConfig()
   const app = express()
 
   app.use(compression({ threshold: 0 }))
@@ -292,7 +303,7 @@ export function serverInit() {
 
   serverProxy(app, proxyTable)
 
-  serverRenderDefaultEnv(app, env)
+  serverRenderDefaultEnv(app, env, webpack)
 
   setInjectContext(injectContext)
 
@@ -364,9 +375,16 @@ function serverProxy(app: Express, proxyTable?: BuildService.proxyTable) {
  * 服务器 获取 渲染默认 Env
  * @param app Express 实例
  * @param env 转发列表集合
+ * @param webpack webpack设置
  */
-function serverRenderDefaultEnv(app: Express, env: any = []) {
-  env = env.concat(['VUE_ENV'])
+function serverRenderDefaultEnv(
+  app: Express,
+  env: any = [],
+  webpack: ConfigOptions.options.webpack = {}
+) {
+  // const isProduction = webpack.mode ? webpack.mode !== 'development' : true
+  const defaultEnv = ['VUE_ENV', 'PUBLIC_PATH']
+  env = env.concat(defaultEnv)
   consola.info('serverRenderDefaultEnv', env)
   app.use(function(req: BuildService.Request, res, next) {
     const renderEnv = req.renderEnv || []
@@ -380,7 +398,7 @@ function serverRenderDefaultEnv(app: Express, env: any = []) {
  * @param injectContext 注入的上下文
  */
 function setInjectContext(injectContext: any = {}) {
-  (process as any).__INJECT_CONTEXT__ = injectContext
+  ;(process as any).__INJECT_CONTEXT__ = injectContext
 }
 
 /**
@@ -396,7 +414,7 @@ export const BASE_RENDER_OPTIONS = {
   // basedir: resolve(config.assetRoot),
   // recommended for performance
   runInNewContext: 'once',
-  inject: true,
+  inject: true
 }
 
 const isProduction = process.env.NODE_ENV === 'production'

diff --git a/src/utils/render.ts b/src/utils/render.ts
@@ -56,7 +56,9 @@ function getContextHead(req: BuildService.Request, injectContext: any) {
 
 const serverInfo =
   `express/${require('express/package.json').version} ` +
-  `vue-server-renderer/${require('vue-server-renderer/package.json').version} ` +
+  `vue-server-renderer/${
+    require('vue-server-renderer/package.json').version
+  } ` +
   `@bestminr/build/${require('../../package.json').version} `
 
 export function getRender(
@@ -68,9 +70,13 @@ export function getRender(
     res: Response,
     next: NextFunction
   ) {
+    // const webpack = getConfig().webpack
+    // const mode = webpack ? webpack.mode : undefined
+    // const isProduction = mode ? mode !== 'development' : true
+    // if (!isProduction) consola.log(req.url)
+
     // 一切正常工作的情况下，静态文件的请求会被 nginx 或者 express-static 处理，不应该进到这里
     // 直接返回 404 ，不占用 server-render 的宝贵资源
-
     if (isStaticResourceUrl(req.url)) {
       return res.status(404).end()
     }