From 97f274c839f72cf1dbd254f23ebb856255379dd0 Mon Sep 17 00:00:00 2001 From: Sascha Braun Date: Wed, 28 Nov 2018 20:22:30 +0100 Subject: [PATCH 1/8] module choices: add typescript integration --- sao.js | 42 +++++++++++++++++++++++++++++++--- template/_package.json | 9 ++++++-- template/_tsconfig.json | 23 +++++++++++++++++++ template/modules/typescript.js | 24 +++++++++++++++++++ template/nuxt/nuxt.config.js | 10 ++++---- template/nuxt/pages/index.vue | 12 ++++++++-- template/vue-shims.d.ts | 4 ++++ 7 files changed, 113 insertions(+), 11 deletions(-) create mode 100644 template/_tsconfig.json create mode 100644 template/modules/typescript.js create mode 100644 template/vue-shims.d.ts diff --git a/sao.js b/sao.js index 5f11fcd00..68cb173d2 100644 --- a/sao.js +++ b/sao.js @@ -42,6 +42,35 @@ module.exports = { ], default: 'none' }, + modules: { + message: 'Choose modules to install', + type: 'checkbox', + choices: [ + { + name: 'TypeScript', + value: "typescript" + }, + // TODO + // { + // name: 'Progressive Web App (PWA) Support', + // value: 'pwa' + // }, + // { + // name: 'Linter / Formatter', + // value: 'linter' + // }, + // { + // name: 'Unit Testing', + // value: 'test:unit' + // }, + // { + // name: 'E2E Testing', + // value: 'test:e2e' + // }, + ], + default: [], + when: (answers) => answers.server !== 'adonis' + }, ui: { message: 'Use a custom UI framework', type: 'list', @@ -98,8 +127,11 @@ module.exports = { default: 'npm' } }, - data: { - edge: process.argv.includes('--edge') + data(answers) { + return { + typescript: answers.modules.includes('typescript'), + edge: process.argv.includes('--edge') + } }, filters: { 'server/index-express.js': 'server === "express"', @@ -117,13 +149,17 @@ module.exports = { 'frameworks/buefy/**': 'ui === "buefy"', 'frameworks/iview/**': 'ui === "iview"', '_.eslintrc.js': 'eslint === "yes"', - '.prettierrc': 'prettier === "yes"' + '.prettierrc': 'prettier === "yes"', + 'modules/typescript.js': 'typescript', + '_tsconfig.json': 'typescript', + 'vue-shims.d.ts': 'typescript' }, move(answers) { const moveable = { gitignore: '.gitignore', '_package.json': 'package.json', '_.eslintrc.js': '.eslintrc.js', + '_tsconfig.json': 'tsconfig.json', 'server/index-*.js': 'server/index.js' } let nuxtDir diff --git a/template/_package.json b/template/_package.json index 42d39aeb5..4d4446991 100644 --- a/template/_package.json +++ b/template/_package.json @@ -46,7 +46,8 @@ "ant-design-vue": "^1.1.4"<% } else if (ui === 'buefy') { %>, "nuxt-buefy": "^0.2.1"<% } else if (ui === 'iview') { %>, "iview": "3.1.2"<% } %><% if (axios === 'yes') { %>, - "@nuxtjs/axios": "^5.0.0"<% } %> + "@nuxtjs/axios": "^5.0.0"<% } %><% if (typescript) { %>, + "nuxt-property-decorator": "^1.2.0"<% } %> }, "devDependencies": { "nodemon": "^1.18.7"<% if (eslint === 'yes') { %>, @@ -60,6 +61,10 @@ "autoprefixer": "^8.6.4", "tailwindcss": "^0.7.0"<% } else if (ui === 'vuetify') { %>, "stylus": "^0.54.5", - "stylus-loader": "^3.0.2"<% } %> + "stylus-loader": "^3.0.2"<% } %><% if (typescript) { %>, + "ts-loader": "^5.3.1", + "tslint": "^5.11.0", + "typescript": "^3.1.6" + <% } %> } } diff --git a/template/_tsconfig.json b/template/_tsconfig.json new file mode 100644 index 000000000..98e5c1bd6 --- /dev/null +++ b/template/_tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "jsx": "preserve", + "target": "es2015", + "module": "es2015", + "moduleResolution": "node", + "baseUrl": ".", + "paths": { + "~/*": ["./*"], + "@/*": ["./*"] + }, + "sourceMap": true, + "noUnusedLocals": true, + "experimentalDecorators": true + }, + "include": [ + "**/*.ts", + "**/*.vue" + ], + "exclude": [ + "node_modules" + ] +} diff --git a/template/modules/typescript.js b/template/modules/typescript.js new file mode 100644 index 000000000..35861b5f7 --- /dev/null +++ b/template/modules/typescript.js @@ -0,0 +1,24 @@ +module.exports = function () { + // Add .ts & .tsx extension to Nuxt + this.nuxt.options.extensions.push('ts', 'tsx') + + // Extend webpack build + this.extendBuild(config => { + // Add TypeScript + config.module.rules.push({ + test: /\.tsx?$/, + loader: 'ts-loader', + options: { appendTsSuffixTo: [/\.vue$/] } + }) + + // Add .ts extension in webpack resolve + if (! config.resolve.extensions.includes('.ts')) { + config.resolve.extensions.push('.ts') + } + + // Add .tsx extension in webpack resolve + if (! config.resolve.extensions.includes('.tsx')) { + config.resolve.extensions.push('.tsx') + } + }) +} diff --git a/template/nuxt/nuxt.config.js b/template/nuxt/nuxt.config.js index 01395f371..679704d1e 100644 --- a/template/nuxt/nuxt.config.js +++ b/template/nuxt/nuxt.config.js @@ -1,7 +1,7 @@ <% if (server === 'adonis') { %>const pkg = require('../package') -const resolve = require('path').resolve -<% } else { %>const pkg = require('./package') -<% } %> +<% } else { %>const pkg = require('./package')<% } %> +<% if (server === 'adonis' || typescript) { %>const resolve = require('path').resolve<% } %> + <% if (ui === 'vuetify') { %> const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') <% } %> @@ -67,7 +67,9 @@ module.exports = { // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma '@nuxtjs/bulma'<% } %><% if (ui === 'buefy') { %>, // Doc: https://buefy.github.io/#/documentation - 'nuxt-buefy'<% } %> + 'nuxt-buefy'<% } %><% if (typescript) { %>, + resolve(__dirname, 'modules/typescript.js') + <% } %> ],<% if (axios === 'yes') { %> /* ** Axios module configuration diff --git a/template/nuxt/pages/index.vue b/template/nuxt/pages/index.vue index 977a9e11b..52b9a755b 100644 --- a/template/nuxt/pages/index.vue +++ b/template/nuxt/pages/index.vue @@ -24,14 +24,22 @@ -