feat: use Babel w/ TS for polyfills

Author: yyx990803

packages/@vue/cli-plugin-typescript/generator/index.js

@@ -2,6 +2,7 @@ module.exports = (api, {
   classComponent,
   lint,
   lintOn = [],
+  useTsWithBabel,
   experimentalCompileTsWithBabel
 }) => {
   if (classComponent) {
@@ -13,6 +14,52 @@ module.exports = (api, {
     })
   }
 
+  if (useTsWithBabel) {
+    api.extendPackage({
+      devDependencies: {
+        'babel-loader': '8 || ^8.0.0-beta || ^8.0.0-rc',
+        '@babel/core': '7 || ^7.0.0-beta || ^7.0.0-rc',
+        '@vue/babel-preset-app': '^3.0.0-alpha.1'
+      },
+      vue: {
+        useTsWithBabel: true
+      },
+      babel: {
+        presets: ['@vue/app']
+      }
+    })
+  } else if (experimentalCompileTsWithBabel) {
+    api.extendPackage({
+      devDependencies: {
+        'babel-loader': '8 || ^8.0.0-beta || ^8.0.0-rc',
+        '@babel/core': '7 || ^7.0.0-beta || ^7.0.0-rc',
+        '@babel/preset-typescript': '7 || ^7.0.0-beta || ^7.0.0-rc',
+        '@vue/babel-preset-app': '^3.0.0-alpha.1'
+      },
+      vue: {
+        experimentalCompileTsWithBabel: true
+      },
+      babel: {
+        presets: ['@babel/typescript', '@vue/app']
+      }
+    })
+
+    if (classComponent) {
+      api.extendPackage({
+        devDependencies: {
+          '@babel/plugin-proposal-decorators': '7 || ^7.0.0-beta || ^7.0.0-rc',
+          '@babel/plugin-proposal-class-properties': '7 || ^7.0.0-beta || ^7.0.0-rc'
+        },
+        babel: {
+          plugins: [
+            '@babel/proposal-decorators',
+            ['@babel/proposal-class-properties', { 'loose': true }]
+          ]
+        }
+      })
+    }
+  }
+
   if (lint) {
     api.extendPackage({
       scripts: {
@@ -68,8 +115,9 @@ module.exports = (api, {
   // TODO cater to e2e test plugins
 
   api.render('./template', {
-    hasJest,
-    hasMocha
+    isTest: process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG,
+    hasMocha,
+    hasJest
   })
 
   // delete all js files that have a ts file of the same name
@@ -87,36 +135,4 @@ module.exports = (api, {
       }
     }
   })
-
-  if (experimentalCompileTsWithBabel) {
-    api.extendPackage({
-      devDependencies: {
-        'babel-loader': '8 || ^8.0.0-beta || ^8.0.0-rc',
-        '@babel/core': '7 || ^7.0.0-beta || ^7.0.0-rc',
-        '@babel/preset-typescript': '7 || ^7.0.0-beta || ^7.0.0-rc',
-        '@vue/babel-preset-app': '^3.0.0-alpha.1'
-      },
-      vue: {
-        experimentalCompileTsWithBabel: true
-      },
-      babel: {
-        presets: ['@babel/typescript', '@vue/app']
-      }
-    })
-
-    if (classComponent) {
-      api.extendPackage({
-        devDependencies: {
-          '@babel/plugin-proposal-decorators': '7 || ^7.0.0-beta || ^7.0.0-rc',
-          '@babel/plugin-proposal-class-properties': '7 || ^7.0.0-beta || ^7.0.0-rc'
-        },
-        babel: {
-          plugins: [
-            '@babel/proposal-decorators',
-            ['@babel/proposal-class-properties', { 'loose': true }]
-          ]
-        }
-      })
-    }
-  }
 }

packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "<%- options.useTsWithBabel ? 'es2015' : 'es5' %>",
     "module": "es2015",
     "strict": true,
     "moduleResolution": "node",
@@ -15,14 +15,16 @@
         "src/*"
       ]
     },
+    <%_if (isTest) { _%>
     "types": [
-    <%_ if (hasMocha) { _%>
+      <%_ if (hasMocha) { _%>
       "mocha",
       "chai"
-    <%_ } else if (hasJest) { _%>
+      <%_ } else if (hasJest) { _%>
       "jest"
-    <%_ } _%>
+      <%_ } _%>
     ]
+    <%_ } _%>
   },
   "include": [
     "src/**/*.ts",

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

@@ -32,6 +32,11 @@ module.exports = (api, options) => {
               return options
             })
     } else {
+      if (options.useTsWithBabel) {
+        tsRule
+          .use('babel-loader')
+            .loader('babel-loader')
+      }
       tsRule
         .use('ts-loader')
           .loader('ts-loader')

packages/@vue/cli/lib/promptModules/typescript.js

@@ -21,6 +21,13 @@ module.exports = cli => {
       type: 'confirm',
       message: `Compile TS with babel? ${chalk.yellow(`(experimental)`)}`
     })
+  } else {
+    cli.injectPrompt({
+      name: 'useTsWithBabel',
+      when: answers => answers.features.includes('ts'),
+      type: 'confirm',
+      message: 'Use TypeScript together with Babel for auto-detected polyfills?'
+    })
   }
 
   cli.onPromptComplete((answers, options) => {
@@ -32,7 +39,9 @@ module.exports = cli => {
         tsOptions.lint = true
         tsOptions.lintOn = answers.lintOn
       }
-      if (answers.compileTsWithBabel) {
+      if (answers.useTsWithBabel) {
+        tsOptions.useTsWithBabel = true
+      } else if (answers.compileTsWithBabel) {
         tsOptions.experimentalCompileTsWithBabel = true
       }
       options.plugins['@vue/cli-plugin-typescript'] = tsOptions