From a153e9b5b330b3aecd881f031fb4ecee3dbb7ca0 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 2 Aug 2022 16:47:56 +0800
Subject: [PATCH] refactor: replace `npx` with `npm exec` and `yarn/pnpm dlx`

---
 packages/create-vite/index.js | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/create-vite/index.js b/packages/create-vite/index.js
index f366b92499bd1d..1a706a6fcf2792 100755
--- a/packages/create-vite/index.js
+++ b/packages/create-vite/index.js
@@ -67,7 +67,7 @@ const FRAMEWORKS = [
         name: 'custom-nuxt',
         display: 'Nuxt',
         color: lightGreen,
-        customCommand: 'npx nuxi init TARGET_DIR'
+        customCommand: 'npm exec nuxi init TARGET_DIR'
       }
     ]
   },
@@ -265,6 +265,7 @@ async function init() {
 
   const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
   const pkgManager = pkgInfo ? pkgInfo.name : 'npm'
+  const isYarn1 = pkgManager === 'yarn' && pkgInfo?.version.startsWith('1.')
 
   if (template.startsWith('custom-')) {
     const getCustomCommand = (name) => {
@@ -279,9 +280,21 @@ async function init() {
     const customCommand = getCustomCommand(template)
     const fullCustomCommand = customCommand
       .replace('TARGET_DIR', targetDir)
-      .replace(/^npm /, `${pkgManager} `)
-      // Only yarn doesn't support `@version` in the `create` command
-      .replace('@latest', () => (pkgManager === 'yarn' ? '' : '@latest'))
+      .replace(/^npm create/, `${pkgManager} create`)
+      // Only Yarn 1.x doesn't support `@version` in the `create` command
+      .replace('@latest', () => (isYarn1 ? '' : '@latest'))
+      .replace('^npm exec', () => {
+        // Prefer `pnpm dlx` or `yarn dlx`
+        if (pkgManager === 'pnpm') {
+          return 'pnpm dlx'
+        }
+        if (pkgManager === 'yarn' && !isYarn1) {
+          return 'yarn dlx'
+        }
+        // Use `npm exec` in all other cases,
+        // including Yarn 1.x and other custom npm clients.
+        return 'npm exec'
+      })
 
     const [command, ...args] = fullCustomCommand.split(' ')
     const { status } = spawn.sync(command, args, {