geosolutions-it#4297: Add browserslist to modernize and reduce bundle…

… size (geosolutions-it#6621)
agpenton · Jul 8, 2021 · 64fbbb6 · 64fbbb6
1 parent 29365d6
commit 64fbbb6
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 37 deletions.
diff --git a/build/babel.config.js b/build/babel.config.js
@@ -14,6 +14,11 @@ module.exports = function(api) {
                     "preventFullImport": true
                 }
             }]
-        ]
+        ],
+        "env": {
+            "test": {
+                "plugins": ["istanbul"]
+            }
+        }
     };
 };
diff --git a/build/buildConfig.js b/build/buildConfig.js
@@ -98,9 +98,14 @@ module.exports = (bundles, themeEntries, paths, plugins = [], prod, publicPath,
                 }, {
                     loader: 'postcss-loader',
                     options: {
-                        plugins: [
-                            require('postcss-prefix-selector')({ prefix: cssPrefix || '.ms2', exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : []) })
-                        ]
+                        postcssOptions: {
+                            plugins: {
+                                "postcss-prefix-selector": {
+                                    prefix: cssPrefix || '.ms2',
+                                    exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : [])
+                                }
+                            }
+                        }
                     }
                 }]
             },
@@ -119,14 +124,21 @@ module.exports = (bundles, themeEntries, paths, plugins = [], prod, publicPath,
                 test: /themes[\\\/]?.+\.less$/,
                 use: [
                     MiniCssExtractPlugin.loader,
-                    'css-loader', {
+                    'css-loader',
+                    {
                         loader: 'postcss-loader',
                         options: {
-                            plugins: [
-                                require('postcss-prefix-selector')({ prefix: cssPrefix || '.ms2', exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : []) })
-                            ]
+                            postcssOptions: {
+                                plugins: {
+                                    "postcss-prefix-selector": {
+                                        prefix: cssPrefix || '.ms2',
+                                        exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : [])
+                                    }
+                                }
+                            }
                         }
-                    }, 'less-loader'
+                    },
+                    'less-loader'
                 ]
             },
             {

diff --git a/build/karma.conf.single-run.js b/build/karma.conf.single-run.js
@@ -1,6 +1,9 @@
 const path = require("path");
 
 module.exports = function karmaConfig(config) {
+
+    // set BABEL_ENV to load proper preset config (e.g. istanbul plugin)
+    process.env.BABEL_ENV = 'test';
     const testConfig = require('./testConfig')({
         files: [
             'build/tests-travis.webpack.js',
@@ -12,16 +15,5 @@ module.exports = function karmaConfig(config) {
         testFile: 'build/tests-travis.webpack.js',
         singleRun: true
     });
-    testConfig.webpack.module.rules = [{
-        test: /\.jsx?$/,
-        exclude: /(__tests__|node_modules|legacy|libs\\Cesium|libs\\html2canvas)\\|(__tests__|node_modules|legacy|libs\/Cesium|libs\/html2canvas)\/|webpack\.js|utils\/(openlayers|leaflet)/,
-        enforce: "post",
-        use: [
-            {
-                loader: 'istanbul-instrumenter-loader',
-                options: { esModules: true }
-            }
-        ]
-    }, ...testConfig.webpack.module.rules];
     config.set(testConfig);
 };
diff --git a/build/testConfig.js b/build/testConfig.js
@@ -31,7 +31,7 @@ module.exports = ({browsers = [ 'ChromeHeadless' ], files, path, testFile, singl
     ],
 
     preprocessors: {
-        [testFile]: [ 'webpack', 'coverage' ]
+        [testFile]: [ 'webpack' ]
     },
 
     reporters: [ 'mocha', 'coverage' ],

diff --git a/docs/developer-guide/building-and-deploying.md b/docs/developer-guide/building-and-deploying.md
@@ -58,7 +58,7 @@ The generated folders can be removed with:
 
 `npm run cleandoc`
 
-## Undestanding frontend building tools
+## Understanding frontend building tools
 
 Frontend building is delegated to [NPM](https://www.npmjs.com/) and so leverages the NodeJS ecosystem.
 

diff --git a/package.json b/package.json
@@ -1,5 +1,19 @@
 {
   "name": "mapstore2",
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all",
+      "not IE 11",
+      "not UCAndroid 12.12"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "version": "0.2.1",
   "description": "MapStore 2",
   "repository": "https://github.com/geosolutions-it/MapStore2",
@@ -34,15 +48,15 @@
     "@geosolutions/mocha": "6.2.1-3",
     "@mapstore/eslint-config-mapstore": "1.0.2",
     "axios-mock-adapter": "1.16.0",
-    "babel-istanbul-loader": "0.1.0",
     "babel-loader": "8.0.5",
     "babel-plugin-add-module-exports": "0.1.4",
+    "babel-plugin-istanbul": "6.0.0",
     "babel-plugin-object-assign": "1.2.1",
     "babel-plugin-react-transform": "2.0.2",
     "babel-plugin-transform-imports": "2.0.0",
     "cesium": "1.17.0",
     "copy-webpack-plugin": "5.0.2",
-    "css-loader": "0.19.0",
+    "css-loader": "5.1.2",
     "denodeify": "1.2.1",
     "docma": "1.5.1",
     "download-cli": "1.0.1",
@@ -69,16 +83,16 @@
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-sourcemap-loader": "0.3.8",
-    "karma-webpack": "^5.0.0-alpha.5",
+    "karma-webpack": "5.0.0",
     "less": "2.7.1",
-    "less-loader": "4.1.0",
-    "mini-css-extract-plugin": "0.5.0",
+    "less-loader": "8.0.0",
+    "mini-css-extract-plugin": "1.3.9",
     "mkdirp": "0.5.1",
     "ncp": "2.0.0",
     "parallelshell": "1.2.0",
     "postcss": "7.0.14",
-    "postcss-loader": "3.0.0",
-    "postcss-prefix-selector": "1.7.1",
+    "postcss-loader": "5.1.0",
+    "postcss-prefix-selector": "1.8.0",
     "process": "^0.11.10",
     "progress-bar-webpack-plugin": "1.12.1",
     "raw-loader": "0.5.1",
@@ -92,7 +106,7 @@
     "redux-mock-store": "1.2.2",
     "rimraf": "2.5.2",
     "simple-git": "2.20.1",
-    "style-loader": "0.12.4",
+    "style-loader": "2.0.0",
     "url-loader": "0.5.7",
     "vusion-webfonts-generator": "0.4.1",
     "webpack": "5.9.0",

diff --git a/project/custom/templates/webpack.config.js b/project/custom/templates/webpack.config.js
@@ -71,9 +71,14 @@ module.exports = (env) => {
                     }, {
                         loader: 'postcss-loader',
                         options: {
-                            plugins: [
-                                require('postcss-prefix-selector')({ prefix: cssPrefix || '.ms2', exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : []) })
-                            ]
+                            postcssOptions: {
+                                plugins: {
+                                    "postcss-prefix-selector": {
+                                        prefix: cssPrefix || '.ms2',
+                                        exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : [])
+                                    }
+                                }
+                            }
                         }
                     }]
                 },
@@ -92,12 +97,18 @@ module.exports = (env) => {
                     test: /themes[\\\/]?.+\.less$/,
                     use: [
                         MiniCssExtractPlugin.loader,
-                        'css-loader', {
+                        'css-loader',
+                        {
                             loader: 'postcss-loader',
                             options: {
-                                plugins: [
-                                    require('postcss-prefix-selector')({ prefix: cssPrefix || '.ms2', exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : []) })
-                                ]
+                                postcssOptions: {
+                                    plugins: {
+                                        "postcss-prefix-selector": {
+                                            prefix: cssPrefix || '.ms2',
+                                            exclude: ['.ms2', '[data-ms2-container]'].concat(cssPrefix ? [cssPrefix] : [])
+                                        }
+                                    }
+                                }
                             }
                         }, 'less-loader'
                     ]