Upgrade build tools to latest versions (#1350)

* Babel 7 upgrade

* Fix lint error

* fix lint error

* Upgrade to Webpack 4

* Fix tests after Webpack and karma upgrade

* Fix tests failing in production mode

* import local

* Fix failing IE tests

* Fix lint errors

* Add babel polyfill to tests

* Add babel ployfill to dependencies

* corejs dependency

* Adress PR comments

* Fix Data.Selectors to export correct module name

* remove package.json

* Commit package0lock.json

.gitignore

@@ -10,4 +10,3 @@ npm-debug.log
 lerna-debug.log
 **.orig
 .vscode
-package-lock.json

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    ['@babel/env', {
+      useBuiltIns: 'entry'}],
+    '@babel/react'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-property-literals',
+    '@babel/plugin-transform-member-expression-literals',
+    '@babel/plugin-transform-runtime'
+  ]
+};

browserslist

@@ -0,0 +1,6 @@
+ie 11
+last 2 chrome versions
+last 2 edge versions
+last 2 firefox versions
+last 2 safari versions
+Firefox ESR

config/karma.dev.js

@@ -36,7 +36,7 @@ if (argv.file) {
 const webpackCfg = Object.keys(defaultWebpack).reduce((res, key) => {
   let value = defaultWebpack[key];
   if (key === 'module') {
-    value = Object.assign({}, value, { postLoaders: null});
+    value = Object.assign({}, value);
   } else if (key === 'plugins') {
     value = [...value, new webpack.SourceMapDevToolPlugin({
       filename: null,
@@ -47,6 +47,7 @@ const webpackCfg = Object.keys(defaultWebpack).reduce((res, key) => {
   return res;
 }, {});
 webpackCfg.devtool = argv.file ? 'inline-source-map' : undefined;
+webpackCfg.mode = 'development';
 
 module.exports = function(config) {
   config.set({

config/karma.js

@@ -4,7 +4,6 @@
 var webpack = require('webpack');
 require('airbnb-browser-shims');
 var webpackConfig = require('./webpack.common.config.js');
-var RewirePlugin = require("rewire-webpack");
 var path = require('path');
 var argv = require('minimist')(process.argv.slice(2));
 var RELEASE = !!argv.release;
@@ -80,19 +79,32 @@ module.exports = function (config) {
     preprocessors: getPreprocessors(),
 
     webpack: {
+      mode: RELEASE ? 'production' : 'development',
       devtool: 'inline-source-map',
       module: {
-        loaders: webpackConfig.module.loaders
+        rules: [
+          {
+            test: /\.(js|jsx)$/,
+            exclude: /node_modules/,
+            use: [
+              { loader: 'babel-loader', options: { envName: 'test' } }
+            ]
+          },
+          {
+            test: /\.css$/,
+            use: [
+              { loader: 'style-loader' },
+              { loader: 'css-loader' }
+            ]
+          }
+        ]
       },
       resolve: {
-        extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx'],
+        extensions: ['.webpack.js', '.web.js', '.js', '.jsx'],
         alias: {
           common: path.resolve('packages/common/')
         }
       },
-      plugins: [
-        new RewirePlugin()
-      ],
       externals: {
         'cheerio': 'window',
         'react/lib/ExecutionEnvironment': true,
@@ -152,7 +164,6 @@ module.exports = function (config) {
     plugins: [
       'karma-chrome-launcher',
       'karma-firefox-launcher',
-      'karma-phantomjs-launcher-nonet',
       'karma-ie-launcher',
       'karma-jasmine',
       'karma-jasmine-matchers',

config/webpack.common.config.js

@@ -1,28 +1,9 @@
-const webpack = require('webpack');
+const path = require('path');
 const argv = require('minimist')(process.argv.slice(2));
 const RELEASE = argv.release;
-const path = require('path');
-
-function getPlugins() {
-  const nodeEnv = RELEASE ? '"production"' : '"development"';
-  var pluginsBase =  [
-    new webpack.DefinePlugin({'process.env.NODE_ENV': nodeEnv, 'global': 'window'})
-  ];
-
-  if (RELEASE) {
-    pluginsBase.push(new webpack.optimize.DedupePlugin());
-    pluginsBase.push(new webpack.optimize.OccurenceOrderPlugin());
-    pluginsBase.push(new webpack.optimize.AggressiveMergingPlugin());
-    pluginsBase.push(new webpack.optimize.UglifyJsPlugin({
-      include: /\.min\.js$/,
-      compress: { warnings: false }
-    }));
-  }
-  return pluginsBase;
-}
 
 const config = {
-  debug: !RELEASE,
+  mode: RELEASE ? 'production' : 'development',
   externals: {
     react: {
       root: 'React',
@@ -45,23 +26,26 @@ const config = {
     }
   },
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
-      { test: /\.css$/, loader: 'style-loader!css-loader' }
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      },
+      {
+        test: /\.css$/,
+        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' }
+        ]
+      }
     ]
   },
-  plugins: getPlugins(),
   resolve: {
     alias: {
       common: path.resolve('packages/common/')
     }
-  },
-  postLoaders: [
-    {
-      test: /\.js$/,
-      exclude: /node_modules|testData/,
-      loader: 'jshint'
-    }]
+  }
 };
 
 

config/webpack.config.prod.js

@@ -1,15 +1,16 @@
 const webpackCommon = require('./webpack.common.config');
+const path = require('path');
 
 const config =  {
   entry: {
-    'react-data-grid/dist/react-data-grid': ['./packages/react-data-grid/src'],
-    'react-data-grid-addons/dist/react-data-grid-addons': ['./packages/react-data-grid-addons/src'],
-    'react-data-grid/dist/react-data-grid.min': ['./packages/react-data-grid/src'],
-    'react-data-grid-addons/dist/react-data-grid-addons.min': ['./packages/react-data-grid-addons/src'],
-    'react-data-grid-examples/dist/index': './packages/react-data-grid-examples/src'
+    'react-data-grid/dist/react-data-grid': [path.resolve('packages/react-data-grid/src')],
+    'react-data-grid-addons/dist/react-data-grid-addons': [path.resolve('packages/react-data-grid-addons/src')],
+    'react-data-grid/dist/react-data-grid.min': [path.resolve('packages/react-data-grid/src')],
+    'react-data-grid-addons/dist/react-data-grid-addons.min': [path.resolve('packages/react-data-grid-addons/src')],
+    'react-data-grid-examples/dist/index': [path.resolve('packages/react-data-grid-examples/src')]
   },
   output: {
-    path: './packages',
+    path: path.resolve('packages'),
     filename: '[name].js',
     library: ['ReactDataGrid'],
     libraryTarget: 'umd'