vue-build

#!/usr/bin/env node

var fs = require('fs')
var path = require('path')
var program = require('commander')
var chalk = require('chalk')
var home = require('user-home')
var webpack = require('webpack')
var webpackMerge = require('webpack-merge')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
var PostCompilePlugin = require('post-compile-webpack-plugin')
var ProgressPlugin = require('webpack/lib/ProgressPlugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var isYarn = require('installed-by-yarn-globally')
var CopyPlugin = require('copy-webpack-plugin')
var tildify = require('tildify')
var loaders = require('../lib/loaders')
var logger = require('../lib/logger')
var run = require('../lib/run')

/**
 * Usage.
 */

program
  .usage('[entry]')
  .option('--dist [directory]', 'Output directory for bundled files')
  .option('--port [port]', 'Server port')
  .option('--host [host]', 'Server host', 'localhost')
  .option('--prod, --production', 'Build for production')
  .option('-w, --watch', 'Run in watch mode')
  .option('-m, --mount', 'Auto-create app instance from given component, true for `.vue` file')
  .option('-c, --config [file]', 'Use custom config file')
  .option('--wp, --webpack [file]', 'Use custom webpack config file')
  .option('--disable-config', 'You do not want to use config file')
  .option('--disable-webpack-config', 'You do not want to use webpack config file')
  .option('-o, --open', 'Open browser')
  .option('--proxy [url]', 'Proxy API request')
  .option('--lib [libraryName]', 'Distribute component in UMD format')
  .option('--disable-compress', 'Disable compress when building in production mode')
  .parse(process.argv)

var args = program.args
var production = program.production

process.env.NODE_ENV = production ? 'production' : 'development'

var localConfig

// config option in only available in CLI option
if (!program.disableConfig) {
  var localConfigPath = typeof program.config === 'string'
    ? cwd(program.config)
    : path.join(home, '.vue', 'config.js')
  var hasLocalConfig = fs.existsSync(localConfigPath)
  if (hasLocalConfig) {
    console.log(`> Using config file at ${chalk.yellow(tildify(localConfigPath))}`)
    localConfig = require(localConfigPath)
  }
}

var options = merge({
  port: 4000,
  dist: 'dist',
  host: 'localhost'
}, localConfig, {
  entry: args[0],
  config: program.config,
  port: program.port,
  host: program.host,
  open: program.open,
  dist: program.dist,
  webpack: program.webpack,
  disableWebpackConfig: program.disableWebpackConfig,
  mount: program.mount,
  proxy: program.proxy,
  production: program.production,
  lib: program.lib,
  watch: program.watch,
  disableCompress: program.disableCompress
})

function help () {
  if (!options.config && !options.entry) {
    return program.help()
  }
}
help()

var cssOptions = {
  extract: production,
  sourceMap: true
}

var postcssOptions = {
  plugins: [
    require('autoprefixer')(Object.assign({
      browsers: ['ie > 8', 'last 5 versions']
    }, options.autoprefixer))
  ]
}

if (options.postcss) {
  if (Object.prototype.toString.call(options.postcss) === '[object Object]') {
    var plugins = options.postcss.plugins
    if (plugins) {
      postcssOptions.plugins = postcssOptions.plugins.concat(plugins)
      delete options.postcss.plugins
    }
    Object.assign(postcssOptions, options.postcss)
  } else {
    postcssOptions = options.postcss
  }
}

var babelOptions = Object.assign({
  babelrc: true,
  cacheDirectory: true,
  sourceMaps: production ? 'both' : false,
  presets: []
}, options.babel)

var useBabelRc = babelOptions.babelrc && fs.existsSync('.babelrc')
if (useBabelRc) {
  console.log('> Using .babelrc in current working directory')
} else {
  babelOptions.babelrc = false
  babelOptions.presets.push(require.resolve('babel-preset-vue-app'))
}

var filenames = getFilenames(options)

var webpackConfig = {
  entry: {
    client: []
  },
  output: {
    path: cwd(options.dist),
    filename: filenames.js,
    publicPath: '/'
  },
  performance: {
    hints: false
  },
  resolve: {
    extensions: ['.js', '.vue', '.css'],
    modules: [
      cwd(),
      cwd('node_modules'), // modules in cwd's node_modules
      ownDir('node_modules') // modules in package's node_modules
    ],
    alias: {}
  },
  resolveLoader: {
    modules: [
      cwd('node_modules'), // loaders in cwd's node_modules
      ownDir('node_modules') // loaders in package's node_modules
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: [/node_modules/]
      },
      {
        test: /\.es6$/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: postcssOptions,
          loaders: loaders.cssLoaders(cssOptions)
        }
      },
      {
        test: /\.(ico|jpg|png|gif|svg|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
        loader: 'file-loader',
        query: {
          name: filenames.static
        }
      }
    ].concat(loaders.styleLoaders(cssOptions))
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        context: process.cwd(),
        postcss: postcssOptions,
        babel: babelOptions
      }
    })
  ]
}

// copy ./static/** to dist folder
if (fs.existsSync('static')) {
  webpackConfig.plugins.push(new CopyPlugin([{
    from: 'static',
    to: './'
  }]))
}

