Nuxt/lib/build/index.js

350 lines
11 KiB
JavaScript
Raw Normal View History

2016-11-07 01:34:58 +00:00
'use strict'
const debug = require('debug')('nuxt:build')
2016-12-15 17:48:31 +00:00
debug.color = 2 // force green color
2016-11-07 01:34:58 +00:00
const _ = require('lodash')
const co = require('co')
const chokidar = require('chokidar')
2016-11-11 14:30:11 +00:00
const fs = require('fs-extra')
2016-11-07 01:34:58 +00:00
const hash = require('hash-sum')
const pify = require('pify')
const webpack = require('webpack')
const { createBundleRenderer } = require('vue-server-renderer')
2016-12-11 00:46:04 +00:00
const { join, resolve, sep } = require('path')
2016-12-09 17:54:17 +00:00
const clientWebpackConfig = require('./webpack/client.config.js')
const serverWebpackConfig = require('./webpack/server.config.js')
2016-11-11 14:30:11 +00:00
const remove = pify(fs.remove)
const readFile = pify(fs.readFile)
const writeFile = pify(fs.writeFile)
const mkdirp = pify(fs.mkdirp)
2016-11-24 00:47:11 +00:00
const glob = pify(require('glob'))
2016-11-20 10:37:53 +00:00
const reqSep = /\//g
const sysSep = _.escapeRegExp(sep)
const normalize = string => string.replace(reqSep, sysSep)
const wp = function (p) {
2016-12-21 18:27:36 +00:00
/* istanbul ignore if */
2016-11-20 10:37:53 +00:00
if (/^win/.test(process.platform)) {
p = p.replace(/\\/g, '\\\\')
}
return p
}
2016-11-16 17:06:54 +00:00
const r = function () {
2016-11-20 10:37:53 +00:00
let args = Array.from(arguments)
2016-11-16 17:06:54 +00:00
if (_.last(args).includes('~')) {
2016-11-20 10:37:53 +00:00
return wp(_.last(args))
2016-11-16 17:06:54 +00:00
}
args = args.map(normalize)
2016-11-20 10:37:53 +00:00
return wp(resolve.apply(null, args))
2016-11-16 17:06:54 +00:00
}
2016-11-07 01:34:58 +00:00
const defaults = {
filenames: {
css: 'style.css',
vendor: 'vendor.bundle.js',
app: 'nuxt.bundle.js'
},
vendor: [],
loaders: [],
2016-11-18 09:38:47 +00:00
plugins: [],
2016-11-22 23:47:31 +00:00
babel: {},
postcss: []
}
const defaultsLoaders = [
{
test: /\.(png|jpe?g|gif|svg)$/,
2016-11-14 22:59:54 +00:00
loader: 'url-loader',
2016-11-10 18:34:59 +00:00
query: {
limit: 1000, // 1KO
name: 'img/[name].[ext]?[hash]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
2016-11-14 22:59:54 +00:00
loader: 'url-loader',
query: {
limit: 1000, // 1 KO
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
2016-11-22 23:47:31 +00:00
const defaultsPostcss = [
require('autoprefixer')({
browsers: ['last 3 versions']
})
]
2016-12-07 18:01:46 +00:00
exports.options = function () {
// Defaults build options
2016-11-22 23:47:31 +00:00
let extraDefaults = {}
if (this.options.build && !Array.isArray(this.options.build.loaders)) extraDefaults.loaders = defaultsLoaders
if (this.options.build && !Array.isArray(this.options.build.postcss)) extraDefaults.postcss = defaultsPostcss
this.options.build = _.defaultsDeep(this.options.build, defaults, extraDefaults)
2016-12-07 18:01:46 +00:00
// Production, create server-renderer
if (!this.dev) {
const serverConfig = getWebpackServerConfig.call(this)
const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
2016-12-07 18:01:46 +00:00
if (fs.existsSync(bundlePath)) {
const bundle = fs.readFileSync(bundlePath, 'utf8')
createRenderer.call(this, bundle)
2016-11-10 01:19:47 +00:00
}
}
2016-12-07 18:01:46 +00:00
}
exports.build = function * () {
2016-12-21 19:51:09 +00:00
// Check if pages dir exists and warn if not
2016-12-08 06:45:40 +00:00
if (!fs.existsSync(join(this.srcDir, 'pages'))) {
if (fs.existsSync(join(this.srcDir, '..', 'pages'))) {
2016-12-08 15:41:20 +00:00
console.error('> No `pages` directory found. Did you mean to run `nuxt` in the parent (`../`) directory?') // eslint-disable-line no-console
2016-11-07 01:34:58 +00:00
} else {
2016-12-08 15:41:20 +00:00
console.error('> Couldn\'t find a `pages` directory. Please create one under the project root') // eslint-disable-line no-console
2016-11-07 01:34:58 +00:00
}
2016-11-10 01:19:47 +00:00
process.exit(1)
2016-11-07 01:34:58 +00:00
}
2016-12-08 06:45:40 +00:00
debug(`App root: ${this.srcDir}`)
2016-11-07 01:34:58 +00:00
debug('Generating .nuxt/ files...')
2016-12-21 19:51:09 +00:00
// Create .nuxt/, .nuxt/components and .nuxt/dist folders
2016-11-11 14:30:11 +00:00
yield remove(r(this.dir, '.nuxt'))
2016-11-07 01:34:58 +00:00
yield mkdirp(r(this.dir, '.nuxt/components'))
if (!this.dev) {
2016-11-07 01:34:58 +00:00
yield mkdirp(r(this.dir, '.nuxt/dist'))
}
// Generate routes and interpret the template files
yield generateRoutesAndFiles.call(this)
2016-12-21 19:51:09 +00:00
// Generate .nuxt/dist/ files
yield buildFiles.call(this)
return this
}
function * buildFiles () {
if (this.dev) {
debug('Adding webpack middlewares...')
createWebpackMiddlewares.call(this)
webpackWatchAndUpdate.call(this)
watchPages.call(this)
} else {
debug('Building files...')
yield [
webpackRunClient.call(this),
webpackRunServer.call(this)
]
}
}
function * generateRoutesAndFiles () {
debug('Generating routes...')
2016-12-21 19:51:09 +00:00
// Generate routes based on files
2016-12-08 06:45:40 +00:00
const files = yield glob('pages/**/*.vue', { cwd: this.srcDir })
2016-12-12 20:16:12 +00:00
this.routes = _.uniq(_.map(files, (file) => {
2016-12-12 20:54:02 +00:00
return file.replace(/^pages/, '').replace(/\.vue$/, '').replace(/\/index/g, '').replace(/_/g, ':').replace('', '/').replace(/\/{2,}/g, '/')
2016-12-12 20:16:12 +00:00
}))
2016-12-21 19:51:09 +00:00
// Interpret and move template files to .nuxt/
debug('Generating files...')
2016-11-07 01:34:58 +00:00
let templatesFiles = [
'App.vue',
'client.js',
'index.js',
'router.js',
'server.js',
'utils.js',
'components/nuxt-container.vue',
2016-12-16 16:45:47 +00:00
'components/nuxt-loading.vue',
'components/nuxt-child.js',
'components/nuxt-link.js',
'components/nuxt.vue'
2016-11-07 01:34:58 +00:00
]
let templateVars = {
2016-11-20 11:23:48 +00:00
uniqBy: _.uniqBy,
isDev: this.dev,
2016-11-10 16:16:37 +00:00
router: {
base: this.options.router.base,
2016-11-24 00:47:11 +00:00
linkActiveClass: this.options.router.linkActiveClass
2016-11-10 16:16:37 +00:00
},
2016-12-04 18:15:11 +00:00
env: this.options.env,
2016-11-14 22:59:54 +00:00
head: this.options.head,
2016-11-07 01:34:58 +00:00
store: this.options.store,
css: this.options.css,
2016-12-08 06:45:40 +00:00
plugins: this.options.plugins.map((p) => r(this.srcDir, p)),
appPath: './App.vue',
2016-12-08 06:45:40 +00:00
loading: (typeof this.options.loading === 'string' ? r(this.srcDir, this.options.loading) : this.options.loading),
transition: this.options.transition,
2016-11-07 01:34:58 +00:00
components: {
2016-12-09 17:54:17 +00:00
Loading: r(__dirname, 'app', 'components', 'nuxt-loading.vue'),
ErrorPage: r(__dirname, 'app', 'components', 'nuxt-error.vue')
2016-11-10 16:16:37 +00:00
}
2016-11-07 01:34:58 +00:00
}
// Format routes for the lib/app/router.js template
2016-12-12 20:16:12 +00:00
templateVars.router.routes = createRoutes(files, this.srcDir)
2016-12-08 06:45:40 +00:00
if (fs.existsSync(join(this.srcDir, 'layouts', 'app.vue'))) {
templateVars.appPath = r(this.srcDir, 'layouts/app.vue')
2016-12-07 12:30:25 +00:00
}
2016-12-08 06:45:40 +00:00
if (fs.existsSync(join(this.srcDir, 'layouts', 'error.vue'))) {
2016-12-09 12:50:34 +00:00
templateVars.components.ErrorPage = r(this.srcDir, 'layouts/error.vue')
2016-12-07 12:30:25 +00:00
}
2016-11-07 01:34:58 +00:00
let moveTemplates = templatesFiles.map((file) => {
2016-12-09 17:54:17 +00:00
return readFile(r(__dirname, 'app', file), 'utf8')
2016-11-07 01:34:58 +00:00
.then((fileContent) => {
const template = _.template(fileContent)
const content = template(templateVars)
return writeFile(r(this.dir, '.nuxt', file), content, 'utf8')
})
})
yield moveTemplates
}
2016-12-12 13:16:47 +00:00
function createRoutes (files, srcDir) {
2016-12-11 00:46:04 +00:00
let routes = []
files.forEach((file) => {
let keys = file.replace(/^pages/, '').replace(/\.vue$/, '').replace(/\/{2,}/g, '/').split('/').slice(1)
let route = { name: '', path: '', component: r(srcDir, file), _name: null }
let parent = routes
keys.forEach((key, i) => {
route.name = route.name ? route.name + (key === 'index' ? '' : '-' + key.replace('_', '')) : key.replace('_', '')
let child = _.find(parent, { name: route.name })
if (child) {
if (!child.children) {
child.children = []
}
parent = child.children
} else {
route.path = route.path + (key === 'index' ? (i > 0 ? '' : '/') : '/' + key.replace('_', ':'))
}
})
route._name = '_' + hash(route.component)
2016-12-11 15:40:49 +00:00
// Order Routes path
2016-12-12 13:16:47 +00:00
if (_.last(keys)[0] === '_') {
2016-12-11 15:40:49 +00:00
parent.push(route)
} else {
parent.unshift(route)
2016-12-11 00:46:04 +00:00
}
})
return cleanChildrenRoutes(routes)
}
function cleanChildrenRoutes (routes, isChild = false) {
2016-12-20 16:30:43 +00:00
let isOptional = true
2016-12-11 00:46:04 +00:00
routes.forEach((route) => {
route.path = (isChild) ? route.path.replace('/', '') : route.path
2016-12-20 16:45:25 +00:00
if (route.path === '' || route.path === '/') {
2016-12-20 16:30:43 +00:00
isOptional = false
}
2016-12-20 16:45:25 +00:00
if (isOptional && route.path.includes(':')) {
2016-12-20 16:30:43 +00:00
route.path += '?'
}
2016-12-11 00:46:04 +00:00
if (route.children) {
delete route.name
route.children = cleanChildrenRoutes(route.children, true)
}
})
return routes
}
2016-11-07 01:34:58 +00:00
function getWebpackClientConfig () {
2016-12-09 17:54:17 +00:00
return clientWebpackConfig.call(this)
2016-11-07 01:34:58 +00:00
}
function getWebpackServerConfig () {
2016-12-09 17:54:17 +00:00
return serverWebpackConfig.call(this)
2016-11-07 01:34:58 +00:00
}
function createWebpackMiddlewares () {
const clientConfig = getWebpackClientConfig.call(this)
// setup on the fly compilation + hot-reload
clientConfig.entry.app = ['webpack-hot-middleware/client?reload=true', clientConfig.entry.app]
2016-11-07 01:34:58 +00:00
clientConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
)
const clientCompiler = webpack(clientConfig)
// Add the middlewares to the instance context
this.webpackDevMiddleware = pify(require('webpack-dev-middleware')(clientCompiler, {
publicPath: clientConfig.output.publicPath,
stats: {
colors: true,
chunks: false
},
quiet: false,
2016-11-07 01:34:58 +00:00
noInfo: true
}))
this.webpackHotMiddleware = pify(require('webpack-hot-middleware')(clientCompiler))
}
function webpackWatchAndUpdate () {
const MFS = require('memory-fs') // <- dependencies of webpack
const mfs = new MFS()
const serverConfig = getWebpackServerConfig.call(this)
const serverCompiler = webpack(serverConfig)
const outputPath = join(serverConfig.output.path, serverConfig.output.filename)
serverCompiler.outputFileSystem = mfs
this.webpackServerWatcher = serverCompiler.watch({}, (err, stats) => {
if (err) throw err
stats = stats.toJson()
2016-12-08 15:41:20 +00:00
stats.errors.forEach(err => console.error(err)) // eslint-disable-line no-console
stats.warnings.forEach(err => console.warn(err)) // eslint-disable-line no-console
2016-11-07 01:34:58 +00:00
createRenderer.call(this, mfs.readFileSync(outputPath, 'utf-8'))
})
}
function webpackRunClient () {
return new Promise((resolve, reject) => {
const clientConfig = getWebpackClientConfig.call(this)
const serverCompiler = webpack(clientConfig)
serverCompiler.run((err, stats) => {
if (err) return reject(err)
2016-12-08 15:41:20 +00:00
console.log('[nuxt:build:client]\n', stats.toString({ chunks: false, colors: true })) // eslint-disable-line no-console
2016-11-07 01:34:58 +00:00
resolve()
})
})
}
function webpackRunServer () {
return new Promise((resolve, reject) => {
const serverConfig = getWebpackServerConfig.call(this)
const serverCompiler = webpack(serverConfig)
serverCompiler.run((err, stats) => {
if (err) return reject(err)
2016-12-08 15:41:20 +00:00
console.log('[nuxt:build:server]\n', stats.toString({ chunks: false, colors: true })) // eslint-disable-line no-console
2016-11-07 01:34:58 +00:00
const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
2016-11-11 14:30:11 +00:00
readFile(bundlePath, 'utf8')
.then((bundle) => {
createRenderer.call(this, bundle)
resolve()
})
2016-11-07 01:34:58 +00:00
})
})
}
function createRenderer (bundle) {
// Create bundle renderer to give a fresh context for every request
let cacheConfig = false
if (this.options.cache) {
this.options.cache = (typeof this.options.cache !== 'object' ? {} : this.options.cache)
cacheConfig = require('lru-cache')(_.defaults(this.options.cache, {
max: 1000,
maxAge: 1000 * 60 * 15
}))
}
this.renderer = createBundleRenderer(bundle, {
cache: cacheConfig
})
this.renderToString = pify(this.renderer.renderToString)
this.renderToStream = this.renderer.renderToStream
}
function watchPages () {
2016-12-08 06:45:40 +00:00
const patterns = [ r(this.srcDir, 'pages/*.vue'), r(this.srcDir, 'pages/**/*.vue') ]
const options = {
ignoreInitial: true
}
2016-12-21 19:51:09 +00:00
/* istanbul ignore next */
const refreshFiles = _.debounce(() => {
var d = Date.now()
co(generateRoutesAndFiles.bind(this))
.then(() => {
2016-12-08 15:41:20 +00:00
console.log('Time to gen:' + (Date.now() - d) + 'ms') // eslint-disable-line no-console
})
}, 200)
this.pagesFilesWatcher = chokidar.watch(patterns, options)
.on('add', refreshFiles)
.on('unlink', refreshFiles)
}