update template

Author: Allenice

meta.js

@@ -1,42 +1,97 @@
+const path = require('path')
+const fs = require('fs')
+
+const {
+  sortDependencies,
+  installDependencies,
+  printMessage,
+} = require('./utils')
+
+const pkg = require('./package.json')
+const templateVersion = pkg.version
+
+
 module.exports = {
-  "helpers": {
-    "if_or": function (v1, v2, options) {
+  helpers: {
+    if_or(v1, v2, options) {
       if (v1 || v2) {
         return options.fn(this);
       }
 
       return options.inverse(this);
+    },
+    template_version() {
+      return templateVersion
     }
   },
-  "prompts": {
-    "name": {
-      "type": "string",
-      "required": true,
-      "label": "Project name"
+  prompts: {
+    name: {
+      type: 'string',
+      required: true,
+      label: 'Project name'
     },
-    "description": {
-      "type": "string",
-      "required": true,
-      "label": "Project description",
-      "default": "A Vue.js project"
+    description: {
+      type: 'string',
+      required: true,
+      label: 'Project description',
+      default: 'A Vue.js project'
     },
-    "author": {
-      "type": "string",
-      "label": "Author"
+    author: {
+      type: 'string',
+      label: 'Author'
     },
-    "ie": {
-      "type": "confirm",
-      "message": "Support IE or older browser?"
+    ie: {
+      type: 'confirm',
+      message: ' Support IE or older browser?'
     },
-    "vuex": {
-      "type": "confirm",
-      "message": "Use vuex?"
+    vuex: {
+      type: 'confirm',
+      message: 'Use vuex?'
+    },
+    autoInstall: {
+      type: 'list',
+      message:
+        'Should we run `npm install` for you after the project has been created? (recommended)',
+      choices: [
+        {
+          name: 'Yes, use NPM',
+          value: 'npm',
+          short: 'npm',
+        },
+        {
+          name: 'Yes, use Yarn',
+          value: 'yarn',
+          short: 'yarn',
+        },
+        {
+          name: 'No, I will handle that myself',
+          value: false,
+          short: 'no',
+        },
+      ]
     }
   },
-  "filters": {
-    "src/components/views/todo/**/*": "vuex",
-    "src/store/**/*": "vuex",
-    "typings/interface/state.d.ts": "vuex"
+  filters: {
+    'src/components/views/todo/**/*': 'vuex',
+    'src/store/**/*': 'vuex',
+    'typings/interface/state.d.ts': 'vuex'
   },
-  "completeMessage": "{{#inPlace}}To get started:\n\n  npm install\n  npm run dev.{{else}}To get started:\n\n  cd {{destDirName}}\n  yarn\n  yarn dll\n  yarn dev.{{/inPlace}}"
+  complete(data, { chalk }) {
+    const green = chalk.green
+
+    sortDependencies(data, green)
+    const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName)
+
+    if (data.autoInstall) {
+      installDependencies(cwd, data.autoInstall, green)
+        .then(() => {
+          printMessage(data, green)
+        })
+        .catch(e => {
+          console.log(chalk.red('Error:'), e)
+        })
+    } else {
+      printMessage(data, chalk)
+    }
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-template-typescript",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "MIT",
   "description": "Vue use typescript",
   "scripts": {

template/build/build.js

@@ -2,38 +2,77 @@ require('./check-versions')()
 
 process.env.NODE_ENV = 'production'
 
-var ora = require('ora')
-var rm = require('rimraf')
-var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('./config')
-var webpackConfig = require('./webpack.prod.conf')
-
-var spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-    if (err) throw err
-    webpack(webpackConfig, function(err, stats) {
-        spinner.stop()
-        if (err) throw err
-        process.stdout.write(
-            stats.toString({
-                colors: true,
-                modules: false,
-                children: false,
-                chunks: false,
-                chunkModules: false
-            }) + '\n\n'
-        )
-
-        console.log(chalk.cyan('  Build complete.\n'))
-        console.log(
-            chalk.yellow(
-                '  Tip: built files are meant to be served over an HTTP server.\n' +
-                    "  Opening index.html over file:// won't work.\n"
-            )
-        )
-    })
-})
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const inquirer = require('inquirer')
+const envList = ['doc', 'dev', 'sit', 'deploy']
+
+async function build() {
+    if (!process.env.ENV) {
+        throw new Error('请设置 process.env.ENV')
+        process.exit(1)
+    }
+
+    if (envList.indexOf(process.env.ENV) < 0) {
+        throw new Error('没有对应的 ENV')
+        process.exit(1)
+    }
+
+    const config = require('./config')
+    const utils = require('./utils')
+
+    rm(
+        path.join(config.build.assetsRoot, config.build.assetsSubDirectory),
+        async err => {
+            if (err) throw err
+            try {
+                let loader = utils.loading('building for dll...')
+                const dllWebpackConfig = require('./webpack.dll.conf')
+                await utils.runWebpack(dllWebpackConfig)
+                loader.stop()
+
+                loader = utils.loading('building for production... ')
+                const webpackConfig = require('./webpack.prod.conf')
+                await utils.runWebpack(webpackConfig)
+                loader.stop()
+
+                console.log(chalk.cyan('  Build complete.\n'))
+                console.log(
+                    chalk.yellow(
+                        '  Tip: built files are meant to be served over an HTTP server.\n' +
+                            "  Opening index.html over file:// won't work.\n"
+                    )
+                )
+            } catch (error) {
+                console.log(chalk.red(error))
+            }
+        }
+    )
+}
+
+if (!module.parent) {
+    // 直接运行
+    ;(async function() {
+        let answers = null
+        // 如果没有指明坏境就询问
+        if (!process.env.ENV) {
+            answers = await inquirer.prompt([
+                {
+                    type: 'list',
+                    name: 'env',
+                    message: '要 build 的坏境是?',
+                    choices: envList,
+                    default: 'dev'
+                }
+            ])
+            process.env.ENV = answers.env
+        }
+        build()
+    })()
+} else {
+    // 被其他模块调用
+    module.exports = build
+}

template/build/config/dev.env.js

@@ -1,5 +1,6 @@
-var merge = require('webpack-merge')
-var prodEnv = require('./prod.env')
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
     NODE_ENV: '"development"'

template/build/config/index.js

@@ -3,38 +3,72 @@ var path = require('path')
 var env = process.env.ENV || 'dev'
 
 module.exports = {
+    dev: {
+        // Paths
+        assetsRoot: path.resolve(__dirname, `../../dist/${env}`),
+        assetsSubDirectory: 'static',
+        assetsPublicPath: '/',
+        proxyTable: {},
+
+        // Various Dev Server settings
+        host: 'localhost', // can be overwritten by process.env.HOST
+        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+        autoOpenBrowser: true,
+        errorOverlay: true,
+        notifyOnErrors: true,
+        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+        // Use Eslint Loader?
+        // If true, your code will be linted during bundling and
+        // linting errors and warnings will be shown in the console.
+        useEslint: true,
+        // If true, eslint errors and warnings will also be shown in the error overlay
+        // in the browser.
+        showEslintErrorsInOverlay: false,
+
+        /**
+         * Source Maps
+         */
+
+        // https://webpack.js.org/configuration/devtool/#development
+        devtool: 'cheap-module-eval-source-map',
+
+        // If you have problems debugging vue-files in devtools,
+        // set this to false - it *may* help
+        // https://vue-loader.vuejs.org/en/options.html#cachebusting
+        cacheBusting: true,
+
+        cssSourceMap: true
+    },
+
     build: {
-        env: require('./prod.env'),
-        index: path.resolve(__dirname, `../../index.html`),
+        // Template for index.html
+        index: path.resolve(__dirname, `../../dist/${env}/index.html`),
+
+        // Paths
         assetsRoot: path.resolve(__dirname, `../../dist/${env}`),
         assetsSubDirectory: 'static',
-        assetsPublicPath: `/dist/${env}/`,
-        productionSourceMap: false,
+        assetsPublicPath: env === 'doc' ? '' : '/',
+
+        /**
+         * Source Maps
+         */
+
+        productionSourceMap: true,
+        // https://webpack.js.org/configuration/devtool/#production
+        devtool: '#source-map',
+
         // Gzip off by default as many popular static hosts such as
         // Surge or Netlify already gzip all static assets for you.
         // Before setting to `true`, make sure to:
         // npm install --save-dev compression-webpack-plugin
         productionGzip: false,
         productionGzipExtensions: ['js', 'css'],
+
         // Run the build command with an extra argument to
         // View the bundle analyzer report after build finishes:
         // `npm run build --report`
         // Set to `true` or `false` to always turn it on or off
         bundleAnalyzerReport: process.env.npm_config_report
-    },
-    dev: {
-        env: require('./dev.env'),
-        port: 8080,
-        autoOpenBrowser: true,
-        assetsRoot: path.resolve(__dirname, `../../dist/${env}`),
-        assetsSubDirectory: 'static',
-        assetsPublicPath: '/',
-        proxyTable: {},
-        // CSS Sourcemaps off by default because relative paths are "buggy"
-        // with this option, according to the CSS-Loader README
-        // (https://github.com/webpack/css-loader#sourcemaps)
-        // In our experience, they generally work as expected,
-        // just be aware of this issue when enabling this option.
-        cssSourceMap: false
     }
 }

template/build/config/prod.env.js

@@ -1,3 +1,5 @@
+'use strict'
+
 module.exports = {
     NODE_ENV: '"production"'
 }