Update dependencies and improve build system

service/commands/build.js

@@ -0,0 +1,40 @@
+'use strict'
+
+const loadEnv = require('../utils/loadEnv')
+loadEnv()
+loadEnv('production')
+
+const rm = require('rimraf')
+const webpack = require('webpack')
+
+const { error, done } = require('../utils/logger')
+const paths = require('../utils/paths')
+
+const webpackConfig = require('../config/prod')
+const config = require('../project.config')
+
+
+rm(paths.resolve(config.outputDir), (err) => {
+  if (err) throw err
+
+  webpack(webpackConfig, (err, stats) => {
+    if (err) throw err
+
+    process.stdout.write(
+      stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false,
+      }) + '\n\n'
+    )
+
+    if (stats.hasErrors()) {
+      error('Build failed with errors.\n')
+      process.exit(1)
+    }
+
+    done('Build complete.\n')
+  })
+})

service/config/base.js

@@ -0,0 +1,60 @@
+'use strict'
+
+const { DefinePlugin } = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
+const ESLintPlugin = require('eslint-webpack-plugin')
+
+const resolveClientEnv = require('../utils/resolveClientEnv')
+const paths = require('../utils/paths')
+
+const config = require('../project.config')
+
+const isProd = process.env.NODE_ENV === 'production'
+const outputFileName = paths.getAssetPath(`js/[name]${isProd ? '' : ''}.js`)
+
+module.exports = {
+  context: process.cwd(),
+
+  entry: {
+    app: './src/main.js',
+  },
+
+  output: {
+    path: paths.resolve(config.outputDir),
+    publicPath: config.dev.publicPath,
+    filename: outputFileName,
+    chunkFilename: outputFileName,
+  },
+
+  resolve: {
+    alias: {
+      '@': paths.resolve('src'),
+    },
+    extensions: ['.js','.vue', '.json'],
+  },
+
+  plugins: [
+    new ESLintPlugin({
+      emitError: true,
+      emitWarning: true,
+      extensions: ['.js', '.vue'],
+      formatter: require('eslint-formatter-friendly'),
+    }),
+    new VueLoaderPlugin(),
+    new DefinePlugin({
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
+      ...resolveClientEnv({ publicPath: config.dev.publicPath }),
+    }),
+  ],
+
+  module: {
+    noParse: /^(vue)$/,
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+    ],
+  },
+}

service/config/css.js

@@ -0,0 +1,52 @@
+'use strict'
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const genStyleRules = () => {
+  const isProd = process.env.NODE_ENV === 'production'
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      // how many loaders before css-loader should be applied to [@import]ed resources.
+      // stylePostLoader injected by vue-loader + postcss-loader
+      importLoaders: 1 + 1,
+      esModule: false, // css-loader using ES Modules as default in v4, but vue-style-loader support cjs only.
+    },
+  }
+  const postcssLoader = {
+    loader: 'postcss-loader'
+  }
+  const extractPluginLoader = {
+    loader: MiniCssExtractPlugin.loader,
+  }
+  const vueStyleLoader = {
+    loader: 'vue-style-loader',
+  }
+
+  function createCSSRule(test, loader, loaderOptions) {
+    const loaders = [cssLoader, postcssLoader]
+
+    if (isProd) {
+      loaders.unshift(extractPluginLoader)
+    } else {
+      loaders.unshift(vueStyleLoader)
+    }
+
+    if (loader) {
+      loaders.push({ loader, options: loaderOptions })
+    }
+
+    return { test, use: loaders }
+  }
+
+  return [
+    createCSSRule(/\.css$/),
+  ]
+}
+
+module.exports = {
+  module: {
+    rules: genStyleRules(),
+  },
+}

service/config/dev.js

@@ -0,0 +1,34 @@
+'use strict'
+
+const { merge } = require('webpack-merge')
+
+const baseWebpackConfig = require('./base')
+const cssWebpackConfig = require('./css')
+const config = require('../project.config')
+
+module.exports = merge(baseWebpackConfig, cssWebpackConfig, {
+  mode: 'development',
+
+  devtool: 'eval-cheap-module-source-map',
+
+  devServer: {
+    historyApiFallback: {
+      rewrites: [{ from: /./, to: '/index.html' }],
+    },
+    dev: {
+      publicPath: config.dev.publicPath,
+    },
+    overlay: {
+      warnings: true,
+      errors: true,
+    },
+    open: false,
+    host: '0.0.0.0',
+    port: config.dev.port,
+    liveReload: false,
+  },
+
+  infrastructureLogging: {
+    level: 'warn',
+  },
+})

