refactor: improve installation progress

Author: yyx990803

packages/@vue/cli-plugin-unit-mocha/package.json

@@ -24,7 +24,7 @@
     "execa": "^0.9.0",
     "jsdom": "^11.6.1",
     "jsdom-global": "^3.0.2",
-    "mocha": "^5.0.0",
+    "mocha": "^4.1.0",
     "mocha-webpack": "^1.0.1",
     "webpack-node-externals": "^1.6.0"
   },

packages/@vue/cli/lib/Creator.js

@@ -1,7 +1,7 @@
-const path = require('path')
 const chalk = require('chalk')
 const debug = require('debug')
 const execa = require('execa')
+const axios = require('axios')
 const resolve = require('resolve')
 const inquirer = require('inquirer')
 const Generator = require('./Generator')
@@ -85,36 +85,52 @@ module.exports = class Creator {
       (hasYarn ? 'yarn' : 'npm')
     )
 
-    // write base package.json to disk
     clearConsole()
-    logWithSpinner('✨', `Creating project in ${chalk.yellow(context)}.`)
+    logWithSpinner(`✨`, `Creating project in ${chalk.yellow(context)}.`)
+
+    // get latest CLI version
+    let latestCLIVersion
+    if (!isTestOrDebug) {
+      const res = await axios.get(`https://registry.npmjs.org/@vue%2Fcli/`)
+      latestCLIVersion = res.data['dist-tags'].latest
+    } else {
+      latestCLIVersion = require('../package.json').version
+    }
+    // generate package.json with plugin dependencies
+    const pkg = {
+      name,
+      version: '0.1.0',
+      private: true,
+      devDependencies: {}
+    }
+    const deps = Object.keys(options.plugins)
+    deps.forEach(dep => {
+      pkg.devDependencies[dep] = `^${latestCLIVersion}`
+    })
+    // write package.json
     await writeFileTree(context, {
-      'package.json': JSON.stringify({
-        name,
-        version: '0.1.0',
-        private: true
-      }, null, 2)
+      'package.json': JSON.stringify(pkg, null, 2)
     })
 
-    // intilaize git repository
+    // intilaize git repository before installing deps
+    // so that vue-cli-service can setup git hooks.
     if (hasGit) {
-      logWithSpinner('🗃', `Initializing git repository...`)
+      logWithSpinner(`🗃`, `Initializing git repository...`)
       await run('git init')
     }
 
     // install plugins
-    logWithSpinner('⚙', `Installing CLI plugins. This might take a while...`)
-    const deps = Object.keys(options.plugins)
+    stopSpinner()
+    log(`⚙  Installing CLI plugins. This might take a while...`)
     if (isTestOrDebug) {
       // in development, avoid installation process
-      await setupDevProject(context, deps)
+      await setupDevProject(context)
     } else {
-      await installDeps(context, packageManager, deps, cliOptions.registry)
+      await installDeps(context, packageManager, cliOptions.registry)
     }
 
     // run generator
-    logWithSpinner('🚀', `Invoking generators...`)
-    const pkg = require(path.join(context, 'package.json'))
+    log(`🚀  Invoking generators...`)
     const plugins = this.resolvePlugins(options.plugins)
     const generator = new Generator(
       context,
@@ -125,9 +141,9 @@ module.exports = class Creator {
     await generator.generate()
 
     // install additional deps (injected by generators)
-    logWithSpinner('📦', `Installing additional dependencies...`)
+    log(`📦  Installing additional dependencies...`)
     if (!isTestOrDebug) {
-      await installDeps(context, packageManager, null, cliOptions.registry)
+      await installDeps(context, packageManager, cliOptions.registry)
     }
 
     // run complete cbs if any (injected by generators)

packages/@vue/cli/lib/util/installDeps.js

@@ -74,17 +74,12 @@ const shouldUseTaobao = async (command) => {
   return save(useTaobaoRegistry)
 }
 
-module.exports = async function installDeps (targetDir, command, deps, cliRegistry) {
+module.exports = async function installDeps (targetDir, command, cliRegistry) {
   const args = []
   if (command === 'npm') {
     args.push('install', '--loglevel', 'error')
-    if (deps) {
-      args.push('--save-dev')
-    }
   } else if (command === 'yarn') {
-    if (deps) {
-      args.push('add', '--dev')
-    }
+    // do nothing
   } else {
     throw new Error(`unknown package manager: ${command}`)
   }
@@ -104,30 +99,18 @@ module.exports = async function installDeps (targetDir, command, deps, cliRegist
     }
   }
 
-  if (deps) {
-    args.push.apply(args, deps)
-  }
-
   debug(`command: `, command)
   debug(`args: `, args)
 
   await new Promise((resolve, reject) => {
     const child = execa(command, args, {
       cwd: targetDir,
-      stdio: 'pipe'
-    })
-
-    let stderr = ''
-    child.stderr.on('data', buf => {
-      stderr += buf.toString()
+      stdio: 'inherit'
     })
 
     child.on('close', code => {
       if (code !== 0) {
-        reject(
-          `command failed: ${command} ${args.join(' ')}\n` +
-          stderr
-        )
+        reject(`command failed: ${command} ${args.join(' ')}`)
         return
       }
       resolve()

packages/@vue/cli/lib/util/setupDevProject.js

@@ -1,24 +1,9 @@
 // dev only
 
-const fs = require('fs')
 const path = require('path')
 const { linkBin } = require('@vue/cli-shared-utils')
 
-module.exports = function setupDevProject (targetDir, deps) {
-  const pkg = require(path.resolve(targetDir, 'package.json'))
-  pkg.devDependencies = {}
-  deps.forEach(dep => {
-    pkg.devDependencies[dep] = require(path.resolve(
-      __dirname,
-      '../../../../',
-      dep,
-      'package.json'
-    )).version
-  })
-  fs.writeFileSync(
-    path.resolve(targetDir, 'package.json'),
-    JSON.stringify(pkg, null, 2)
-  )
+module.exports = function setupDevProject (targetDir) {
   return linkBin(
     require.resolve('@vue/cli-service/bin/vue-cli-service'),
     path.join(targetDir, 'node_modules', '.bin', 'vue-cli-service')

packages/@vue/cli/package.json

@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@vue/cli-shared-utils": "^3.0.0-alpha.3",
+    "axios": "^0.17.1",
     "chalk": "^2.3.0",
     "commander": "^2.12.2",
     "ejs": "^2.5.7",

yarn.lock

@@ -3491,7 +3491,7 @@ eslint-plugin-vue-libs@^2.1.0:
   dependencies:
     eslint-plugin-html "^4.0.1"
 
-eslint-plugin-vue@^4.0.0, eslint-plugin-vue@^4.2.0:
+eslint-plugin-vue@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.2.0.tgz#25fade387bf9a97377cf0e5cd17ef0d60ac9da57"
   dependencies:
@@ -10058,9 +10058,9 @@ vue-hot-reload-api@^2.2.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"
 
-vue-jest@vuejs/vue-jest#master:
-  version "1.4.0"
-  resolved "https://codeload.github.com/vuejs/vue-jest/tar.gz/6ad9553e7d8cf27aec69c96c2681075aa8504c68"
+vue-jest@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-2.0.0.tgz#fd85ffde96d1ea8640a240fa898f7cc55464cb2e"
   dependencies:
     babel-plugin-transform-es2015-modules-commonjs "^6.26.0"
     chalk "^2.1.0"