1
0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-20 23:49:38 +00:00

Basic vue-server-renderer/client-plugin integration

This commit is contained in:
Pooya Parsa 2017-04-27 15:50:43 +04:30
parent 8db3a22db9
commit ac151a41f0
2 changed files with 44 additions and 21 deletions

View File

@ -101,9 +101,11 @@ export function options () {
} }
const serverConfig = getWebpackServerConfig.call(this) const serverConfig = getWebpackServerConfig.call(this)
const bundlePath = join(serverConfig.output.path, 'server-bundle.json') const bundlePath = join(serverConfig.output.path, 'server-bundle.json')
if (fs.existsSync(bundlePath)) { const manifestPath = join(serverConfig.output.path, 'client-manifest.json')
if (fs.existsSync(bundlePath) && fs.existsSync(manifestPath)) {
const bundle = fs.readFileSync(bundlePath, 'utf8') const bundle = fs.readFileSync(bundlePath, 'utf8')
createRenderer.call(this, JSON.parse(bundle)) const manifest = fs.readFileSync(manifestPath, 'utf8')
createRenderer.call(this, JSON.parse(bundle), JSON.parse(manifest))
addAppTemplate.call(this) addAppTemplate.call(this)
} }
} }
@ -137,15 +139,13 @@ export function * build () {
function * buildFiles () { function * buildFiles () {
if (this.dev) { if (this.dev) {
debug('Adding webpack middleware...') debug('Adding webpack middleware...')
createWebpackMiddleware.call(this) const clientCompiler = createWebpackMiddleware.call(this)
webpackWatchAndUpdate.call(this) webpackWatchAndUpdate.call(this, clientCompiler)
watchPages.call(this) watchPages.call(this)
} else { } else {
debug('Building files...') debug('Building files...')
yield [ yield webpackRunClient.call(this)
webpackRunClient.call(this), yield webpackRunServer.call(this)
webpackRunServer.call(this)
]
addAppTemplate.call(this) addAppTemplate.call(this)
} }
} }
@ -407,19 +407,34 @@ function createWebpackMiddleware () {
}) })
} }
}) })
return clientCompiler
} }
function webpackWatchAndUpdate () { function webpackWatchAndUpdate (clientCompiler) {
const MFS = require('memory-fs') // <- dependencies of webpack const MFS = require('memory-fs') // <- dependencies of webpack
const mfs = new MFS() const serverFS = new MFS()
const clientFS = clientCompiler.outputFileSystem
const serverConfig = getWebpackServerConfig.call(this) const serverConfig = getWebpackServerConfig.call(this)
const serverCompiler = webpack(serverConfig) const serverCompiler = webpack(serverConfig)
const outputPath = join(serverConfig.output.path, 'server-bundle.json') const bundlePath = join(serverConfig.output.path, 'server-bundle.json')
serverCompiler.outputFileSystem = mfs const manifestPath = join(serverConfig.output.path, 'client-manifest.json')
this.webpackServerWatcher = serverCompiler.watch(this.options.watchers.webpack, (err) => { serverCompiler.outputFileSystem = serverFS
const watchHandler = (err) => {
if (err) throw err if (err) throw err
createRenderer.call(this, JSON.parse(mfs.readFileSync(outputPath, 'utf-8'))) const bundleExists = serverFS.existsSync(bundlePath)
}) const manifestExists = clientFS.existsSync(manifestPath)
if (!bundleExists) {
debug('Waiting for server bundle...')
} else if (!manifestExists) {
debug('Waiting for client manifest...')
} else {
const bundle = serverFS.readFileSync(bundlePath, 'utf-8')
const manifest = clientFS.readFileSync(manifestPath, 'utf-8')
createRenderer.call(this, JSON.parse(bundle), JSON.parse(manifest))
}
}
this.webpackServerWatcher = serverCompiler.watch(this.options.watchers.webpack, watchHandler)
this.webpackClientWatcher = clientCompiler.watch(this.options.watchers.webpack, watchHandler)
} }
function webpackRunClient () { function webpackRunClient () {
@ -444,16 +459,18 @@ function webpackRunServer () {
console.log('[nuxt:build:server]\n', stats.toString(webpackStats)) // eslint-disable-line no-console console.log('[nuxt:build:server]\n', stats.toString(webpackStats)) // eslint-disable-line no-console
if (stats.hasErrors()) return reject(new Error('Webpack build exited with errors')) if (stats.hasErrors()) return reject(new Error('Webpack build exited with errors'))
const bundlePath = join(serverConfig.output.path, 'server-bundle.json') const bundlePath = join(serverConfig.output.path, 'server-bundle.json')
const manifestPath = join(serverConfig.output.path, 'client-manifest.json')
readFile(bundlePath, 'utf8') readFile(bundlePath, 'utf8')
.then((bundle) => { .then((bundle) => readFile(manifestPath, 'utf8')
createRenderer.call(this, JSON.parse(bundle)) .then(manifest => {
resolve() createRenderer.call(this, JSON.parse(bundle), JSON.parse(manifest))
}) resolve()
}))
}) })
}) })
} }
function createRenderer (bundle) { function createRenderer (bundle, manifest) {
// Create bundle renderer to give a fresh context for every request // Create bundle renderer to give a fresh context for every request
let cacheConfig = false let cacheConfig = false
if (this.options.cache) { if (this.options.cache) {
@ -464,7 +481,8 @@ function createRenderer (bundle) {
})) }))
} }
this.renderer = createBundleRenderer(bundle, { this.renderer = createBundleRenderer(bundle, {
cache: cacheConfig cache: cacheConfig,
clientManifest: manifest
}) })
this.renderToString = pify(this.renderer.renderToString) this.renderToString = pify(this.renderer.renderToString)
this.renderToStream = this.renderer.renderToStream this.renderToStream = this.renderer.renderToStream

View File

@ -2,6 +2,7 @@
import { each, defaults } from 'lodash' import { each, defaults } from 'lodash'
import webpack from 'webpack' import webpack from 'webpack'
import VueSSRClientPlugin from 'vue-server-renderer/client-plugin'
import HTMLPlugin from 'html-webpack-plugin' import HTMLPlugin from 'html-webpack-plugin'
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin' import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin' import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'
@ -45,6 +46,9 @@ export default function () {
}) })
// Webpack plugins // Webpack plugins
config.plugins = (config.plugins || []).concat([ config.plugins = (config.plugins || []).concat([
new VueSSRClientPlugin({
filename: 'client-manifest.json'
}),
// Strip comments in Vue code // Strip comments in Vue code
new webpack.DefinePlugin(Object.assign(env, { new webpack.DefinePlugin(Object.assign(env, {
'process.env.NODE_ENV': JSON.stringify(this.dev ? 'development' : 'production'), 'process.env.NODE_ENV': JSON.stringify(this.dev ? 'development' : 'production'),
@ -61,6 +65,7 @@ export default function () {
// Extract manifest // Extract manifest
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'manifest', name: 'manifest',
minChunks: Infinity,
filename: this.options.build.filenames.manifest filename: this.options.build.filenames.manifest
}), }),
// Generate output HTML // Generate output HTML