Transpile ES6 code through Babel in Webpack 4

grunt/tasks/_browserify-bundles.js

@@ -20,6 +20,12 @@ module.exports = {
     ],
     dest: '<%= tmp %>/src-specs.js',
     options: {
+      transform: [
+        ['babelify', {
+          presets: ['env'],
+          plugins: ['transform-object-rest-spread']
+        }]
+      ],
       require: [ 'camshaft-reference/versions/0.59.4/reference.json:./versions/0.59.4/reference.json' ]
     }
   },

grunt/tasks/browserify.js

@@ -20,6 +20,7 @@ module.exports = {
       if (opts) {
         if (opts.external) cfg[name].options.external = opts.external;
         if (opts.require) cfg[name].options.require = opts.require;
+        if (opts.transform) cfg[name].options.transform = opts.transform;
 
         var bOpts = bundle.options.browserifyOptions;
         if (bOpts) {

package.json

@@ -25,7 +25,8 @@
     "Ruben Moya <[email protected]>",
     "Jesus Arroyo Torrens <[email protected]>",
     "Iago Lastra <[email protected]>",
-    "Elena Torró <[email protected]>"
+    "Elena Torró <[email protected]>",
+    "Jesús Botella <[email protected]>"
   ],
   "private": true,
   "license": "BSD-3-Clause",
@@ -50,8 +51,12 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "~6.24.1",
-    "babelify": "~7.3.0",
+    "babelify": "^7.3.0",
     "browserify": "13.0.0",
     "carto-devlog": "^1.0.4",
     "cartoassets": "CartoDB/CartoAssets#master",
@@ -98,7 +103,8 @@
     "time-grunt": "~0.3.1",
     "uglifyjs-webpack-plugin": "^1.1.2",
     "watchify": "3.4.0",
-    "webpack": "^3.8.1"
+    "webpack": "^4.12.1",
+    "webpack-cli": "^3.0.8"
   },
   "browserify": {
     "transform": [
@@ -149,8 +155,8 @@
     "test:browser": "grunt dev",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "build": "rm -rf dist/public; webpack --config webpack/webpack.config.js && webpack --config webpack/webpack.min.config.js",
-    "build:watch": "webpack -w --config webpack/webpack.config.js",
+    "build": "rm -rf dist/public; webpack --progress --config webpack/webpack.config.js && webpack --config webpack/webpack.min.config.js",
+    "build:watch": "webpack -w --progress --config webpack/webpack.config.js",
     "build:internal": "grunt build",
     "docs": "rm -rf docs/public; jsdoc --configure config/jsdoc/public-conf.json",
     "docs:internal": "rm -rf docs/internal; jsdoc --configure config/jsdoc/internal-conf.json",

test/spec/core/util.spec.js

@@ -49,7 +49,11 @@ describe('core/util', function () {
     });
 
     it('should support it if msMaxTouchPoints has more than one', function () {
-      delete window.ontouchstart;
+      Object.defineProperty(window, 'ontouchstart', {
+        value: undefined,
+        writable: true
+      });
+
       navigator.msMaxTouchPoints = 2;
       expect(util.supportsTouch()).toBeTruthy();
     });

webpack/webpack.config.js

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const banner = require('./banner');
 
 module.exports = {
+  mode: 'production',
   entry: './src/api/v4/index.js',
   output: {
     path: path.resolve(__dirname, '../dist/public'),
@@ -11,9 +12,26 @@ module.exports = {
     libraryTarget: 'umd'
   },
   devtool: 'sourcemap',
+  module: {
+    rules: [{
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: [
+        path.resolve(__dirname, '../node_modules'),
+        path.resolve(__dirname, '../vendor')
+      ],
+      options: {
+        presets: ['env'],
+        plugins: ['transform-object-rest-spread']
+      }
+    }]
+  },
   plugins: [
     // Include only the lastest camshaft-reference
     new webpack.IgnorePlugin(/^\.\/((?!0\.59\.4).)*\/reference\.json$/),
     new webpack.BannerPlugin(banner)
-  ]
+  ],
+  optimization: {
+    minimize: false
+  }
 };

webpack/webpack.min.config.js

@@ -4,17 +4,39 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const banner = require('./banner');
 
 module.exports = {
+  mode: 'production',
   entry: './src/api/v4/index.js',
   output: {
     path: path.resolve(__dirname, '../dist/public'),
     filename: 'carto.min.js',
     library: 'carto',
     libraryTarget: 'umd'
   },
+  module: {
+    rules: [{
+      test: /\.js$/,
+      loader: 'babel-loader',
+      exclude: [
+        path.resolve(__dirname, '../node_modules'),
+        path.resolve(__dirname, '../vendor')
+      ],
+      options: {
+        presets: ['env'],
+        plugins: ['transform-object-rest-spread']
+      }
+    }]
+  },
   plugins: [
     // Include only the lastest camshaft-reference
     new webpack.IgnorePlugin(/^\.\/((?!0\.59\.4).)*\/reference\.json$/),
-    new UglifyJsPlugin(),
     new webpack.BannerPlugin(banner)
-  ]
+  ],
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: false,
+        parallel: true
+      })
+    ]
+  }
 };