service/config/prod.js

@@ -0,0 +1,40 @@
+'use strict'
+
+const { merge } = require('webpack-merge')
+const TerserPlugin = require('terser-webpack-plugin')
+
+const baseWebpackConfig = require('./base')
+const cssWebpackConfig = require('./css')
+const config = require('../project.config')
+const terserOptions = require('./terserOptions')
+
+module.exports = merge(baseWebpackConfig, cssWebpackConfig, {
+  mode: 'production',
+
+  output: {
+    publicPath: config.build.publicPath,
+  },
+
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin(terserOptions())],
+    moduleIds: 'deterministic',
+    splitChunks: {
+      cacheGroups: {
+        defaultVendors: {
+          name: `chunk-vendors`,
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          chunks: 'initial',
+        },
+        common: {
+          name: `chunk-common`,
+          minChunks: 2,
+          priority: -20,
+          chunks: 'initial',
+          reuseExistingChunk: true,
+        },
+      },
+    },
+  },
+})

service/config/terserOptions.js

@@ -0,0 +1,42 @@
+'use strict'
+
+module.exports = (options) => ({
+  terserOptions: {
+    compress: {
+      // turn off flags with small gains to speed up minification
+      arrows: false,
+      collapse_vars: false, // 0.3kb
+      comparisons: false,
+      computed_props: false,
+      hoist_funs: false,
+      hoist_props: false,
+      hoist_vars: false,
+      inline: false,
+      loops: false,
+      negate_iife: false,
+      properties: false,
+      reduce_funcs: false,
+      reduce_vars: false,
+      switches: false,
+      toplevel: false,
+      typeofs: false,
+
+      // a few flags with noticable gains/speed ratio
+      // numbers based on out of the box vendor bundle
+      booleans: true, // 0.7kb
+      if_return: true, // 0.4kb
+      sequences: true, // 0.7kb
+      unused: true, // 2.3kb
+
+      // required features to drop conditional branches
+      conditionals: true,
+      dead_code: true,
+      evaluate: true,
+    },
+    mangle: {
+      safari10: true,
+    },
+  },
+  // parallel: options.parallel,
+  extractComments: false,
+})

service/project.config.js

@@ -0,0 +1,14 @@
+'use strict'
+
+module.exports = {
+  outputDir: 'dist',
+
+  dev: {
+    publicPath: '/',
+    port: 8080,
+  },
+
+  build: {
+    publicPath: './',
+  },
+}

service/utils/getLocalIP.js

@@ -0,0 +1,17 @@
+'use strict'
+
+const os = require('os')
+
+module.exports = function getLocalIP() {
+  const interfaces = os.networkInterfaces()
+
+  for (const devName in interfaces) {
+    const iface = interfaces[devName]
+    for (let i = 0; i < iface.length; i++) {
+      const alias = iface[i]
+      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+        return alias.address
+      }
+    }
+  }
+}

service/utils/loadEnv.js

@@ -0,0 +1,39 @@
+'use strict'
+
+const path = require('path')
+const dotenv = require('dotenv')
+const dotenvExpand = require('dotenv-expand')
+const { error } = require('./logger')
+
+module.exports = function loadEnv(mode) {
+  const basePath = path.resolve(process.cwd(), `.env${mode ? `.${mode}` : ``}`)
+  const localPath = `${basePath}.local`
+
+  const load = (envPath) => {
+    try {
+      const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
+      dotenvExpand(env)
+    } catch (err) {
+      // only ignore error if file is not found
+      if (err.toString().indexOf('ENOENT') < 0) {
+        error(err)
+      }
+    }
+  }
+
+  load(localPath)
+  load(basePath)
+
+  // by default, NODE_ENV and BABEL_ENV are set to "development" unless mode
+  // is production or test. However the value in .env files will take higher
+  // priority.
+  if (mode) {
+    const defaultNodeEnv = mode === 'production' || mode === 'test' ? mode : 'development'
+    if (process.env.NODE_ENV == null) {
+      process.env.NODE_ENV = defaultNodeEnv
+    }
+    if (process.env.BABEL_ENV == null) {
+      process.env.BABEL_ENV = defaultNodeEnv
+    }
+  }
+}

service/utils/logger.js

