From b948f7e66c1433ceeef2f0f44f6197e7ef60fc6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=99=E9=A2=A2?= Date: Fri, 14 Dec 2018 17:01:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=B3=A8=E5=85=A5=20?= =?UTF-8?q?injectContext?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/render.ts | 49 +++++++++++++++++++++++++++++---------------- src/utils/index.ts | 34 +++++++++++++++++++++++-------- src/utils/render.ts | 10 +++++++-- 3 files changed, 66 insertions(+), 27 deletions(-) diff --git a/src/render.ts b/src/render.ts index 04d7f77..b2e5002 100644 --- 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 index cbed5d2..b88b999 100644 --- 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 index 65638fd..d149a89 100644 --- 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() }