From 62e45aae80088963853e815d69e09fb359c65547 Mon Sep 17 00:00:00 2001 From: PENG WANG Date: Mon, 4 Dec 2017 07:09:03 -0600 Subject: [PATCH 01/10] webpack.conf.js is not needed in jest and e2e (#1135) --- meta.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/meta.js b/meta.js index ed7a8b6a2d..219d6096f8 100644 --- a/meta.js +++ b/meta.js @@ -117,7 +117,7 @@ module.exports = { ".eslintrc.js": "lint", ".eslintignore": "lint", "config/test.env.js": "unit || e2e", - "build/webpack.test.conf.js": "e2e || (unit && runner === 'karma')", + "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'", From 4cf9eb3c209829805618ce06dcbafeabae6ecb43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=A5=BA?= Date: Mon, 4 Dec 2017 21:09:47 +0800 Subject: [PATCH 02/10] fix filename of `.eslintignore` (#1136) --- docs/structure.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/structure.md b/docs/structure.md index 33bec21d84..75c958a42f 100644 --- a/docs/structure.md +++ b/docs/structure.md @@ -31,7 +31,7 @@ ├── .babelrc # babel config ├── .editorconfig # indentation, spaces/tabs and similar settings for your editor ├── .eslintrc.js # eslint config -├── .eslintignore.js # eslint ignore rules +├── .eslintignore # eslint ignore rules ├── .gitignore # sensible defaults for gitignore ├── .postcssrc.js # postcss config ├── index.html # index.html template From d771d1e3902b7a0f05cafe43f9a6b03d1769a1d0 Mon Sep 17 00:00:00 2001 From: Suhas Karanth Date: Sat, 9 Dec 2017 15:32:50 +0530 Subject: [PATCH 03/10] Revert "remove uneccessary target.browsers (#1004)" (#1083) This reverts commit 41cb81117487e756311950185dd3508117a15591. --- template/.babelrc | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/template/.babelrc b/template/.babelrc index 6e0aaac99c..cd05be897b 100644 --- a/template/.babelrc +++ b/template/.babelrc @@ -1,7 +1,10 @@ { "presets": [ ["env", { - "modules": false + "modules": false, + "targets": { + "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] + } }], "stage-2" ], From caa259a452010c8a2837e90400d4546dce15ff66 Mon Sep 17 00:00:00 2001 From: Suhas Karanth Date: Sat, 9 Dec 2017 15:33:05 +0530 Subject: [PATCH 04/10] Document babel target env configuration (#1144) --- docs/SUMMARY.md | 1 + docs/babel.md | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 docs/babel.md diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 7dc38823cb..e0bd6ac2fb 100644 --- a/docs/SUMMARY.md +++ b/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) diff --git a/docs/babel.md b/docs/babel.md new file mode 100644 index 0000000000..eaa0ca9d83 --- /dev/null +++ b/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. From 44ca39842f66548cac7b7292c8d932d59c4e70e3 Mon Sep 17 00:00:00 2001 From: anubhav mishra Date: Sat, 9 Dec 2017 15:34:23 +0530 Subject: [PATCH 05/10] airbnb eslint config compatibility with vuex (#1003) --- template/.eslintrc.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/template/.eslintrc.js b/template/.eslintrc.js index 8e8be20e8d..1f14f630f4 100644 --- a/template/.eslintrc.js +++ b/template/.eslintrc.js @@ -42,6 +42,22 @@ module.exports = { js: 'never', vue: 'never' }], + // disallow reassignment of function parameters + // disallow parameter object manipulation except for specific exclusions + 'no-param-reassign': ['error', { + props: true, + ignorePropertyModificationsFor: [ + 'state', // for vuex state + 'acc', // for reduce accumulators + 'e', // for e.returnvalue + 'ctx', // for Koa routing + 'req', // for Express requests + 'request', // for Express requests + 'res', // for Express responses + 'response', // for Express responses + '$scope', // for Angular 1 scopes + ] + }], // allow optionalDependencies 'import/no-extraneous-dependencies': ['error', { optionalDependencies: ['test/unit/index.js'] From 57511316cc5db5bc28f94bfc9c1d8994782cdd1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Sat, 9 Dec 2017 11:04:59 +0100 Subject: [PATCH 06/10] Set `allChunks: true` by default (close #1110) (#1149) * `allChunks: true` by default close #1110 * update wording. --- template/build/webpack.prod.conf.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/template/build/webpack.prod.conf.js b/template/build/webpack.prod.conf.js index d121faed35..bf613e8424 100644 --- a/template/build/webpack.prod.conf.js +++ b/template/build/webpack.prod.conf.js @@ -46,10 +46,11 @@ const webpackConfig = merge(baseWebpackConfig, { // extract css into its own file new ExtractTextPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), - // set the following option to `true` if you want to extract CSS from - // codesplit chunks into this main css file as well. - // This will result in *all* of your app's CSS being loaded upfront. - allChunks: false, + // Setting the following option to `false` will not extract CSS from codesplit chunks. + // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. + // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, + // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 + allChunks: true, }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. From ecd68c4b72c0282bff1cd291ff9f91e30ce27d22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Mon, 11 Dec 2017 13:28:59 +0100 Subject: [PATCH 07/10] Automatically install Dependencies and fix lint errors (#1133) * Batman! * removed special airbnb template strings since we can auto-fix them now. * fix string bug * remove last airbnb template string * * Make autoinstall optional * run lint-fix for airbnb AND standard * print message if user has to manually lint-fix * webpack.conf.js is not needed in jest and e2e (#1135) * fix filename of `.eslintignore` (#1136) * Batman! * removed special airbnb template strings since we can auto-fix them now. * fix string bug * remove last airbnb template string * * Make autoinstall optional * run lint-fix for airbnb AND standard * print message if user has to manually lint-fix * used chalk to color up console logs * add option for yarn * change double quotes to single quotes, remove where possible * generalize log message --- meta.js | 225 ++++++++++-------- template/src/App.vue | 10 +- template/src/components/HelloWorld.vue | 10 +- template/src/main.js | 14 +- template/src/router/index.js | 16 +- .../e2e/custom-assertions/elementCount.js | 16 +- template/test/e2e/runner.js | 48 ++-- template/test/e2e/specs/test.js | 8 +- template/test/unit/index.js | 12 +- template/test/unit/karma.conf.js | 12 +- template/test/unit/specs/HelloWorld.spec.js | 14 +- utils/index.js | 109 +++++++++ 12 files changed, 313 insertions(+), 181 deletions(-) create mode 100644 utils/index.js diff --git a/meta.js b/meta.js index 219d6096f8..1e0b798e20 100644 --- a/meta.js +++ b/meta.js @@ -1,18 +1,15 @@ 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 { + 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); } @@ -20,127 +17,153 @@ module.exports = { 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?' }, - "lint": { - "type": "confirm", - "message": "Use ESLint to lint your code?" + lint: { + type: 'confirm', + message: 'Use ESLint to lint your code?' }, - "lintConfig": { - "when": "lint", - "type": "list", - "message": "Pick an ESLint preset", - "choices": [ + lintConfig: { + when: 'lint', + 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' } ] }, - "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?" + 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' + } + ] } }, - "filters": { - ".eslintrc.js": "lint", - ".eslintignore": "lint", - "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': 'lint', + '.eslintignore': 'lint', + '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 - 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")); + sortDependencies(data, green) + + const cwd = path.join(process.cwd(), data.inPlace ? '' : data.destDirName) + + if (data.autoInstall) { + installDependencies(cwd, data.autoInstall, green) + .then(() => { + return runLintFix(cwd, data, green) + }) + .then(() => { + printMessage(data, green) + }) + } else { + printMessage(data, chalk) + } + } }; diff --git a/template/src/App.vue b/template/src/App.vue index 2ef72e8cbc..03d5e7247d 100644 --- a/template/src/App.vue +++ b/template/src/App.vue @@ -11,15 +11,15 @@