// if entry ends with `.vue` and no `mount` option was specified
// we implicitly set `mount` to true unless `lib` is set
// for `.js` component you can set `mount` to true manually
if (options.mount === undefined && !options.lib && /\.vue$/.test(options.entry)) {
  options.mount = true
}
// create a Vue instance to load given component
// set an alias to the path of the component
// otherwise use it directly as webpack entry
if (options.mount) {
  webpackConfig.entry.client.push(ownDir('lib/default-entry.es6'))
  webpackConfig.resolve.alias['your-tasteful-component'] = cwd(options.entry)
} else if (Array.isArray(options.entry)) {
  webpackConfig.entry.client = options.client
} else if (typeof options.entry === 'object') {
  webpackConfig.entry = options.entry
} else {
  webpackConfig.entry.client.push(options.entry)
}

// the `lib` mode
// distribute the entry file as a component (umd format)
if (options.lib) {
  webpackConfig.output.filename = replaceExtension(options.entry, '.js')
  webpackConfig.output.library = typeof options.lib === 'string'
    ? options.lib
    : getLibraryName(replaceExtension(options.entry, ''))
  webpackConfig.output.libraryTarget = 'umd'
} else if (options.html !== false) {
  // only output index.html in non-lib mode
  var html = Array.isArray(options.html) ? options.html : [options.html || {}]

  html.forEach(item => {
    webpackConfig.plugins.unshift(
      new HtmlWebpackPlugin(Object.assign({
        title: 'Vue App',
        template: ownDir('lib/template.html')
      }, item))
    )
  })
}

// installed by `yarn global add`
if (isYarn(__dirname)) {
  // modules in yarn global node_modules
  // because of yarn's flat node_modules structure
  webpackConfig.resolve.modules.push(ownDir('..'))
  // loaders in yarn global node_modules
  webpackConfig.resolveLoader.modules.push(ownDir('..'))
}

if (production) {
  webpackConfig.plugins.push(
    new ProgressPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: !options.disableCompress
    }),
    new ExtractTextPlugin(filenames.css)
  )

  if (options.disableCompress) {
    webpackConfig.devtool = false
  } else {
    webpackConfig.devtool = 'source-map'
    webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compressor: {
        warnings: false,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
        negate_iife: false
      },
      output: {
        comments: false
      }
    }))
  }
} else {
  webpackConfig.devtool = 'eval-source-map'
  webpackConfig.plugins.push(
    new FriendlyErrorsPlugin(),
    new PostCompilePlugin(() => {
      console.log(`> Open http://${options.host}:${options.port}`)
    })
  )
}

// webpack
// object: merge with webpack config
// function: mutate webpack config
// string: load webpack config file then merge with webpack config
if (!options.disableWebpackConfig) {
  if (typeof options.webpack === 'object') {
    webpackConfig = webpackMerge.smart(webpackConfig, options.webpack)
  } else if (typeof options.webpack === 'function') {
    webpackConfig = options.webpack(webpackConfig, options, webpack) || webpackConfig
  } else {
    var localWebpackConfigPath = typeof options.webpack === 'string'
      ? cwd(options.webpack)
      : path.join(home, '.vue', 'webpack.config.js')
    var hasLocalWebpackConfig = fs.existsSync(localWebpackConfigPath)
    if (hasLocalWebpackConfig) {
      console.log(`> Using webpack config file at ${chalk.yellow(tildify(localWebpackConfigPath))}`)
      webpackConfig = webpackMerge.smart(webpackConfig, require(localWebpackConfigPath))
    }
  }
}

if (!options.watch && !options.production) {
  webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
  var hmrEntries = options.hmrEntries || ['client']
  var hmrClient = require.resolve('webpack-hot-middleware/client') + `?reload=true&path=http://${options.host}:${options.port}/__webpack_hmr`
  hmrEntries.forEach(name => {
    if (Array.isArray(webpackConfig.entry[name])) {
      webpackConfig.entry[name].unshift(hmrClient)
    } else {
      webpackConfig.entry[name] = [hmrClient, webpackConfig.entry[name]]
    }
  })
}

// only check entry when there's no custom config
if (!options.config && !fs.existsSync(options.entry)) {
  logger.fatal(`${chalk.yellow(options.entry)} does not exist, did you forget to create one?`)
}

run(webpackConfig, options)

function merge (obj) {
  var i = 1
  var target
  var key

  for (; i < arguments.length; i++) {
    target = arguments[i]
    for (key in target) {
      if (Object.prototype.hasOwnProperty.call(target, key) && target[key] !== undefined) {
        obj[key] = target[key]
      }
    }
  }

  return obj
}

function replaceExtension (entry, ext) {
  return path.basename(entry).replace(/\.(vue|js)$/, ext)
}

function getLibraryName (fileName) {
  return fileName.replace(/[-_.]([\w])/, (_, p1) => p1.toUpperCase())
}

function getFilenames (options) {
  return Object.assign({
    js: options.production ? '[name].[chunkhash:8].js' : '[name].js',
    css: options.lib ? `${replaceExtension(options.entry, '.css')}` : '[name].[contenthash:8].css',
    static: options.lib ? 'static/[name].[ext]' : 'static/[name].[hash:8].[ext]'
  }, options.filename)
}

function cwd (file) {
  return path.resolve(file || '')
}

function ownDir (file) {
  return path.join(__dirname, '..', file || '')
}