Nuxt/lib/builder/builder.js

581 lines
18 KiB
JavaScript
Raw Normal View History

2017-06-11 14:17:36 +00:00
import _ from 'lodash'
import chokidar from 'chokidar'
2017-08-18 10:26:19 +00:00
import fs, { remove, readFile, writeFile, mkdirp, utimes, existsSync } from 'fs-extra'
2017-06-11 14:17:36 +00:00
import hash from 'hash-sum'
import pify from 'pify'
import webpack from 'webpack'
import serialize from 'serialize-javascript'
import { join, resolve, basename, dirname } from 'path'
2017-06-13 17:58:04 +00:00
import Tapable from 'tappable'
2017-06-15 22:19:53 +00:00
import MFS from 'memory-fs'
2017-06-16 12:42:45 +00:00
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import { r, wp, wChunk, createRoutes, sequence, relativeTo, isPureObject } from 'utils'
2017-06-18 09:35:00 +00:00
import Debug from 'debug'
import Glob from 'glob'
2017-06-11 14:17:36 +00:00
import clientWebpackConfig from './webpack/client.config.js'
import serverWebpackConfig from './webpack/server.config.js'
import dllWebpackConfig from './webpack/dll.config.js'
2017-08-14 14:03:07 +00:00
import vueLoaderConfig from './webpack/vue-loader.config'
import styleLoader from './webpack/style-loader'
2017-06-11 14:17:36 +00:00
2017-06-18 09:35:00 +00:00
const debug = Debug('nuxt:build')
2017-06-11 14:17:36 +00:00
debug.color = 2 // Force green color
2017-06-18 09:35:00 +00:00
const glob = pify(Glob)
2017-06-11 14:17:36 +00:00
export default class Builder extends Tapable {
constructor (nuxt) {
super()
this.nuxt = nuxt
this.isStatic = false // Flag to know if the build is for a generated app
2017-06-11 14:17:36 +00:00
this.options = nuxt.options
// Fields that set on build
this.compiler = null
this.webpackDevMiddleware = null
this.webpackHotMiddleware = null
// Mute stats on dev
2017-06-15 22:19:53 +00:00
this.webpackStats = this.options.dev ? false : {
2017-06-11 14:17:36 +00:00
chunks: false,
children: false,
modules: false,
2017-08-10 10:57:54 +00:00
colors: true,
excludeAssets: [
/.map$/,
/index\..+\.html$/,
/vue-ssr-client-manifest.json/
]
2017-06-11 14:17:36 +00:00
}
// Helper to resolve build paths
this.relativeToBuild = (...args) => relativeTo(this.options.buildDir, ...args)
2017-08-14 14:03:07 +00:00
// Bind styleLoader and vueLoader
this.styleLoader = styleLoader.bind(this)
this.vueLoader = vueLoaderConfig.bind(this)
this._buildStatus = STATUS.INITIAL
2017-06-11 14:17:36 +00:00
}
2017-07-10 22:53:06 +00:00
get plugins () {
return this.options.plugins.map((p, i) => {
if (typeof p === 'string') p = { src: p }
2017-07-26 12:19:09 +00:00
p.src = this.nuxt.resolvePath(p.src)
2017-07-10 22:53:06 +00:00
return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
})
}
vendor () {
return [
'vue',
'vue-router',
'vue-meta',
2017-08-21 19:12:41 +00:00
this.options.store && 'vuex'
].concat(this.options.build.vendor).filter(v => v)
}
vendorEntries () {
// Used for dll
const vendor = this.vendor()
const vendorEntries = {}
vendor.forEach(v => {
2017-08-21 19:40:06 +00:00
try {
require.resolve(v)
vendorEntries[v] = [ v ]
} catch (e) {
// Ignore
}
})
return vendorEntries
}
2017-08-17 13:13:56 +00:00
forGenerate () {
this.isStatic = true
2017-08-17 12:43:51 +00:00
}
2017-06-11 14:17:36 +00:00
async build () {
// Avoid calling build() method multiple times when dev:true
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
if (this._buildStatus === STATUS.BUILD_DONE && this.options.dev) {
2017-06-11 14:17:36 +00:00
return this
}
// If building
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
2017-06-11 14:17:36 +00:00
if (this._buildStatus === STATUS.BUILDING) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(this.build())
2017-06-13 22:09:03 +00:00
}, 1000)
2017-06-11 14:17:36 +00:00
})
}
this._buildStatus = STATUS.BUILDING
2017-06-13 17:58:04 +00:00
// Wait for nuxt ready
await this.nuxt.ready()
2017-08-17 18:02:22 +00:00
// Wait for build plugins
2017-07-17 19:26:41 +00:00
await this.nuxt.applyPluginsAsync('build', this)
2017-07-03 11:11:40 +00:00
2017-08-17 18:02:22 +00:00
// Babel options
this.babelOptions = _.defaults(this.options.build.babel, {
presets: [
require.resolve('babel-preset-vue-app')
],
babelrc: false,
cacheDirectory: !!this.options.dev
})
// Map postcss plugins into instances on object mode once
if (isPureObject(this.options.build.postcss)) {
if (isPureObject(this.options.build.postcss.plugins)) {
this.options.build.postcss.plugins = Object.keys(this.options.build.postcss.plugins)
.map(p => {
const plugin = require(p)
const opts = this.options.build.postcss.plugins[p]
if (opts === false) return // Disabled
const instance = plugin(opts)
return instance
}).filter(e => e)
}
}
2017-06-11 14:17:36 +00:00
// Check if pages dir exists and warn if not
this._nuxtPages = typeof this.options.build.createRoutes !== 'function'
if (this._nuxtPages) {
if (!fs.existsSync(join(this.options.srcDir, 'pages'))) {
2017-06-13 20:14:51 +00:00
let dir = this.options.srcDir
2017-06-11 14:17:36 +00:00
if (fs.existsSync(join(this.options.srcDir, '..', 'pages'))) {
2017-06-13 22:09:03 +00:00
throw new Error(`No \`pages\` directory found in ${dir}. Did you mean to run \`nuxt\` in the parent (\`../\`) directory?`)
2017-06-11 14:17:36 +00:00
} else {
2017-06-13 22:09:03 +00:00
throw new Error(`Couldn't find a \`pages\` directory in ${dir}. Please create one under the project root`)
2017-06-11 14:17:36 +00:00
}
}
}
2017-06-13 17:58:04 +00:00
2017-06-11 14:17:36 +00:00
debug(`App root: ${this.options.srcDir}`)
debug(`Generating ${this.options.buildDir} files...`)
// Create .nuxt/, .nuxt/components and .nuxt/dist folders
await remove(r(this.options.buildDir))
await mkdirp(r(this.options.buildDir, 'components'))
if (!this.options.dev) {
await mkdirp(r(this.options.buildDir, 'dist'))
}
2017-06-11 14:17:36 +00:00
// Generate routes and interpret the template files
await this.generateRoutesAndFiles()
// Start webpack build
await this.webpackBuild()
2017-07-03 11:11:40 +00:00
await this.applyPluginsAsync('built', this)
2017-06-11 14:17:36 +00:00
// Flag to set that building is done
this._buildStatus = STATUS.BUILD_DONE
return this
}
async generateRoutesAndFiles () {
debug('Generating files...')
// -- Templates --
let templatesFiles = [
'App.vue',
'client.js',
'index.js',
'middleware.js',
'router.js',
'server.js',
'utils.js',
2017-07-10 22:53:06 +00:00
'empty.js',
2017-06-11 14:17:36 +00:00
'components/nuxt-error.vue',
'components/nuxt-loading.vue',
'components/nuxt-child.js',
'components/nuxt-link.js',
2017-06-16 12:42:45 +00:00
'components/nuxt.vue',
'views/app.template.html',
'views/error.html'
2017-06-11 14:17:36 +00:00
]
const templateVars = {
options: this.options,
uniqBy: _.uniqBy,
isDev: this.options.dev,
debug: this.options.debug,
2017-08-20 13:13:42 +00:00
mode: this.options.mode,
2017-06-13 17:58:04 +00:00
router: this.options.router,
2017-06-11 14:17:36 +00:00
env: this.options.env,
head: this.options.head,
middleware: fs.existsSync(join(this.options.srcDir, 'middleware')),
store: this.options.store,
2017-06-11 14:17:36 +00:00
css: this.options.css,
2017-07-10 22:53:06 +00:00
plugins: this.plugins,
2017-06-11 14:17:36 +00:00
appPath: './App.vue',
layouts: Object.assign({}, this.options.layouts),
loading: typeof this.options.loading === 'string' ? this.relativeToBuild(this.options.srcDir, this.options.loading) : this.options.loading,
2017-06-11 14:17:36 +00:00
transition: this.options.transition,
components: {
ErrorPage: this.options.ErrorPage ? this.relativeToBuild(this.options.ErrorPage) : null
2017-06-11 14:17:36 +00:00
}
}
// -- Layouts --
if (fs.existsSync(resolve(this.options.srcDir, 'layouts'))) {
2017-08-17 13:13:56 +00:00
const layoutsFiles = await glob('layouts/*.vue', { cwd: this.options.srcDir })
2017-08-14 12:15:00 +00:00
let hasErrorLayout = false
2017-06-11 14:17:36 +00:00
layoutsFiles.forEach((file) => {
2017-08-17 13:13:56 +00:00
let name = file.split('/').slice(-1)[0].replace(/\.vue$/, '')
2017-08-14 12:15:00 +00:00
if (name === 'error') {
hasErrorLayout = true
return
}
templateVars.layouts[name] = this.relativeToBuild(this.options.srcDir, file)
2017-06-11 14:17:36 +00:00
})
2017-08-14 12:15:00 +00:00
if (!templateVars.components.ErrorPage && hasErrorLayout) {
2017-08-17 13:13:56 +00:00
templateVars.components.ErrorPage = this.relativeToBuild(this.options.srcDir, 'layouts/error.vue')
2017-06-11 14:17:36 +00:00
}
}
// If no default layout, create its folder and add the default folder
if (!templateVars.layouts.default) {
await mkdirp(r(this.options.buildDir, 'layouts'))
templatesFiles.push('layouts/default.vue')
2017-06-20 17:12:06 +00:00
templateVars.layouts.default = './layouts/default.vue'
2017-06-11 14:17:36 +00:00
}
// -- Routes --
debug('Generating routes...')
// If user defined a custom method to create routes
if (this._nuxtPages) {
// Use nuxt.js createRoutes bases on pages/
2017-08-17 13:13:56 +00:00
const files = await glob('pages/**/*.vue', { cwd: this.options.srcDir })
templateVars.router.routes = createRoutes(files, this.options.srcDir)
2017-06-11 14:17:36 +00:00
} else {
templateVars.router.routes = this.options.build.createRoutes(this.options.srcDir)
}
2017-07-03 11:11:40 +00:00
const extendedRoutes = await this.applyPluginsAsync('extendRoutes', { routes: templateVars.router.routes, templateVars, r })
// Only overwrite routes when something is returned for backwards compatibility
if (extendedRoutes !== undefined) {
templateVars.router.routes = extendedRoutes
}
2017-07-03 11:11:40 +00:00
2017-06-11 14:17:36 +00:00
// router.extendRoutes method
if (typeof this.options.router.extendRoutes === 'function') {
// let the user extend the routes
const extendedRoutes = this.options.router.extendRoutes(templateVars.router.routes, r)
// Only overwrite routes when something is returned for backwards compatibility
if (extendedRoutes !== undefined) {
templateVars.router.routes = extendedRoutes
}
2017-06-11 14:17:36 +00:00
}
// Make routes accessible for other modules and webpack configs
this.routes = templateVars.router.routes
2017-06-11 14:17:36 +00:00
// -- Store --
// Add store if needed
if (this.options.store) {
templatesFiles.push('store.js')
}
// Resolve template files
const customTemplateFiles = this.options.build.templates.map(t => t.dst || basename(t.src || t))
templatesFiles = templatesFiles.map(file => {
// Skip if custom file was already provided in build.templates[]
if (customTemplateFiles.indexOf(file) !== -1) {
return
}
// Allow override templates using a file with same name in ${srcDir}/app
const customPath = r(this.options.srcDir, 'app', file)
const customFileExists = fs.existsSync(customPath)
return {
2017-06-16 12:42:45 +00:00
src: customFileExists
? customPath
2017-06-16 13:04:42 +00:00
: r(this.options.nuxtAppDir, file),
2017-06-11 14:17:36 +00:00
dst: file,
custom: customFileExists
}
}).filter(i => !!i)
// -- Custom templates --
// Add custom template files
templatesFiles = templatesFiles.concat(this.options.build.templates.map(t => {
return Object.assign({
src: r(this.options.srcDir, t.src || t),
dst: t.dst || basename(t.src || t),
custom: true
}, t)
}))
2017-08-18 10:26:19 +00:00
// -- Loading indicator --
if (this.options.loadingIndicator.name) {
const indicatorPath1 = resolve(this.options.nuxtAppDir, 'views/loading', this.options.loadingIndicator.name + '.html')
const indicatorPath2 = this.nuxt.resolvePath(this.options.loadingIndicator.name)
const indicatorPath = existsSync(indicatorPath1) ? indicatorPath1 : (existsSync(indicatorPath2) ? indicatorPath2 : null)
if (indicatorPath) {
templatesFiles.push({
src: indicatorPath,
dst: 'loading.html',
options: this.options.loadingIndicator
})
2017-08-18 12:23:10 +00:00
} else {
console.error(`Could not fetch loading indicator: ${this.options.loadingIndicator.name}`) // eslint-disable-line no-console
2017-08-18 10:26:19 +00:00
}
}
2017-07-03 11:11:40 +00:00
await this.applyPluginsAsync('generate', { builder: this, templatesFiles, templateVars })
2017-06-11 14:17:36 +00:00
// Interpret and move template files to .nuxt/
2017-06-15 22:19:53 +00:00
await Promise.all(templatesFiles.map(async ({ src, dst, options, custom }) => {
2017-06-11 14:17:36 +00:00
// Add template to watchers
this.options.build.watch.push(src)
// Render template to dst
const fileContent = await readFile(src, 'utf8')
const template = _.template(fileContent, {
imports: {
serialize,
hash,
r,
2017-06-20 17:12:06 +00:00
wp,
2017-08-17 17:18:56 +00:00
wChunk,
2017-07-21 23:40:38 +00:00
resolvePath: this.nuxt.resolvePath.bind(this.nuxt),
relativeToBuild: this.relativeToBuild
2017-06-11 14:17:36 +00:00
}
})
const content = template(Object.assign({}, templateVars, {
options: options || {},
custom,
src,
dst
}))
const path = r(this.options.buildDir, dst)
// Ensure parent dir exits
await mkdirp(dirname(path))
// Write file
await writeFile(path, content, 'utf8')
// Fix webpack loop (https://github.com/webpack/watchpack/issues/25#issuecomment-287789288)
2017-06-15 22:19:53 +00:00
const dateFS = Date.now() / 1000 - 1000
2017-06-11 14:17:36 +00:00
return utimes(path, dateFS, dateFS)
}))
2017-07-03 11:11:40 +00:00
await this.applyPluginsAsync('generated', this)
2017-06-11 14:17:36 +00:00
}
2017-07-03 11:11:40 +00:00
async webpackBuild () {
debug('Building files...')
2017-07-10 22:53:06 +00:00
const compilersOptions = []
// Client
2017-07-10 22:53:06 +00:00
const clientConfig = clientWebpackConfig.call(this)
compilersOptions.push(clientConfig)
// Server
let serverConfig = null
2017-07-11 00:24:39 +00:00
if (this.options.build.ssr) {
serverConfig = serverWebpackConfig.call(this)
2017-07-11 00:24:39 +00:00
compilersOptions.push(serverConfig)
}
2017-07-10 22:53:06 +00:00
// Alias plugins to their real path
this.plugins.forEach(p => {
const src = this.relativeToBuild(p.src)
// Client config
if (!clientConfig.resolve.alias[p.name]) {
clientConfig.resolve.alias[p.name] = src
}
// Server config
if (serverConfig && !serverConfig.resolve.alias[p.name]) {
2017-07-10 22:53:06 +00:00
// Alias to noop for ssr:false plugins
serverConfig.resolve.alias[p.name] = p.ssr ? src : './empty.js'
}
})
// Make a dll plugin after compile to make next dev builds faster
if (this.options.build.dll && this.options.dev) {
compilersOptions.push(dllWebpackConfig.call(this, clientConfig))
}
2017-06-15 22:19:53 +00:00
// Simulate webpack multi compiler interface
// Separate compilers are simpler, safer and faster
this.compiler = { compilers: [] }
2017-06-15 22:19:53 +00:00
this.compiler.plugin = (...args) => {
this.compiler.compilers.forEach(compiler => {
compiler.plugin(...args)
})
}
// Initialize shared FS and Cache
const sharedFS = this.options.dev && new MFS()
const sharedCache = {}
// Initialize compilers
compilersOptions.forEach(compilersOption => {
const compiler = webpack(compilersOption)
if (sharedFS && !compiler.name.includes('-dll')) {
compiler.outputFileSystem = sharedFS
}
compiler.cache = sharedCache
this.compiler.compilers.push(compiler)
})
// Access to compilers with name
this.compiler.compilers.forEach(compiler => {
if (compiler.name) {
this.compiler[compiler.name] = compiler
}
})
// Run after each compile
2017-07-03 11:11:40 +00:00
this.compiler.plugin('done', async stats => {
// Don't reload failed builds
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
if (stats.hasErrors()) {
return
}
// console.log(stats.toString({ chunks: true }))
// Reload renderer if available
if (this.nuxt.renderer) {
this.nuxt.renderer.loadResources(sharedFS || fs)
}
2017-07-03 11:11:40 +00:00
2017-07-03 11:28:10 +00:00
await this.applyPluginsAsync('done', { builder: this, stats })
})
2017-06-15 22:19:53 +00:00
// Add dev Stuff
2017-06-11 14:17:36 +00:00
if (this.options.dev) {
this.webpackDev()
2017-06-11 14:17:36 +00:00
}
2017-07-03 11:11:40 +00:00
await this.applyPluginsAsync('compile', { builder: this, compiler: this.compiler })
2017-06-15 22:19:53 +00:00
// Start Builds
await sequence(this.compiler.compilers, compiler => new Promise((resolve, reject) => {
2017-06-15 14:53:00 +00:00
if (this.options.dev) {
2017-06-18 11:50:43 +00:00
// --- Dev Build ---
2017-06-15 22:19:53 +00:00
if (compiler.options.name === 'client') {
// Client watch is started by dev-middleware
resolve()
} else if (compiler.options.name.includes('-dll')) {
// DLL builds should run once
compiler.run((err, stats) => {
if (err) {
return reject(err)
}
debug('[DLL] updated')
resolve()
})
2017-06-15 22:19:53 +00:00
} else {
// Build and watch for changes
2017-06-18 11:50:43 +00:00
compiler.watch(this.options.watchers.webpack, (err) => {
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
2017-06-18 11:50:43 +00:00
if (err) {
return reject(err)
}
resolve()
})
2017-06-15 22:19:53 +00:00
}
2017-06-15 14:53:00 +00:00
} else {
// --- Production Build ---
2017-06-18 11:50:43 +00:00
compiler.run((err, stats) => {
2017-06-20 13:12:33 +00:00
/* istanbul ignore if */
if (err) {
return reject(err)
}
2017-06-18 15:41:49 +00:00
if (err) return console.error(err) // eslint-disable-line no-console
2017-06-18 11:50:43 +00:00
// Show build stats for production
console.log(stats.toString(this.webpackStats)) // eslint-disable-line no-console
2017-06-19 15:47:31 +00:00
/* istanbul ignore if */
2017-06-18 11:50:43 +00:00
if (stats.hasErrors()) {
return reject(new Error('Webpack build exited with errors'))
}
resolve()
})
2017-06-15 14:53:00 +00:00
}
2017-06-15 22:19:53 +00:00
}))
2017-07-03 11:28:10 +00:00
await this.applyPluginsAsync('compiled', this)
2017-06-11 14:17:36 +00:00
}
webpackDev () {
2017-06-15 22:19:53 +00:00
debug('Adding webpack middleware...')
// Create webpack dev middleware
this.webpackDevMiddleware = pify(webpackDevMiddleware(this.compiler.client, Object.assign({
2017-06-15 14:53:00 +00:00
publicPath: this.options.build.publicPath,
2017-06-11 14:17:36 +00:00
stats: this.webpackStats,
noInfo: true,
2017-06-15 22:19:53 +00:00
quiet: true,
2017-06-11 14:17:36 +00:00
watchOptions: this.options.watchers.webpack
}, this.options.build.devMiddleware)))
this.webpackHotMiddleware = pify(webpackHotMiddleware(this.compiler.client, Object.assign({
log: false,
heartbeat: 2500
}, this.options.build.hotMiddleware)))
2017-06-11 14:17:36 +00:00
// Inject to renderer instance
if (this.nuxt.renderer) {
this.nuxt.renderer.webpackDevMiddleware = this.webpackDevMiddleware
this.nuxt.renderer.webpackHotMiddleware = this.webpackHotMiddleware
}
2017-06-15 22:19:53 +00:00
// Stop webpack middleware on nuxt.close()
this.nuxt.plugin('close', () => new Promise(resolve => {
this.webpackDevMiddleware.close(() => resolve())
}))
// Start watching files
this.watchFiles()
2017-06-11 14:17:36 +00:00
}
watchFiles () {
const patterns = [
r(this.options.srcDir, 'layouts'),
r(this.options.srcDir, 'store'),
r(this.options.srcDir, 'middleware'),
2017-08-17 13:13:56 +00:00
r(this.options.srcDir, 'layouts/*.vue'),
r(this.options.srcDir, 'layouts/**/*.vue')
2017-06-11 14:17:36 +00:00
]
if (this._nuxtPages) {
patterns.push(r(this.options.srcDir, 'pages'))
2017-08-17 13:13:56 +00:00
patterns.push(r(this.options.srcDir, 'pages/*.vue'))
patterns.push(r(this.options.srcDir, 'pages/**/*.vue'))
2017-06-11 14:17:36 +00:00
}
const options = Object.assign({}, this.options.watchers.chokidar, {
ignoreInitial: true
})
/* istanbul ignore next */
const refreshFiles = _.debounce(() => this.generateRoutesAndFiles(), 200)
2017-06-15 22:19:53 +00:00
// Watch for src Files
let filesWatcher = chokidar.watch(patterns, options)
2017-06-11 14:17:36 +00:00
.on('add', refreshFiles)
.on('unlink', refreshFiles)
2017-06-15 22:19:53 +00:00
2017-06-11 14:17:36 +00:00
// Watch for custom provided files
2017-06-15 22:19:53 +00:00
let customFilesWatcher = chokidar.watch(_.uniq(this.options.build.watch), options)
2017-06-11 14:17:36 +00:00
.on('change', refreshFiles)
2017-06-15 22:19:53 +00:00
// Stop watching on nuxt.close()
this.nuxt.plugin('close', () => {
filesWatcher.close()
customFilesWatcher.close()
})
2017-06-11 14:17:36 +00:00
}
}
const STATUS = {
INITIAL: 1,
BUILD_DONE: 2,
BUILDING: 3
}