Merge branch 'develop' into feature/stylint

.gitignore

@@ -2,3 +2,7 @@ node_modules
 .DS_Store
 docs/_book
 test/
+node_modules
+.DS_Store
+docs/_book
+test/

docs/SUMMARY.md

@@ -2,6 +2,7 @@
 
 - [Project Structure](structure.md)
 - [Build Commands](commands.md)
+- [Babel Configuration](babel.md)
 - [Linter Configuration](linter.md)
 - [Pre-Processors](pre-processors.md)
 - [Handling Static Assets](static.md)

docs/babel.md

@@ -0,0 +1,22 @@
+# Babel Configuration
+
+This boilerplate uses [`babel-preset-env`](https://www.npmjs.com/package/babel-preset-env) for configuring babel. You can read more about it here - http://2ality.com/2017/02/babel-preset-env.html.
+
+> A Babel preset that compiles ES2015+ down to ES5 by automatically determining the Babel plugins and polyfills you need based on your targeted browser or runtime environments.
+
+It uses [`browserslist`](https://github.com/ai/browserslist) to parse this information, so we can use any [valid query format supported by `browserslist`](https://github.com/ai/browserslist#queries).
+
+However there is a caveat. `browserslist` recommends defining the target in a common place like `package.json` or in a `.browserslistrc` config file. This allows tools like [`autoprefixer`](https://github.com/postcss/autoprefixer) and [`eslint-plugin-compat`](https://github.com/amilajack/eslint-plugin-compat) to share the config. For this template, `browserslist` is configured in the `package.json`:
+
+```json
+{
+  "...": "...",
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
+```
+
+But the latest stable release of `babel-preset-env`, `v1.6.1` does not support loading the config from `package.json`. So the target environment is repeated in `.babelrc`. If you wish to change your target environment, please be sure to update both `package.json` and `.babelrc`. Note that this has been fixed in the beta version([`@babel/preset-env@7.0.0-beta.34`](https://github.com/babel/babel/tree/master/packages/babel-preset-env)) and the template will be updated once it is out of beta.

meta.js

@@ -1,179 +1,205 @@
-const path = require('path');
-const fs = require('fs');
-
-function sortObject(object) {
-  // Based on https://github.com/yarnpkg/yarn/blob/v1.3.2/src/config.js#L79-L85
-  const sortedObject = {};
-  Object.keys(object).sort().forEach(item => {
-    sortedObject[item] = object[item];
-  });
-  return sortedObject;
-}
+const path = require('path')
+const fs = require('fs')
+const {
+  sortDependencies,
+  installDependencies,
+  runLintFix,
+  printMessage,
+} = require('./utils')
 
 module.exports = {
-  "helpers": {
-    "if_or": function (v1, v2, options) {
+  helpers: {
+    if_or: function(v1, v2, options) {
       if (v1 || v2) {
-        return options.fn(this);
+        return options.fn(this)
       }
 
-      return options.inverse(this);
-    }
+      return options.inverse(this)
+    },
   },
-  "prompts": {
-    "name": {
-      "type": "string",
-      "required": true,
-      "message": "Project name"
+  prompts: {
+    name: {
+      type: 'string',
+      required: true,
+      message: 'Project name',
     },
-    "description": {
-      "type": "string",
-      "required": false,
-      "message": "Project description",
-      "default": "A Vue.js project"
+    description: {
+      type: 'string',
+      required: false,
+      message: 'Project description',
+      default: 'A Vue.js project',
     },
-    "author": {
-      "type": "string",
-      "message": "Author"
+    author: {
+      type: 'string',
+      message: 'Author',
     },
-    "build": {
-      "type": "list",
-      "message": "Vue build",
-      "choices": [
+    build: {
+      type: 'list',
+      message: 'Vue build',
+      choices: [
         {
-          "name": "Runtime + Compiler: recommended for most users",
-          "value": "standalone",
-          "short": "standalone"
+          name: 'Runtime + Compiler: recommended for most users',
+          value: 'standalone',
+          short: 'standalone',
         },
         {
-          "name": "Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere",
-          "value": "runtime",
-          "short": "runtime"
-        }
-      ]
+          name:
+            'Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere',
+          value: 'runtime',
+          short: 'runtime',
+        },
+      ],
     },
-    "router": {
-      "type": "confirm",
-      "message": "Install vue-router?"
+    router: {
+      type: 'confirm',
+      message: 'Install vue-router?',
     },
-    "eslint": {
-      "type": "confirm",
-      "message": "Use ESLint to lint your code?"
+    eslint: {
+      type: 'confirm',
+      message: 'Use ESLint to lint your code?',
     },
-    "eslintConfig": {
-      "when": "eslint",
-      "type": "list",
-      "message": "Pick an ESLint preset",
-      "choices": [
+    eslintConfig: {
+      when: 'eslint',
+      type: 'list',
+      message: 'Pick an ESLint preset',
+      choices: [
         {
-          "name": "Standard (https://github.com/standard/standard)",
-          "value": "standard",
-          "short": "Standard"
+          name: 'Standard (https://github.com/standard/standard)',
+          value: 'standard',
+          short: 'Standard',
         },
         {
-          "name": "Airbnb (https://github.com/airbnb/javascript)",
-          "value": "airbnb",
-          "short": "Airbnb"
+          name: 'Airbnb (https://github.com/airbnb/javascript)',
+          value: 'airbnb',
+          short: 'Airbnb',
         },
         {
-          "name": "none (configure it yourself)",
-          "value": "none",
-          "short": "none"
+          name: 'none (configure it yourself)',
+          value: 'none',
+          short: 'none'
         }
       ]
     },
-    "stylelint": {
-      "type": "confirm",
-      "message": "Use stylelint to lint your code?"
+    stylelint: {
+      type: 'confirm',
+      message: 'Use stylelint to lint your code?'
     },
-    "stylelintConfig": {
-      "when": "stylelint",
-      "type": "list",
-      "message": "Pick a stylelint preset",
-      "choices": [
+    stylelintConfig: {
+      when: 'stylelint',
+      type: 'list',
+      message: 'Pick a stylelint preset',
+      choices: [
         {
-          "name": "Standard (https://github.com/stylelint/stylelint-config-standard)",
-          "value": "standard",
-          "short": "Standard"
+          name: 'Standard (https://github.com/stylelint/stylelint-config-standard)',
+          value: 'standard',
+          short: 'Standard'
         },
         {
-          "name": "Recommended (https://github.com/stylelint/stylelint-config-recommended)",
-          "value": "recommended",
-          "short": "Recommended"
+          name: 'Recommended (https://github.com/stylelint/stylelint-config-recommended)',
+          value: 'recommended',
+          short: 'Recommended'
         },
         {
-          "name": "Wikimedia (https://github.com/wikimedia/stylelint-config-wikimedia)",
-          "value": "wikimedia",
-          "short": "Wikimedia"
+          name: 'Wikimedia (https://github.com/wikimedia/stylelint-config-wikimedia)',
+          value: 'wikimedia',
+          short: 'Wikimedia'
         },
         {
-          "name": "none (configure it yourself)",
-          "value": "none",
-          "short": "none"
-        }
-      ]
+          name: 'none (configure it yourself)',
+          value: 'none',
+          short: 'none',
+        },
+      ],
     },
-    "unit": {
-      "type": "confirm",
-      "message": "Set up unit tests"
+    unit: {
+      type: 'confirm',
+      message: 'Set up unit tests',
     },
-    "runner": {
-      "when": "unit",
-      "type": "list",
-      "message": "Pick a test runner",
-      "choices": [
+    runner: {
+      when: 'unit',
+      type: 'list',
+      message: 'Pick a test runner',
+      choices: [
         {
-          "name": "Jest",
-          "value": "jest",
-          "short": "jest"
+          name: 'Jest',
+          value: 'jest',
+          short: 'jest',
         },
         {
-          "name": "Karma and Mocha",
-          "value": "karma",
-          "short": "karma"
+          name: 'Karma and Mocha',
+          value: 'karma',
+          short: 'karma',
         },
         {
-          "name": "none (configure it yourself)",
-          "value": "noTest",
-          "short": "noTest"
-        }
-      ]
+          name: 'none (configure it yourself)',
+          value: 'noTest',
+          short: 'noTest',
+        },
+      ],
+    },
+    e2e: {
+      type: 'confirm',
+      message: 'Setup e2e tests with Nightwatch?',
+    },
+    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',
+        },
+      ],
     },
-    "e2e": {
-      "type": "confirm",
-      "message": "Setup e2e tests with Nightwatch?"
-    }
   },
-  "filters": {
-    ".eslintrc.js": "eslint",
-    ".eslintignore": "eslint",
-    ".stylelintrc.js": "stylelint",
-    ".stylelintignore": "stylelint",
-    "config/test.env.js": "unit || e2e",
-    "build/webpack.test.conf.js": "unit && runner === 'karma'",
-    "test/unit/**/*": "unit",
-    "test/unit/index.js": "unit && runner === 'karma'",
-    "test/unit/jest.conf.js": "unit && runner === 'jest'",
-    "test/unit/karma.conf.js": "unit && runner === 'karma'",
-    "test/unit/specs/index.js": "unit && runner === 'karma'",
-    "test/unit/setup.js": "unit && runner === 'jest'",
-    "test/e2e/**/*": "e2e",
-    "src/router/**/*": "router"
+  filters: {
+    '.eslintrc.js': 'eslint',
+    '.eslintignore': 'eslint',
+    '.stylelintrc.js': 'stylelint',
+    '.stylelintignore': 'stylelint',
+    'config/test.env.js': 'unit || e2e',
+    'build/webpack.test.conf.js': "unit && runner === 'karma'",
+    'test/unit/**/*': 'unit',
+    'test/unit/index.js': "unit && runner === 'karma'",
+    'test/unit/jest.conf.js': "unit && runner === 'jest'",
+    'test/unit/karma.conf.js': "unit && runner === 'karma'",
+    'test/unit/specs/index.js': "unit && runner === 'karma'",
+    'test/unit/setup.js': "unit && runner === 'jest'",
+    'test/e2e/**/*': 'e2e',
+    'src/router/**/*': 'router',
   },
-  "complete": function (data) {
-    const packageJsonFile = path.join(
-      data.inPlace ? "" : data.destDirName,
-      "package.json"
-    );
-    const packageJson = JSON.parse(fs.readFileSync(packageJsonFile));
-    packageJson.devDependencies = sortObject(packageJson.devDependencies);
-    packageJson.dependencies = sortObject(packageJson.dependencies);
-    fs.writeFileSync(
-      packageJsonFile,
-      JSON.stringify(packageJson, null, 2) + "\n"
-    );
+  complete: function(data, { chalk }) {
+    const green = chalk.green
+
+    sortDependencies(data, green)
+
+    const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName)
 
-    const message = `To get started:\n\n  ${data.inPlace ? '' : `cd ${data.destDirName}\n  `}npm install\n  npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack`;
-    console.log("\n" + message.split(/\r?\n/g).map(line => "   " + line).join("\n"));
-  }
-};
+    if (data.autoInstall) {
+      installDependencies(cwd, data.autoInstall, green)
+        .then(() => {
+          return runLintFix(cwd, data, 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-webpack",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "license": "MIT",
   "description": "A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.",
   "scripts": {