From be474b0c7427930d26466c0cf3d58a26d49cb3c0 Mon Sep 17 00:00:00 2001 From: iminin Date: Thu, 13 Jul 2017 19:30:15 +0300 Subject: [PATCH 01/18] Added minimal possible configuration option for typescript to work --- meta.js | 26 ++++++++++++++++++++++++-- template/build/vue-loader.conf.js | 3 ++- template/build/webpack.base.conf.js | 13 +++++++++++-- template/package.json | 4 ++++ template/src/App.vue | 2 +- template/src/components/Hello.vue | 2 +- template/src/vue-shims.d.ts | 4 ++++ template/tsconfig.json | 16 ++++++++++++++++ 8 files changed, 63 insertions(+), 7 deletions(-) create mode 100644 template/src/vue-shims.d.ts create mode 100644 template/tsconfig.json diff --git a/meta.js b/meta.js index e2e2fdffa1..b8660d9921 100644 --- a/meta.js +++ b/meta.js @@ -40,6 +40,11 @@ module.exports = { } ] }, + "typescript": { + "type": "confirm", + "message": "Use TypeScript as default language?", + "default": false + }, "router": { "type": "confirm", "message": "Install vue-router?" @@ -86,7 +91,24 @@ module.exports = { "test/unit/**/*": "unit", "build/webpack.test.conf.js": "unit", "test/e2e/**/*": "e2e", - "src/router/**/*": "router" + "src/router/**/*": "router", + "tsconfig.json": "typescript" }, - "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack" + "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack", + "metalsmith": function (metalsmith, opts, helpers) { + function renameJsSourcesToTs(files, metalsmith, done) { + // If typescript is enabled rename any .js files in src/ folder to .ts extension + if (metalsmith.metadata().typescript) { + Object.keys(files).forEach(filename => { + if (/^src.*\.js$/.test(filename)) { + const renamed = filename.replace(/\.js$/, ".ts"); + files[renamed] = files[filename] + delete files[filename] + } + }) + } + done(null, files) + } + metalsmith.use(renameJsSourcesToTs) + } }; diff --git a/template/build/vue-loader.conf.js b/template/build/vue-loader.conf.js index 8a346d5222..19ee071308 100644 --- a/template/build/vue-loader.conf.js +++ b/template/build/vue-loader.conf.js @@ -14,5 +14,6 @@ module.exports = { source: 'src', img: 'src', image: 'xlink:href' - } + }{{#typescript}}, + esModule: true{{/typescript}} } diff --git a/template/build/webpack.base.conf.js b/template/build/webpack.base.conf.js index 71f0fdcf87..b1370b677b 100644 --- a/template/build/webpack.base.conf.js +++ b/template/build/webpack.base.conf.js @@ -9,7 +9,7 @@ function resolve (dir) { module.exports = { entry: { - app: './src/main.js' + app: './src/main.{{#typescript}}ts{{else}}js{{/typescript}}' }, output: { path: config.build.assetsRoot, @@ -19,7 +19,7 @@ module.exports = { : config.dev.assetsPublicPath }, resolve: { - extensions: ['.js', '.vue', '.json'], + extensions: [{{#typescript}}'.ts', {{/typescript}}'.js', '.vue', '.json'], alias: { {{#if_eq build "standalone"}} 'vue$': 'vue/dist/vue.esm.js', @@ -45,6 +45,15 @@ module.exports = { loader: 'vue-loader', options: vueLoaderConfig }, + {{#typescript}} + { + test: /\.ts$/, + loader: "ts-loader", + options: { + appendTsSuffixTo: [/\.vue$/] + } + }, + {{/typescript}} { test: /\.js$/, loader: 'babel-loader', diff --git a/template/package.json b/template/package.json index 36ad746930..cc61cdc953 100644 --- a/template/package.json +++ b/template/package.json @@ -32,6 +32,10 @@ "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", + {{#typescript}} + "ts-loader": "^2.2.2", + "typescript": "^2.4.1", + {{/typescript}} {{#lint}} "eslint": "^3.19.0", "eslint-friendly-formatter": "^2.0.7", diff --git a/template/src/App.vue b/template/src/App.vue index 74a25d1dfa..f220f72faa 100644 --- a/template/src/App.vue +++ b/template/src/App.vue @@ -9,7 +9,7 @@ -