diff --git a/packages/@vue/cli-plugin-typescript/generator/index.js b/packages/@vue/cli-plugin-typescript/generator/index.js index e16fc03b01..baa17d8abb 100644 --- a/packages/@vue/cli-plugin-typescript/generator/index.js +++ b/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 }] - ] - } - }) - } - } } diff --git a/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json b/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json index 8863c6d9b1..93ed51cf71 100644 --- a/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json +++ b/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", diff --git a/packages/@vue/cli-plugin-typescript/index.js b/packages/@vue/cli-plugin-typescript/index.js index 79ab8cb1be..23bd6e5e15 100644 --- a/packages/@vue/cli-plugin-typescript/index.js +++ b/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') diff --git a/packages/@vue/cli/lib/promptModules/typescript.js b/packages/@vue/cli/lib/promptModules/typescript.js index 1a37652ad4..7c83ac3b33 100644 --- a/packages/@vue/cli/lib/promptModules/typescript.js +++ b/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