feat: make it possible to opt-out of Babel

close #1199

Author: yyx990803

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

@@ -314,7 +314,7 @@ module.exports = class Creator {
       type: 'checkbox',
       message: 'Check the features needed for your project:',
       choices: [],
-      pageSize: 8
+      pageSize: 10
     }
     return {
       presetPrompt,

packages/@vue/cli/lib/promptModules/__tests__/babel.spec.js

@@ -9,7 +9,7 @@ test('should pass', async () => {
   const expectedPrompts = [
     {
       message: 'features',
-      check: []
+      check: [0]
     }
   ]
 
@@ -27,7 +27,36 @@ test('should pass', async () => {
   )
 })
 
-test('should not include the plugin if ts is also present', async () => {
+test('with TS', async () => {
+  const mockTSModule = api => {
+    api.onPromptComplete(answers => {
+      answers.useTsWithBabel = true
+      answers.features.push('ts')
+    })
+  }
+
+  const expectedPrompts = [
+    {
+      message: 'features',
+      check: [] // no need to check if "useTsWithBabel" is explicitly true
+    }
+  ]
+
+  const expectedOptions = {
+    plugins: {
+      '@vue/cli-plugin-babel': {}
+    }
+  }
+
+  await assertPromptModule(
+    [mockTSModule, moduleToTest],
+    expectedPrompts,
+    expectedOptions,
+    { pluginsOnly: true }
+  )
+})
+
+test('with TS, no Babel', async () => {
   const mockTSModule = api => {
     api.onPromptComplete(answers => {
       answers.features.push('ts')

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

@@ -1,11 +1,21 @@
 module.exports = cli => {
+  cli.injectFeature({
+    name: 'Babel',
+    value: 'babel',
+    short: 'Babel',
+    checked: true
+  })
+
   cli.onPromptComplete((answers, options) => {
-    if (
-      !answers.features.includes('ts') ||
-      answers.useTsWithBabel ||
-      answers.experimentalCompileTsWithBabel
-    ) {
-      options.plugins['@vue/cli-plugin-babel'] = {}
+    if (answers.features.includes('ts')) {
+      if (!answers.useTsWithBabel && !answers.experimentalCompileTsWithBabel) {
+        return
+      }
+    } else {
+      if (!answers.features.includes('babel')) {
+        return
+      }
     }
+    options.plugins['@vue/cli-plugin-babel'] = {}
   })
 }

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

@@ -5,7 +5,8 @@ module.exports = cli => {
   cli.injectFeature({
     name: 'Linter / Formatter',
     value: 'linter',
-    short: 'Linter'
+    short: 'Linter',
+    checked: true
   })
 
   cli.injectPrompt({

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

@@ -26,7 +26,8 @@ module.exports = cli => {
       name: 'useTsWithBabel',
       when: answers => answers.features.includes('ts'),
       type: 'confirm',
-      message: 'Use Babel alongside TypeScript for auto-detected polyfills?'
+      message: 'Use Babel alongside TypeScript for auto-detected polyfills?',
+      default: answers => answers.features.includes('babel')
     })
   }