fix(cli-plugin-babel): transpileDependencies should only match packages inside node_modules, close #3057 (#3229)

Author: jkzing

packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js

@@ -40,6 +40,7 @@ beforeAll(async () => {
 
   $packageJson = JSON.parse($packageJson)
   $packageJson.dependencies['external-dep'] = '1.0.0'
+  $packageJson.dependencies['@scope/external-dep'] = '1.0.0'
   $packageJson = JSON.stringify($packageJson)
 
   await project.write(
@@ -70,10 +71,23 @@ test('dep from node_modules should not been transpiled', async () => {
 test('dep from node_modules should been transpiled', async () => {
   await project.write(
     'vue.config.js',
-    `module.exports = { transpileDependencies: ['external-dep'] }`
+    `module.exports = { transpileDependencies: ['external-dep', '@scope/external-dep'] }`
   )
   await project.run('vue-cli-service build')
   expect(await readVendorFile()).toMatch('return "__TEST__"')
 
   expect(await readVendorFile()).toMatch('return "__SCOPE_TEST__"')
 })
+
+// https://github.com/vuejs/vue-cli/issues/3057
+test('only transpile package with same name specified in transpileDependencies', async () => {
+  await project.write(
+    'vue.config.js',
+    `module.exports = { transpileDependencies: ['babel-transpile-deps'] }`
+  )
+  try {
+    await project.run('vue-cli-service build')
+  } catch (e) {}
+  expect(await readVendorFile()).toMatch('() => "__TEST__"')
+  expect(await readVendorFile()).toMatch('() => "__SCOPE_TEST__"')
+})

packages/@vue/cli-plugin-babel/index.js

@@ -1,8 +1,24 @@
 const path = require('path')
+const { isWindows } = require('@vue/cli-shared-utils')
+
+function genTranspileDepRegex (transpileDependencies) {
+  const deps = transpileDependencies.map(dep => {
+    if (typeof dep === 'string') {
+      const depPath = path.join('node_modules', dep, '/')
+      return isWindows
+        ? depPath.replace(/\\/g, '\\\\') // double escape for windows style path
+        : depPath
+    } else if (dep instanceof RegExp) {
+      return dep.source
+    }
+  })
+  return deps.length ? new RegExp(deps.join('|')) : null
+}
 
 module.exports = (api, options) => {
   const useThreads = process.env.NODE_ENV === 'production' && options.parallel
   const cliServicePath = require('path').dirname(require.resolve('@vue/cli-service'))
+  const transpileDepRegex = genTranspileDepRegex(options.transpileDependencies)
 
   api.chainWebpack(webpackConfig => {
     webpackConfig.resolveLoader.modules.prepend(path.join(__dirname, 'node_modules'))
@@ -21,13 +37,7 @@ module.exports = (api, options) => {
               return true
             }
             // check if this is something the user explicitly wants to transpile
-            if (options.transpileDependencies.some(dep => {
-              if (typeof dep === 'string') {
-                return filepath.includes(path.normalize(dep))
-              } else {
-                return filepath.match(dep)
-              }
-            })) {
+            if (transpileDepRegex && transpileDepRegex.test(filepath)) {
               return false
             }
             // Don't transpile node_modules

packages/@vue/cli-plugin-babel/package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@babel/core": "^7.0.0",
     "@vue/babel-preset-app": "^3.3.0",
+    "@vue/cli-shared-utils": "^3.3.0",
     "babel-loader": "^8.0.4"
   },
   "publishConfig": {