feat: add vue add command (#936)

* feat(bin): new 'add' command * fix(add): Add a blank line * Update installDeps.js
vuejs · Mar 4, 2018 · 896aec5 · 896aec5
1 parent edff5b4
commit 896aec5
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 16 deletions.
diff --git a/packages/@vue/cli/bin/vue.js b/packages/@vue/cli/bin/vue.js
@@ -54,6 +54,14 @@ program
  require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
  })
 
+program
+ .command('add <plugin> [pluginOptions]')
+ .allowUnknownOption()
+ .description('install a plugin and invoke its generator in an already created project')
+ .action((plugin) => {
+ require('../lib/add')(plugin, minimist(process.argv.slice(3)))
+ })
+
 program
  .command('inspect [paths...]')
  .option('--mode <mode>')

diff --git a/packages/@vue/cli/lib/Creator.js b/packages/@vue/cli/lib/Creator.js
@@ -7,7 +7,7 @@ const Generator = require('./Generator')
 const cloneDeep = require('lodash.clonedeep')
 const sortObject = require('./util/sortObject')
 const getVersions = require('./util/getVersions')
-const installDeps = require('./util/installDeps')
+const { installDeps } = require('./util/installDeps')
 const clearConsole = require('./util/clearConsole')
 const PromptModuleAPI = require('./PromptModuleAPI')
 const writeFileTree = require('./util/writeFileTree')

diff --git a/packages/@vue/cli/lib/add.js b/packages/@vue/cli/lib/add.js
@@ -0,0 +1,38 @@
+const chalk = require('chalk')
+const { loadOptions } = require('./options')
+const { installPackage } = require('./util/installDeps')
+const {
+ log,
+ error,
+ hasYarn,
+ stopSpinner
+} = require('@vue/cli-shared-utils')
+const invoke = require('./invoke')
+
+async function add (pluginName, options = {}, context = process.cwd()) {
+ const packageName = pluginName.includes('vue-cli-plugin-') ? pluginName : `vue-cli-plugin-${pluginName}`
+
+ log()
+ log(`📦 Installing ${chalk.cyan(packageName)}...`)
+ log()
+
+ const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+ await installPackage(context, packageManager, null, packageName)
+
+ stopSpinner()
+
+ log()
+ log(`${chalk.green('✔')} Successfully installed plugin: ${chalk.cyan(packageName)}`)
+ log()
+
+ invoke(pluginName, options, context)
+}
+
+module.exports = (...args) => {
+ return add(...args).catch(err => {
+ error(err)
+ if (!process.env.VUE_CLI_TEST) {
+ process.exit(1)
+ }
+ })
+}
diff --git a/packages/@vue/cli/lib/invoke.js b/packages/@vue/cli/lib/invoke.js
@@ -6,7 +6,7 @@ const resolve = require('resolve')
 const inquirer = require('inquirer')
 const Generator = require('./Generator')
 const { loadOptions } = require('./options')
-const installDeps = require('./util/installDeps')
+const { installDeps } = require('./util/installDeps')
 const {
  log,
  error,

diff --git a/packages/@vue/cli/lib/util/installDeps.js b/packages/@vue/cli/lib/util/installDeps.js
@@ -93,16 +93,7 @@ function renderProgressBar (curr, total) {
  process.stderr.write(`[${complete}${incomplete}]${bar}`)
 }
 
-module.exports = async function installDeps (targetDir, command, cliRegistry) {
- const args = []
- if (command === 'npm') {
- args.push('install', '--loglevel', 'error')
- } else if (command === 'yarn') {
- // do nothing
- } else {
- throw new Error(`Unknown package manager: ${command}`)
- }
-
+async function addRegistryToArgs (command, args, cliRegistry) {
  if (command === 'yarn' && cliRegistry) {
  throw new Error(
  `Inline registry is not supported when using yarn. ` +
@@ -124,11 +115,10 @@ module.exports = async function installDeps (targetDir, command, cliRegistry) {
  args.push(`--disturl=${taobaoDistURL}`)
  }
  }
+}
 
- debug(`command: `, command)
- debug(`args: `, args)
-
- await new Promise((resolve, reject) => {
+function executeCommand (command, args, targetDir) {
+ return new Promise((resolve, reject) => {
  const child = execa(command, args, {
  cwd: targetDir,
  stdio: ['inherit', 'inherit', command === 'yarn' ? 'pipe' : 'inherit']
@@ -162,3 +152,43 @@ module.exports = async function installDeps (targetDir, command, cliRegistry) {
  })
  })
 }
+
+exports.installDeps = async function installDeps (targetDir, command, cliRegistry) {
+ const args = []
+ if (command === 'npm') {
+ args.push('install', '--loglevel', 'error')
+ } else if (command === 'yarn') {
+ // do nothing
+ } else {
+ throw new Error(`Unknown package manager: ${command}`)
+ }
+
+ await addRegistryToArgs(command, args, cliRegistry)
+
+ debug(`command: `, command)
+ debug(`args: `, args)
+
+ await executeCommand(command, args, targetDir)
+}
+
+exports.installPackage = async function (targetDir, command, cliRegistry, packageName, dev = true) {
+ const args = []
+ if (command === 'npm') {
+ args.push('install', '--loglevel', 'error')
+ } else if (command === 'yarn') {
+ args.push('add')
+ } else {
+ throw new Error(`Unknown package manager: ${command}`)
+ }
+
+ if (dev) args.push('-D')
+
+ await addRegistryToArgs(command, args, cliRegistry)
+
+ args.push(packageName)
+
+ debug(`command: `, command)
+ debug(`args: `, args)
+
+ await executeCommand(command, args, targetDir)
+}