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:
parent
8db3a22db9
commit
ac151a41f0
lib
60
lib/build.js
60
lib/build.js
@ -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
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user