From f1b859de33f3caa5aec7f6b092be03a578b765fc Mon Sep 17 00:00:00 2001 From: Ryan Belt Date: Wed, 30 Aug 2017 11:50:15 -0400 Subject: [PATCH] Beltrw mods (#9) * babel should keep code comments. (fix #730) (#753) They are necessary for webpacks "magic comments" to work, e.g. with `import(/* webpackChunkName: "chunk1" */ './component.vue')` * build: Configure targets.browser for babel-preset-env (#763) * Remove inconsistent spacing (#754) * feat(gitignore): include common editor directories (#774) * feat(gitignore): include common editor directories add common editor files and directories to .gitignore closes #772 * feat(gitignore): remove .vscode directory remove .vscode directory from .gitignore * Video audio loader (#765) * gitignore vscode * media loader audio and video tag * Remove vscode gitignore * Add \n back * fix missing closing bracket * add default values (img, image) * Upgrade vue-router to v2.6.0 (#777) * Fix console error (#784) Fix console error`Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING` * Fix proxy example (fix #780) the glob pattern was too narrow, woudl not catch subpaths. * Fix autoprefixer explanation (#798) The parameter to set in package.json is named "browserslist". * chore: Bump dev dependencies for template (#790) * fix: Use false to disable webpack-hot-middleware log (#778) * Move Chat: Gitter -> Discord (#869) * Remove unnecessary space and comma (#866) * load webpack.prod.conf when NODE_ENV=production (#864) * Return exit code 1 when npm run build fails (#854) * fix standard eslint config link (#834) * fix ci build faild (#857) * Removing Vue.config.debug usage from documentation (#871) * Removing Vue.config.debug usage from documentation It has been removed; https://vuejs.org/v2/guide/migration.html#Vue-config-debug-removed * Update env.md * fixed vue-router dependency(need vue-loader@^13.0.0) (#876) * bump vue & vue-router dependencies * Specify the address to listen on (#759) Currently, this causes the dev server to listen on all addresses by default, which is not the intended behavior, imo. * add HashedModuleIdsPlugin when build (#870) * Add support for linked modules (#688) * chore(package): rm unused lolex dependency(dev) (#803) * fix #877 * Revert #688, fix #879 We have to investigate how we can get #688 work without the error reported in #879 * revert: #759 That's actually not a good idea when you e.g. want to access the dev server from your mobile. * - Re-added check for router - Modified eslint file to use standard and have M be a global --- circle.yml | 8 ++++++- docs/env.md | 10 ++++---- docs/proxy.md | 2 +- meta.js | 7 +++++- template/.babelrc | 10 +++++--- template/.eslintrc.js | 7 +++--- template/.gitignore | 7 ++++++ template/.postcssrc.js | 2 +- template/build/build.js | 5 ++++ template/build/build_preprod.js | 5 ++++ template/build/check-versions.js | 2 +- template/build/dev-server.js | 5 ++-- template/build/vue-loader.conf.js | 8 ++++++- template/build/webpack.base.conf.js | 12 +++++++++- template/build/webpack.preprod.conf.js | 2 ++ template/build/webpack.prod.conf.js | 2 ++ template/build/webpack.test.conf.js | 2 +- template/package.json | 32 +++++++++++++------------- template/src/App.vue | 13 ++++++++++- template/src/components/Component.vue | 2 +- template/src/main.js | 4 ++++ 21 files changed, 108 insertions(+), 39 deletions(-) diff --git a/circle.yml b/circle.yml index 4d2212d694..8290c039d3 100644 --- a/circle.yml +++ b/circle.yml @@ -1,6 +1,12 @@ machine: node: - version: 6 + version: stable + +dependencies: + pre: + - sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list' + - sudo apt-get update + - sudo apt-get install google-chrome-stable test: override: diff --git a/docs/env.md b/docs/env.md index 211ca5d0f3..600ddb94f6 100644 --- a/docs/env.md +++ b/docs/env.md @@ -42,10 +42,10 @@ So, the environment variables are: As we can see, `test.env` inherits the `dev.env` and the `dev.env` inherits the `prod.env`. -### Usage +### Usage -It is simple to use the environment variables in your code. For example: +It is simple to use the environment variables in your code. For example: -```js -Vue.config.debug = process.env.DEBUG_MODE -``` \ No newline at end of file +```js +Vue.config.productionTip = process.env.NODE_ENV === 'production' +``` diff --git a/docs/proxy.md b/docs/proxy.md index fc822ea647..60b5151c2f 100644 --- a/docs/proxy.md +++ b/docs/proxy.md @@ -31,7 +31,7 @@ In addition to static urls you can also use glob patterns to match URLs, e.g. `/ ``` js proxyTable: { - '*': { + '**': { target: 'http://jsonplaceholder.typicode.com', filter: function (pathname, req) { return pathname.match('^/api') && req.method === 'GET' diff --git a/meta.js b/meta.js index 7d390d2fb8..e001d3849e 100644 --- a/meta.js +++ b/meta.js @@ -24,6 +24,10 @@ module.exports = { "type": "string", "message": "Author" }, + "router": { + "type": "confirm", + "message": "Install vue-router?" + }, "unit": { "type": "confirm", "message": "Setup unit tests with Karma + Mocha?" @@ -37,7 +41,8 @@ module.exports = { "config/test.env.js": "unit || e2e", "test/unit/**/*": "unit", "build/webpack.test.conf.js": "unit", - "test/e2e/**/*": "e2e" + "test/e2e/**/*": "e2e", + "src/router/**/*": "router" }, "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\nDocumentation can be found at https://github.com/JasonGrubb/webpack" diff --git a/template/.babelrc b/template/.babelrc index 13f0e47164..c06df4d53a 100644 --- a/template/.babelrc +++ b/template/.babelrc @@ -1,14 +1,18 @@ { "presets": [ - ["env", { "modules": false }], + ["env", { + "modules": false, + "targets": { + "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] + } + }], "stage-2" ], "plugins": ["transform-runtime"], - "comments": false, "env": { "test": { "presets": ["env", "stage-2"], - "plugins": [ "istanbul" ] + "plugins": ["istanbul"] } } } diff --git a/template/.eslintrc.js b/template/.eslintrc.js index a025069758..5f34bf6795 100644 --- a/template/.eslintrc.js +++ b/template/.eslintrc.js @@ -14,10 +14,11 @@ module.exports = { '_' : true, 'utils': true, 'opts' : true, - 'vue' : true + 'vue' : true, + 'M' : true }, - // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style - extends: 'vue', + // https://github.com/standard/standard/blob/master/docs/RULES-en.md + extends: 'standard', // required to lint *.vue files plugins: [ 'html' diff --git a/template/.gitignore b/template/.gitignore index 1ecac1d283..0ef2f13f49 100644 --- a/template/.gitignore +++ b/template/.gitignore @@ -11,3 +11,10 @@ test/unit/coverage test/e2e/reports selenium-debug.log {{/e2e}} + +# Editor directories and files +.idea +*.suo +*.ntvs* +*.njsproj +*.sln diff --git a/template/.postcssrc.js b/template/.postcssrc.js index ea9a5ab875..09948d63e9 100644 --- a/template/.postcssrc.js +++ b/template/.postcssrc.js @@ -2,7 +2,7 @@ module.exports = { "plugins": { - // to edit target browsers: use "browserlist" field in package.json + // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {} } } diff --git a/template/build/build.js b/template/build/build.js index 6b8add100c..a645011612 100644 --- a/template/build/build.js +++ b/template/build/build.js @@ -26,6 +26,11 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { chunkModules: false }) + '\n\n') + if (stats.hasErrors()) { + console.log(chalk.red(' Build failed with errors.\n')) + process.exit(1) + } + console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + diff --git a/template/build/build_preprod.js b/template/build/build_preprod.js index f8974b00ad..643a549acd 100644 --- a/template/build/build_preprod.js +++ b/template/build/build_preprod.js @@ -26,6 +26,11 @@ rm(path.join(config.build_preprod.assetsRoot, config.build_preprod.assetsSubDire chunkModules: false }) + '\n\n') + if (stats.hasErrors()) { + console.log(chalk.red(' Build failed with errors.\n')) + process.exit(1) + } + console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + diff --git a/template/build/check-versions.js b/template/build/check-versions.js index 100f3a0fe3..b3e7e17e34 100644 --- a/template/build/check-versions.js +++ b/template/build/check-versions.js @@ -11,7 +11,7 @@ var versionRequirements = [ name: 'node', currentVersion: semver.clean(process.version), versionRequirement: packageConfig.engines.node - }, + } ] if (shell.which('npm')) { diff --git a/template/build/dev-server.js b/template/build/dev-server.js index 724bc51f6d..e3c7b55708 100644 --- a/template/build/dev-server.js +++ b/template/build/dev-server.js @@ -10,7 +10,7 @@ var path = require('path') var express = require('express') var webpack = require('webpack') var proxyMiddleware = require('http-proxy-middleware') -var webpackConfig = {{#if_or unit e2e}}process.env.NODE_ENV === 'testing' +var webpackConfig = {{#if_or unit e2e}}(process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') ? require('./webpack.prod.conf') : {{/if_or}}require('./webpack.dev.conf') @@ -31,7 +31,8 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, { }) var hotMiddleware = require('webpack-hot-middleware')(compiler, { - log: () => {} + log: false, + heartbeat: 2000 }) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) { diff --git a/template/build/vue-loader.conf.js b/template/build/vue-loader.conf.js index 7aee79bae4..8a346d5222 100644 --- a/template/build/vue-loader.conf.js +++ b/template/build/vue-loader.conf.js @@ -8,5 +8,11 @@ module.exports = { ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction - }) + }), + transformToRequire: { + video: 'src', + source: 'src', + img: 'src', + image: 'xlink:href' + } } diff --git a/template/build/webpack.base.conf.js b/template/build/webpack.base.conf.js index 542bb72ddf..bb9710e867 100644 --- a/template/build/webpack.base.conf.js +++ b/template/build/webpack.base.conf.js @@ -1,4 +1,5 @@ var path = require('path') +var fs = require('fs') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') @@ -23,7 +24,8 @@ module.exports = { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), - } + }, + symlinks: false }, module: { rules: [ @@ -54,6 +56,14 @@ module.exports = { name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, + { + test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('media/[name].[hash:7].[ext]') + } + }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', diff --git a/template/build/webpack.preprod.conf.js b/template/build/webpack.preprod.conf.js index 3206da9da7..4fb6c30576 100644 --- a/template/build/webpack.preprod.conf.js +++ b/template/build/webpack.preprod.conf.js @@ -59,6 +59,8 @@ var webpackConfig = merge(baseWebpackConfig, { // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), + // keep module.id stable when vender modules does not change + new webpack.HashedModuleIdsPlugin(), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', diff --git a/template/build/webpack.prod.conf.js b/template/build/webpack.prod.conf.js index 7977f5ce80..e40a340c5d 100644 --- a/template/build/webpack.prod.conf.js +++ b/template/build/webpack.prod.conf.js @@ -67,6 +67,8 @@ var webpackConfig = merge(baseWebpackConfig, { // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), + // keep module.id stable when vender modules does not change + new webpack.HashedModuleIdsPlugin(), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', diff --git a/template/build/webpack.test.conf.js b/template/build/webpack.test.conf.js index d6c8c8dd31..48f64cc319 100644 --- a/template/build/webpack.test.conf.js +++ b/template/build/webpack.test.conf.js @@ -13,7 +13,7 @@ var webpackConfig = merge(baseConfig, { devtool: '#inline-source-map', resolveLoader: { alias: { - // necessary to to make lang="scss" work in test when using vue-loader's ?inject option + // necessary to to make lang="scss" work in test when using vue-loader's ?inject option // see discussion at https://github.com/vuejs/vue-loader/issues/724 'scss-loader': 'sass-loader' } diff --git a/template/package.json b/template/package.json index 13054a2710..f1736aa9af 100644 --- a/template/package.json +++ b/template/package.json @@ -16,31 +16,32 @@ }, "dependencies": { "axios": "^0.15.3", - "buefy": "^0.3.1", - "bulma": "^0.4.1", + "buefy": "^0.5.1", + "bulma": "^0.5.1", "font-awesome": "^4.7.0", "moment": "^2.18.1", - "vue": "^2.3.3", - "vue-router": "^2.3.1", - "vuex": "^2.2.1" + "vue": "^2.4.2", + {{#router}}"vue-router": "^2.7.0",{{/router}} + "vuex": "^2.4.0" }, "devDependencies": { - "autoprefixer": "^6.7.2", + "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^7.1.1", - "babel-loader": "^6.2.10", + "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", - "chalk": "^1.1.3", + "chalk": "^2.0.1", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", + "cssnano": "^3.10.0", "eslint": "^3.19.0", - "eslint-friendly-formatter": "^2.0.7", + "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", - "eslint-plugin-html": "^2.0.0", + "eslint-plugin-html": "^3.0.0", "eslint-config-standard": "^6.2.1", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", @@ -55,7 +56,7 @@ "http-proxy-middleware": "^0.17.3", "webpack-bundle-analyzer": "^2.2.1", {{#unit}} - "cross-env": "^4.0.0", + "cross-env": "^5.0.1", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", @@ -63,9 +64,8 @@ "karma-phantomjs-shim": "^1.4.0", "karma-sinon-chai": "^1.3.1", "karma-sourcemap-loader": "^0.3.7", - "karma-spec-reporter": "0.0.30", + "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.2", - "lolex": "^1.5.2", "mocha": "^3.2.0", "chai": "^3.5.0", "sinon": "^2.1.0", @@ -82,12 +82,12 @@ {{/e2e}} "semver": "^5.3.0", "shelljs": "^0.7.6", - "opn": "^4.0.2", - "optimize-css-assets-webpack-plugin": "^1.3.0", + "opn": "^5.1.0", + "optimize-css-assets-webpack-plugin": "^2.0.0", "ora": "^1.2.0", "rimraf": "^2.6.0", "url-loader": "^0.5.8", - "vue-loader": "^12.1.0", + "vue-loader": "^13.0.4", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.3.3", "webpack": "^2.6.1", diff --git a/template/src/App.vue b/template/src/App.vue index 97c2c84832..4dc17afed4 100644 --- a/template/src/App.vue +++ b/template/src/App.vue @@ -1,13 +1,24 @@ diff --git a/template/src/components/Component.vue b/template/src/components/Component.vue index aa6f625612..55848a1fd0 100644 --- a/template/src/components/Component.vue +++ b/template/src/components/Component.vue @@ -5,7 +5,7 @@