Minor refactoring of build scripts (#1082)

* build: Replace regular function with the arrow one

* check-verstions: Add some line breaks to improve code readability

* utils: Minor refactoring

Replace 'var' with 'const' operator for 'postcssLoader' defenition;
Add some spaces to improve code readability;
Rename variable with package.json from 'pkg' to 'packageConfig';
Replace regular function stored in 'createNotifierCallback' with arrow.

* vue-loader: Remove extra line break and Add a helpful one

* base.conf: Add variable for linting rule to imprive code readability

* dev.conf: Update formatting

* prod.conf: Update formatting and Use ES6 short syntax for method

template/build/build.js

@@ -16,7 +16,7 @@ spinner.start()
 
 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
   if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
+  webpack(webpackConfig, (err, stats) => {
     spinner.stop()
     if (err) throw err
     process.stdout.write(stats.toString({

template/build/check-versions.js

@@ -3,6 +3,7 @@ const chalk = require('chalk')
 const semver = require('semver')
 const packageConfig = require('../package.json')
 const shell = require('shelljs')
+
 function exec (cmd) {
   return require('child_process').execSync(cmd).toString().trim()
 }
@@ -25,8 +26,10 @@ if (shell.which('npm')) {
 
 module.exports = function () {
   const warnings = []
+
   for (let i = 0; i < versionRequirements.length; i++) {
     const mod = versionRequirements[i]
+
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -39,10 +42,12 @@ module.exports = function () {
     console.log('')
     console.log(chalk.yellow('To use this template, you must update following to modules:'))
     console.log()
+
     for (let i = 0; i < warnings.length; i++) {
       const warning = warnings[i]
       console.log('  ' + warning)
     }
+
     console.log()
     process.exit(1)
   }

template/build/utils.js

@@ -2,12 +2,13 @@
 const path = require('path')
 const config = require('../config')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const pkg = require('../package.json')
+const packageConfig = require('../package.json')
 
 exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
     ? config.build.assetsSubDirectory
     : config.dev.assetsSubDirectory
+
   return path.posix.join(assetsSubDirectory, _path)
 }
 
@@ -21,7 +22,7 @@ exports.cssLoaders = function (options) {
     }
   }
 
-  var postcssLoader = {
+  const postcssLoader = {
     loader: 'postcss-loader',
     options: {
       sourceMap: options.sourceMap
@@ -31,6 +32,7 @@ exports.cssLoaders = function (options) {
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
     if (loader) {
       loaders.push({
         loader: loader + '-loader',
@@ -68,28 +70,29 @@ exports.cssLoaders = function (options) {
 exports.styleLoaders = function (options) {
   const output = []
   const loaders = exports.cssLoaders(options)
+
   for (const extension in loaders) {
     const loader = loaders[extension]
     output.push({
       test: new RegExp('\\.' + extension + '$'),
       use: loader
     })
   }
+
   return output
 }
 
-exports.createNotifierCallback = function () {
+exports.createNotifierCallback = () => {
   const notifier = require('node-notifier')
 
   return (severity, errors) => {
-    if (severity !== 'error') {
-      return
-    }
-    const error = errors[0]
+    if (severity !== 'error') return
 
+    const error = errors[0]
     const filename = error.file && error.file.split('!').pop()
+
     notifier.notify({
-      title: pkg.name,
+      title: packageConfig.name,
       message: severity + ': ' + error.name,
       subtitle: filename || '',
       icon: path.join(__dirname, 'logo.png')

template/build/vue-loader.conf.js

@@ -6,7 +6,6 @@ const sourceMapEnabled = isProduction
   ? config.build.productionSourceMap
   : config.dev.cssSourceMap
 
-
 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: sourceMapEnabled,

template/build/webpack.base.conf.js

@@ -8,6 +8,17 @@ function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
+const lintingRule = {
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+}
+
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
@@ -32,16 +43,7 @@ module.exports = {
   module: {
     rules: [
       {{#lint}}
-      ...(config.dev.useEslint? [{
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
-        options: {
-          formatter: require('eslint-friendly-formatter'),
-          emitWarning: !config.dev.showEslintErrorsInOverlay
-        }
-      }] : []),
+      ...(config.dev.useEslint ? [lintingRule] : []),
       {{/lint}}
       {
         test: /\.vue$/,

template/build/webpack.dev.conf.js

@@ -24,10 +24,9 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     host: process.env.HOST || config.dev.host,
     port: process.env.PORT || config.dev.port,
     open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay ? {
-      warnings: false,
-      errors: true,
-    } : false,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
     publicPath: config.dev.assetsPublicPath,
     proxy: config.dev.proxyTable,
     quiet: true, // necessary for FriendlyErrorsPlugin

template/build/webpack.prod.conf.js

@@ -55,8 +55,8 @@ const webpackConfig = merge(baseWebpackConfig, {
     // duplicated CSS from different components can be deduped.
     new OptimizeCSSPlugin({
       cssProcessorOptions: config.build.productionSourceMap
-      ? { safe: true, map: { inline: false } }
-      : { safe: true }
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
     }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
@@ -84,7 +84,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     // split vendor js into its own file
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
-      minChunks: function (module) {
+      minChunks (module) {
         // any required modules inside node_modules are extracted to vendor
         return (
           module.resource &&