feat: add support for PNPM as a package manager

Enables vue-cli to use PNPM (https://pnpm.js.org/) as package manager

Author: robertkruis

packages/@vue/cli-service/lib/commands/serve.js

@@ -1,6 +1,7 @@
 const {
   info,
   hasYarn,
+  hasPnpm,
   openBrowser,
   IpcMessenger
 } = require('@vue/cli-shared-utils')
@@ -191,7 +192,7 @@ module.exports = (api, options) => {
           isFirstCompile = false
 
           if (!isProduction) {
-            const buildCommand = hasYarn() ? `yarn build` : `npm run build`
+            const buildCommand = hasYarn() ? `yarn build` : hasPnpm() ? `pnpm run build` : `npm run build`
             console.log(`  Note that the development build is not optimized.`)
             console.log(`  To create a production build, run ${chalk.cyan(buildCommand)}.`)
           } else {

packages/@vue/cli-shared-utils/lib/env.js

@@ -2,6 +2,7 @@ const { execSync } = require('child_process')
 
 let _hasYarn
 let _hasGit
+let _hasPnpm
 
 // env detection
 exports.hasYarn = () => {
@@ -33,3 +34,18 @@ exports.hasGit = () => {
     return (_hasGit = false)
   }
 }
+
+exports.hasPnpm = () => {
+  if (process.env.VUE_CLI_TEST) {
+    return false
+  }
+  if (_hasPnpm != null) {
+    return _hasPnpm
+  }
+  try {
+    execSync('pnpm --version', { stdio: 'ignore' })
+    return (_hasPnpm = true)
+  } catch (e) {
+    return (_hasPnpm = false)
+  }
+}

packages/@vue/cli-ui/src/graphql-api/type-defs.js

@@ -8,6 +8,7 @@ scalar JSON
 enum PackageManager {
   npm
   yarn
+  pnpm
 }
 
 interface DescribedEntity {

packages/@vue/cli-ui/src/graphql-api/utils/command.js

@@ -1,8 +1,9 @@
 const {
-  hasYarn
+  hasYarn,
+  hasPnpm
 } = require('@vue/cli-shared-utils')
 const { loadOptions } = require('@vue/cli/lib/options')
 
 exports.getCommand = function () {
-  return loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+  return loadOptions().packageManager || (hasYarn() ? 'yarn' : hasPnpm() ? 'pnpm' : 'npm')
 }

packages/@vue/cli-ui/src/views/ProjectCreate.vue

@@ -70,6 +70,10 @@
                       value="yarn"
                       label="yarn"
                     />
+                    <VueSelectButton
+                      value="pnpm"
+                      label="pnpm"
+                    />
                   </VueSelect>
                 </VueFormField>
 

packages/@vue/cli/__tests__/Creator.spec.js

@@ -16,7 +16,7 @@ test('default', async () => {
     },
     {
       message: 'package manager',
-      choices: ['Yarn', 'NPM'],
+      choices: ['Yarn', 'NPM', 'PNPM'],
       choose: 0
     }
   ]

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

@@ -30,6 +30,7 @@ const {
   error,
   hasGit,
   hasYarn,
+  hasPnpm,
   logWithSpinner,
   stopSpinner,
   exit
@@ -91,7 +92,7 @@ module.exports = class Creator extends EventEmitter {
     const packageManager = (
       cliOptions.packageManager ||
       loadOptions().packageManager ||
-      (hasYarn() ? 'yarn' : 'npm')
+      (hasYarn() ? 'yarn' : hasPnpm() ? 'pnpm' : 'npm')
     )
 
     await clearConsole()
@@ -191,7 +192,7 @@ module.exports = class Creator extends EventEmitter {
     log(
       `👉  Get started with the following commands:\n\n` +
       (this.context === process.cwd() ? `` : chalk.cyan(` ${chalk.gray('$')} cd ${name}\n`)) +
-      chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn serve' : 'npm run serve'}`)
+      chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn serve' : packageManager === 'pnpm' ? 'pnpm run serve' : 'npm run serve'}`)
     )
     log()
     this.emit('creation', { event: 'done' })
@@ -388,23 +389,34 @@ module.exports = class Creator extends EventEmitter {
 
     // ask for packageManager once
     const savedOptions = loadOptions()
-    if (!savedOptions.packageManager && hasYarn()) {
+    if (!savedOptions.packageManager && (hasYarn() || hasPnpm())) {
+      const packageManagerChoices = [{
+        name: 'Use NPM',
+        value: 'npm',
+        short: 'NPM'
+      }]
+
+      if (hasYarn()) {
+        packageManagerChoices.push({
+          name: 'Use Yarn',
+          value: 'yarn',
+          short: 'Yarn'
+        })
+      }
+
+      if (hasPnpm()) {
+        packageManagerChoices.push({
+          name: 'Use PNPM',
+          value: 'pnpm',
+          short: 'PNPM'
+        })
+      }
+
       outroPrompts.push({
         name: 'packageManager',
         type: 'list',
         message: 'Pick the package manager to use when installing dependencies:',
-        choices: [
-          {
-            name: 'Use Yarn',
-            value: 'yarn',
-            short: 'Yarn'
-          },
-          {
-            name: 'Use NPM',
-            value: 'npm',
-            short: 'NPM'
-          }
-        ]
+        choices: packageManagerChoices
       })
     }
 

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

@@ -7,6 +7,7 @@ const {
   log,
   error,
   hasYarn,
+  hasPnpm,
   stopSpinner,
   resolvePluginId
 } = require('@vue/cli-shared-utils')
@@ -26,7 +27,7 @@ async function add (pluginName, options = {}, context = process.cwd()) {
   log(`📦  Installing ${chalk.cyan(packageName)}...`)
   log()
 
-  const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+  const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : hasPnpm() ? 'pnpm' : 'npm')
   await installPackage(context, packageManager, null, packageName)
 
   stopSpinner()

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

@@ -14,6 +14,7 @@ const {
   log,
   error,
   hasYarn,
+  hasPnpm,
   hasGit,
   logWithSpinner,
   stopSpinner,
@@ -121,7 +122,7 @@ async function runGenerator (context, plugin, pkg = getPkg(context)) {
   if (!isTestOrDebug && depsChanged) {
     log(`📦  Installing additional dependencies...`)
     const packageManager =
-      loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+      loadOptions().packageManager || (hasYarn() ? 'yarn' : hasPnpm() ? 'pnpm' : 'npm')
     await installDeps(context, packageManager)
   }
 

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

@@ -35,7 +35,7 @@ const presetSchema = createSchema(joi => joi.object().keys({
 }))
 
 const schema = createSchema(joi => joi.object().keys({
-  packageManager: joi.string().only(['yarn', 'npm']),
+  packageManager: joi.string().only(['yarn', 'npm', 'pnpm']),
   useTaobaoRegistry: joi.boolean(),
   presets: joi.object().pattern(/^/, presetSchema)
 }))

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

@@ -172,7 +172,7 @@ function executeCommand (command, args, targetDir) {
 
 exports.installDeps = async function installDeps (targetDir, command, cliRegistry) {
   const args = []
-  if (command === 'npm') {
+  if (command === 'npm' || command === 'pnpm') {
     args.push('install', '--loglevel', 'error')
   } else if (command === 'yarn') {
     // do nothing
@@ -190,7 +190,7 @@ exports.installDeps = async function installDeps (targetDir, command, cliRegistr
 
 exports.installPackage = async function (targetDir, command, cliRegistry, packageName, dev = true) {
   const args = []
-  if (command === 'npm') {
+  if (command === 'npm' || command === 'pnpm') {
     args.push('install', '--loglevel', 'error')
   } else if (command === 'yarn') {
     args.push('add')
@@ -212,7 +212,7 @@ exports.installPackage = async function (targetDir, command, cliRegistry, packag
 
 exports.uninstallPackage = async function (targetDir, command, cliRegistry, packageName) {
   const args = []
-  if (command === 'npm') {
+  if (command === 'npm' || command === 'pnpm') {
     args.push('uninstall', '--loglevel', 'error')
   } else if (command === 'yarn') {
     args.push('remove')
@@ -232,7 +232,7 @@ exports.uninstallPackage = async function (targetDir, command, cliRegistry, pack
 
 exports.updatePackage = async function (targetDir, command, cliRegistry, packageName) {
   const args = []
-  if (command === 'npm') {
+  if (command === 'npm' || command === 'pnpm') {
     args.push('update', '--loglevel', 'error')
   } else if (command === 'yarn') {
     args.push('upgrade')

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

@@ -11,8 +11,8 @@ module.exports = function loadCommand (commandName, moduleName) {
       } catch (err2) {
         if (isNotFoundError(err2)) {
           const chalk = require('chalk')
-          const { hasYarn } = require('@vue/cli-shared-utils')
-          const installCommand = hasYarn() ? `yarn global add` : `npm install -g`
+          const { hasYarn, hasPnpm } = require('@vue/cli-shared-utils')
+          const installCommand = hasYarn() ? `yarn global add` : hasPnpm() ? `pnpm install -g` : `npm install -g`
           console.log()
           console.log(
             `  Command ${chalk.cyan(`vue ${commandName}`)} requires a global addon to be installed.\n` +

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

@@ -1,7 +1,8 @@
 const registries = {
   npm: 'https://registry.npmjs.org',
   yarn: 'https://registry.yarnpkg.com',
-  taobao: 'https://registry.npm.taobao.org'
+  taobao: 'https://registry.npm.taobao.org',
+  pnpm: 'https://registry.npmjs.org'
 }
 
 module.exports = registries