@@ -0,0 +1,72 @@
+'use strict'
+
+const chalk = require('chalk')
+const stripAnsi = require('strip-ansi')
+const readline = require('readline')
+const EventEmitter = require('events')
+
+exports.events = new EventEmitter()
+
+function _log(type, tag, message) {
+  if (process.env.VUE_CLI_API_MODE && message) {
+    exports.events.emit('log', {
+      message,
+      type,
+      tag,
+    })
+  }
+}
+
+const format = (label, msg) => {
+  return msg
+    .split('\n')
+    .map((line, i) => {
+      return i === 0 ? `${label} ${line}` : line.padStart(stripAnsi(label).length)
+    })
+    .join('\n')
+}
+
+const chalkTag = (msg) => chalk.bgBlackBright.white.dim(` ${msg} `)
+
+exports.log = (msg = '', tag = null) => {
+  tag ? console.log(format(chalkTag(tag), msg)) : console.log(msg)
+  _log('log', tag, msg)
+}
+
+exports.info = (msg, tag = null) => {
+  console.log(format(chalk.bgBlue.black(' INFO ') + (tag ? chalkTag(tag) : ''), msg))
+  _log('info', tag, msg)
+}
+
+exports.done = (msg, tag = null) => {
+  console.log(format(chalk.bgGreen.black(' DONE ') + (tag ? chalkTag(tag) : ''), msg))
+  _log('done', tag, msg)
+}
+
+exports.warn = (msg, tag = null) => {
+  console.warn(
+    format(chalk.bgYellow.black(' WARN ') + (tag ? chalkTag(tag) : ''), chalk.yellow(msg))
+  )
+  _log('warn', tag, msg)
+}
+
+exports.error = (msg, tag = null) => {
+  console.error(format(chalk.bgRed(' ERROR ') + (tag ? chalkTag(tag) : ''), chalk.red(msg)))
+  _log('error', tag, msg)
+  if (msg instanceof Error) {
+    console.error(msg.stack)
+    _log('error', tag, msg.stack)
+  }
+}
+
+exports.clearConsole = (title) => {
+  if (process.stdout.isTTY) {
+    const blank = '\n'.repeat(process.stdout.rows)
+    console.log(blank)
+    readline.cursorTo(process.stdout, 0, 0)
+    readline.clearScreenDown(process.stdout)
+    if (title) {
+      console.log(title)
+    }
+  }
+}

service/utils/paths.js

@@ -0,0 +1,9 @@
+'use strict'
+
+const path = require('path')
+
+// gen static file path
+exports.getAssetPath = (...args) => path.posix.join('static', ...args)
+
+// gen absolute path
+exports.resolve = (...args) => path.posix.join(process.cwd(), ...args)

service/utils/resolveClientEnv.js

@@ -0,0 +1,22 @@
+const prefixRE = /^VUE_APP_/
+
+module.exports = function resolveClientEnv(options, raw) {
+  const env = {}
+  Object.keys(process.env).forEach((key) => {
+    if (prefixRE.test(key) || key === 'NODE_ENV') {
+      env[key] = process.env[key]
+    }
+  })
+  env.PUBLIC_PATH = options.publicPath
+
+  if (raw) {
+    return env
+  }
+
+  for (const key in env) {
+    env[key] = JSON.stringify(env[key])
+  }
+  return {
+    'process.env': env,
+  }
+}

service/utils/spinner.js

@@ -0,0 +1,57 @@
+'use strict'
+
+const ora = require('ora')
+const chalk = require('chalk')
+
+const spinner = ora()
+let lastMsg = null
+let isPaused = false
+
+exports.logWithSpinner = (symbol, msg) => {
+  if (!msg) {
+    msg = symbol
+    symbol = chalk.green('✔')
+  }
+  if (lastMsg) {
+    spinner.stopAndPersist({
+      symbol: lastMsg.symbol,
+      text: lastMsg.text,
+    })
+  }
+  spinner.text = ' ' + msg
+  lastMsg = {
+    symbol: symbol + ' ',
+    text: msg,
+  }
+  spinner.start()
+}
+
+exports.stopSpinner = (persist) => {
+  if (lastMsg && persist !== false) {
+    spinner.stopAndPersist({
+      symbol: lastMsg.symbol,
+      text: lastMsg.text,
+    })
+  } else {
+    spinner.stop()
+  }
+  lastMsg = null
+}
+
+exports.pauseSpinner = () => {
+  if (spinner.isSpinning) {
+    spinner.stop()
+    isPaused = true
+  }
+}
+
+exports.resumeSpinner = () => {
+  if (isPaused) {
+    spinner.start()
+    isPaused = false
+  }
+}
+
+exports.failSpinner = (text) => {
+  spinner.fail(text)
+}