Nuxt/lib/build/index.js

'use strict'

const debug = require('debug')('nuxt:build')
const _ = require('lodash')
const del = require('del')
const fs = require('fs')
const glob = require('glob-promise')
const hash = require('hash-sum')
const mkdirp = require('mkdirp-then')
const pify = require('pify')
const webpack = require('webpack')
const { createBundleRenderer } = require('vue-server-renderer')
const { join, resolve } = require('path')
const r = resolve

const defaults = {
  filenames: {
    css: 'style.css',
    vendor: 'vendor.bundle.js',
    app: 'nuxt.bundle.js'
  },
  vendor: [],
  loaders: []
}
const defaultsLoaders = [
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url',
    options: {
      limit: 1000, // 1KO
      name: 'img/[name].[ext]?[hash]'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 1000, // 1 KO
      name: 'fonts/[name].[hash:7].[ext]'
    }
  }
]

module.exports = function * () {
  const noBuild = this.options.build === false
  // Defaults build options
  if (this.options.build && Array.isArray(this.options.build.loaders)) {
    this.options.build = _.defaultsDeep(this.options.build, defaults)
  } else {
    this.options.build = _.defaultsDeep(this.options.build, defaults, { loaders: defaultsLoaders })
  }
  if (noBuild) {
    const serverConfig = getWebpackServerConfig.call(this)
    const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
    createRenderer.call(this, fs.readFileSync(bundlePath, 'utf8'))
    return Promise.resolve()
  }
  /*
  ** Check if pages dir exists and warn if not
  */
  if (!fs.existsSync(join(this.dir, 'pages'))) {
    if (fs.existsSync(join(this.dir, '..', 'pages'))) {
      console.error('> No `pages` directory found. Did you mean to run `nuxt` in the parent (`../`) directory?')
    } else {
      console.error('> Couldn\'t find a `pages` directory. Please create one under the project root')
    }
    process.exit()
  }
  if (this.options.store && !fs.existsSync(join(this.dir, 'store'))) {
    console.error('> No `store` directory found (store option activated). Please create on under the project root')
    process.exit()
  }
  if (this.options.store && !fs.existsSync(join(this.dir, 'store', 'index.js'))) {
    console.error('> No `store/index.js` file found (store option activated). Please create the file.')
    process.exit()
  }
  debug(`App root: ${this.dir}`)
  debug('Generating .nuxt/ files...')
  /*
  ** Create .nuxt/, .nuxt/components and .nuxt/dist folders
  */
  try {
    yield del(r(this.dir, '.nuxt'))
  } catch (e) {}
  yield mkdirp(r(this.dir, '.nuxt/components'))
  if (!this.dev) {
    yield mkdirp(r(this.dir, '.nuxt/dist'))
  }
  /*
  ** Generate routes based on files
  */
  const files = yield glob('pages/**/*.vue', { cwd: this.dir })
  let routes = []
  files.forEach((file) => {
    let path = file.replace(/^pages/, '').replace(/index\.vue$/, '/').replace(/\.vue$/, '').replace(/\/{2,}/g, '/')
    if (path[1] === '_') return
    routes.push({ path: path, component: file })
  })
  this.options.routes.forEach((route) => {
    if (route.component.slice(-4) !== '.vue') {
      route.component = route.component + '.vue'
    }
    route.component = r(this.dir, route.component)
  })
  this.options.routes = routes.concat(this.options.routes)
  // TODO: check .children
  this.options.routes.forEach((route) => {
    route._component = r(this.dir, route.component)
    route._name = '_' + hash(route._component)
    route.component = route._name
  })
  /*
  ** Interpret and move template files to .nuxt/
  */
  let templatesFiles = [
    'App.vue',
    'client.js',
    'index.js',
    'router.js',
    'server.js',
    'utils.js',
    'components/Loading.vue'
  ]
  let templateVars = {
    isDev: this.dev,
    store: this.options.store,
    css: this.options.css,
    plugins: this.options.plugins.map((p) => r(this.dir, p)),
    loading: (this.options.loading === 'string' ? r(this.dir, this.options.loading) : this.options.loading),
    components: {
      Loading: r(__dirname, '..', 'app', 'components', 'Loading.vue'),
      ErrorPage: r(__dirname, '..', '..', 'pages', (this.dev ? '_error-debug.vue' : '_error.vue'))
    },
    routes: this.options.routes
  }
  if (this.options.store) {
    templateVars.storePath = r(this.dir, 'store')
  }
  if (this.dev && files.includes('pages/_error-debug.vue')) {
    templateVars.components.ErrorPage = r(this.dir, 'pages/_error-debug.vue')
  }
  if (!this.dev && files.includes('pages/_error.vue')) {
    templateVars.components.ErrorPage = r(this.dir, 'pages/_error.vue')
  }
  const readFile = pify(fs.readFile)
  const writeFile = pify(fs.writeFile)
  let moveTemplates = templatesFiles.map((file) => {
    return readFile(r(__dirname, '..', 'app', file), 'utf8')
    .then((fileContent) => {
      const template = _.template(fileContent)
      const content = template(templateVars)
      return writeFile(r(this.dir, '.nuxt', file), content, 'utf8')
    })
  })
  yield moveTemplates
  debug('Files moved!')
  /*
  ** Generate .nuxt/dist/ files
  */
  if (this.dev) {
    debug('Adding webpack middlewares...')
    createWebpackMiddlewares.call(this)
    webpackWatchAndUpdate.call(this)
  } else {
    debug('Building files...')
    yield [
      webpackRunClient.call(this),
      webpackRunServer.call(this)
    ]
  }
}

function getWebpackClientConfig () {
  const clientConfigPath = r(__dirname, 'webpack', 'client.config.js')
  return require(clientConfigPath).call(this)
}

function getWebpackServerConfig () {
  const configServerPath = r(__dirname, 'webpack', 'server.config.js')
  return require(configServerPath).call(this)
}

function createWebpackMiddlewares () {
  const clientConfig = getWebpackClientConfig.call(this)
  // setup on the fly compilation + hot-reload
  clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
  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,
    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()
    stats.errors.forEach(err => console.error(err))
    stats.warnings.forEach(err => console.warn(err))
    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)
      console.log('[nuxt:build:client]\n', stats.toString({ chunks: false, colors: true }))
      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)
      console.log('[nuxt:build:server]\n', stats.toString({ chunks: false, colors: true }))
      const bundlePath = join(serverConfig.output.path, serverConfig.output.filename)
      createRenderer.call(this, fs.readFileSync(bundlePath, 'utf8'))
      resolve()
    })
  })
}

function createRenderer (bundle) {
  process.env.VUE_ENV = (process.env.VUE_ENV ? process.env.VUE_ENV : 'server')
  // 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
}