chore: Update test environment (#66)

* Adapt webpack config for build to the updated environment

* Adapts webpack.dev config with the updated environment

* Adapt webpack for "docs" build

* clean up not necessaries dependencies and scripts

* Updates dependencies + use jest for test

Author: NansPellicari

.babelrc

@@ -1,14 +1,10 @@
 {
-  "presets": [
-    ["env", { "modules": false }],
-    "stage-2"
-  ],
-  "plugins": ["transform-runtime", "transform-es2015-modules-commonjs"],
-  "comments": false,
+  "presets": ["@babel/preset-env"],
   "env": {
     "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": [ "istanbul" ]
+      "presets": [
+        ["@babel/preset-env", { "targets": { "node": "current" }}]
+      ]
     }
   }
 }

.eslintrc.js

@@ -2,15 +2,15 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module'
   },
   env: {
     browser: true,
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
+  extends: ['eslint:recommended', "plugin:vue/essential"],
   // required to lint *.vue files
   plugins: [
     'html'
@@ -21,7 +21,20 @@ module.exports = {
     'arrow-parens': 0,
     // allow async-await
     'generator-star-spacing': 0,
+    // no semicolon
+    'semi': 0,
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-  }
+  },
+  "overrides": [{
+    "files": [
+        "**/*.spec.js",
+        "**/*.spec.jsx",
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/test/unit/**/*.spec.{j,t}s?(x)"
+    ],
+    "env": {
+      "jest": true
+    }
+  }]
 }

.jshintrc

@@ -0,0 +1,3 @@
+{
+  "esversion": 8
+}

.travis.yml

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - "6"
+  - "12.16"

build/build.js

@@ -27,9 +27,5 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
     }) + '\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'
-    ))
   })
 })

build/utils.js

@@ -15,7 +15,6 @@ exports.cssLoaders = function (options) {
   var cssLoader = {
     loader: 'css-loader',
     options: {
-      minimize: process.env.NODE_ENV === 'production',
       sourceMap: options.sourceMap
     }
   }

build/webpack.base.conf.js

@@ -2,6 +2,7 @@ var path = require('path')
 var utils = require('./utils')
 var config = require('../config')
 var vueLoaderConfig = require('./vue-loader.conf')
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -62,5 +63,8 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ]
 }

build/webpack.dev.conf.js

@@ -12,6 +12,7 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 })
 
 module.exports = merge(baseWebpackConfig, {
+  mode: 'development',
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
   },

build/webpack.prod.conf.js

@@ -8,19 +8,42 @@ var CopyWebpackPlugin = require('copy-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
 
 var env = process.env.NODE_ENV === 'testing'
   ? require('../config/test.env')
   : config.build.env
 
 var webpackConfig = merge(baseWebpackConfig, {
+  mode: "production",
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        sourceMap: true,
+        uglifyOptions: {
+          warnings: false
+        }
+      })
+    ],
+    splitChunks: {
+      name: false,
+      cacheGroups: {
+        vendor: {
+          chunks: "initial",
+          test: path.resolve(__dirname, "../node_modules"),
+          name: "vendor",
+          enforce: true
+        }
+      }
+    }
+  },
   module: {
     rules: utils.styleLoaders({
       sourceMap: config.build.productionSourceMap,
       extract: true
     })
   },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  devtool: config.build.productionSourceMap ? 'source-map' : false,
   output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
@@ -31,15 +54,9 @@ var webpackConfig = merge(baseWebpackConfig, {
     new webpack.DefinePlugin({
       'process.env': env
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      sourceMap: true
-    }),
     // extract css into its own file
     new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
+      filename: utils.assetsPath('css/[name].[hash].css')
     }),
     // Compress extracted CSS. We are using this plugin so that possible
     // duplicated CSS from different components can be deduped.
@@ -63,26 +80,6 @@ var webpackConfig = merge(baseWebpackConfig, {
       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
       chunksSortMode: 'dependency'
     }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    }),
     // copy custom static assets
     new CopyWebpackPlugin([
       {

build/webpack.release.js

@@ -4,7 +4,10 @@ const path = require('path');
 const webpack = require('webpack');
 const npmCfg = require('../package.json');
 const projectRoot = path.resolve(__dirname, '../');
-var vueLoaderConfig = require('./vue-loader.conf')
+var vueLoaderConfig = require('./vue-loader.conf');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+var utils = require('./utils');
+var config = require('../config')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -17,6 +20,10 @@ var banner = [
 ].join('\n')
 
 module.exports = {
+    mode: "production",
+    optimization: {
+      minimize: false,
+    },
     entry: './src/components/CookieLaw.vue',
     output: {
         path: path.resolve(__dirname, '../dist'),
@@ -41,17 +48,21 @@ module.exports = {
             loader: 'babel-loader',
             options: {
               presets: [
-                ['es2015', { modules: false }]
+                ['@babel/preset-env', { modules: false }]
               ],
-              'plugins': ['transform-runtime', 'transform-es2015-modules-commonjs'],
             }
           }],
           include: [resolve('src'), resolve('test')]
+        },
+        {
+          test: /\.scss$/,
+          use: [require.resolve('vue-style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')],
         }
       ]
     },
 
     plugins: [
-        new webpack.BannerPlugin(banner)
+        new webpack.BannerPlugin(banner),
+        new VueLoaderPlugin()
     ]
 }

build/webpack.release.min.js

@@ -5,14 +5,6 @@ config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
 
 delete config.devtool
 
-config.plugins = [
-  new webpack.optimize.UglifyJsPlugin({
-    sourceMap: false,
-    compress: {
-      warnings: false
-    }
-  }),
-  new webpack.optimize.OccurenceOrderPlugin()
-]
+config.optimization.minimize = true
 
 module.exports = config

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../docs/index.html'),
     assetsRoot: path.resolve(__dirname, '../docs'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: '',
     productionSourceMap: false,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

config/rollup-plugin-vue.config.js

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>vue-cookie-law</title><link href=static/css/app.2ec6e1d8d318f43886803c2d71ae454f.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/manifest.741921c978d2c38ec9c9.js></script><script type=text/javascript src=static/js/vendor.281da864b3eb29cff916.js></script><script type=text/javascript src=static/js/app.57a154c8adaa56de266d.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><title>vue-cookie-law</title><link href=static/css/app.38cda54e5f033778fc20.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/1.009fefe989afe4a788ac.js></script><script type=text/javascript src=static/js/app.0db0c7860a093918af1a.js></script></body></html>