[AdminBundle] Update frontend package dependencies (#2719)

* update fe packages * bumb node version / remove ie11 support * install gulp-cli on travis * add gulp-util dependency * update generator bundle to allow new node version and update default packages, remove unused ones * add webpack mode config | add js-next version option | fix build path * update * add bootstrap dep to generator * fix jslint issue | variable package name generator bundle Co-authored-by: kevin.five <kevin.five@:accenture.com>
Kunstmaan · Sep 23, 2020 · 8dda9e0 · 8dda9e0
1 parent 9eac4c5
commit 8dda9e0
Show file tree

Hide file tree

Showing 19 changed files with 14,406 additions and 7,414 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": [ "es2015" ]
-}
+    "presets": [ "@babel/preset-env" ]
+}
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v8.6
+v12
diff --git a/.travis.yml b/.travis.yml
@@ -105,5 +105,3 @@ jobs:
       php: 7.4
       env: PHPStan=true
       script: vendor/bin/phpstan analyse --no-progress
-
-
diff --git a/groundcontrol/admin-bundle.tasks.js b/groundcontrol/admin-bundle.tasks.js
@@ -2,15 +2,14 @@
 
 import gulp from 'gulp';
 import webpack from 'webpack';
+import path from 'path';
 
 import consoleArguments from './console-arguments';
 
 import createEslintTask from './tasks/eslint';
-import createStylelintTask from './tasks/stylelint';
 import createCopyTask from './tasks/copy';
 import {createCssLocalTask, createCssOptimizedTask} from './tasks/css';
 import createScriptsTask from './tasks/scripts';
-import createServerTask from './tasks/server';
 import createBundleTask, {getBabelLoaderOptions} from './tasks/bundle';
 
 export const adminBundle = {
@@ -23,17 +22,17 @@ export const adminBundle = {
 };
 
 adminBundle.tasks.eslint = createEslintTask({
-    src: adminBundle.config.srcPath + 'jsnext/**/*.js',
+    src: `${adminBundle.config.srcPath}jsnext/**/*.js`,
     failAfterError: !consoleArguments.continueAfterTestError
 });
 
 adminBundle.tasks.copy = gulp.parallel(
-    createCopyTask({src: [adminBundle.config.srcPath + 'img/**'], dest: adminBundle.config.distPath + 'img'})
+    createCopyTask({src: [`${adminBundle.config.srcPath}img/**`], dest: `${adminBundle.config.distPath}img`})
 );
 
-adminBundle.tasks.cssLocal = createCssLocalTask({src: adminBundle.config.srcPath + 'scss/*.scss', dest: adminBundle.config.distPath + 'css'});
+adminBundle.tasks.cssLocal = createCssLocalTask({src: `${adminBundle.config.srcPath}scss/*.scss`, dest: `${adminBundle.config.distPath}css`});
 
-adminBundle.tasks.cssOptimized = createCssOptimizedTask({src: adminBundle.config.srcPath + 'scss/*.scss', dest: adminBundle.config.distPath + 'css'});
+adminBundle.tasks.cssOptimized = createCssOptimizedTask({src: `${adminBundle.config.srcPath}scss/*.scss`, dest: `${adminBundle.config.distPath}css`});
 
 adminBundle.tasks.scripts = createScriptsTask({
     src: [
@@ -51,19 +50,21 @@ adminBundle.tasks.scripts = createScriptsTask({
         './node_modules/jquery.typewatch/jquery.typewatch.js',
         './node_modules/ckeditor/ckeditor.js',
         './node_modules/ckeditor/adapters/jquery.js',
-        adminBundle.config.srcPath + 'js/**/*.js'
+        `${adminBundle.config.srcPath}js/**/*.js`
     ],
-    dest: adminBundle.config.distPath + 'js',
+    dest: `${adminBundle.config.distPath}js`,
     filename: 'admin-bundle.min.js'
 });
 
 adminBundle.tasks.bundle = createBundleTask({
     config: {
-        entry: adminBundle.config.srcPath + 'jsnext/app.js',
+        entry: `${adminBundle.config.srcPath}jsnext/app.js`,
         output: {
-            filename: adminBundle.config.distPath + 'js/admin-bundle.next.js',
+            filename: 'admin-bundle.next.js',
+            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`)
         },
         devtool: 'cheap-module-source-map',
+        mode: 'development',
         module: {
             rules: [
                 {
@@ -81,11 +82,17 @@ adminBundle.tasks.bundle = createBundleTask({
 
 adminBundle.tasks.bundleOptimized = createBundleTask({
     config: {
-        entry: adminBundle.config.srcPath + 'jsnext/app.js',
+        entry: `${adminBundle.config.srcPath}jsnext/app.js`,
         output: {
-            filename: adminBundle.config.distPath + 'js/admin-bundle.next.js',
+            filename: 'admin-bundle.next.js',
+            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`)
+
         },
         devtool: 'source-map',
+        optimization: {
+            minimize: true
+        },
+        mode: 'production',
         module: {
             rules: [
                 {
@@ -97,27 +104,23 @@ adminBundle.tasks.bundleOptimized = createBundleTask({
                     })
                 }
             ]
-        },
-        plugins: [
-            new webpack.optimize.UglifyJsPlugin({
-                mangle: true,
-                sourceMap: true,
-                output: {
-                    comments: false
-                }
-            })
-        ]
+        }
     },
     logStats: true
 });
 
 adminBundle.tasks.bundlePolyfills = createBundleTask({
     config: {
-        entry: ['babel-polyfill', adminBundle.config.srcPath + 'jsnext/polyfills.js'],
+        entry: ['babel-polyfill', `${adminBundle.config.srcPath}jsnext/polyfills.js`],
         output: {
-            filename: adminBundle.config.distPath + 'js/admin-bundle-polyfills.js',
+            filename: 'admin-bundle-polyfills.js',
+            path: path.resolve(__dirname, `.${adminBundle.config.distPath}js`)
         },
         devtool: 'source-map',
+        optimization: {
+            minimize: true
+        },
+        mode: 'production',
         module: {
             rules: [
                 {
@@ -129,16 +132,7 @@ adminBundle.tasks.bundlePolyfills = createBundleTask({
                     })
                 }
             ]
-        },
-        plugins: [
-            new webpack.optimize.UglifyJsPlugin({
-                mangle: true,
-                sourceMap: true,
-                output: {
-                    comments: false
-                }
-            })
-        ]
+        }
     },
     logStats: true
 });
diff --git a/groundcontrol/tasks/bundle.js b/groundcontrol/tasks/bundle.js
@@ -1,5 +1,4 @@
 import webpack from 'webpack';
-
 /**
  * You can let webpack watch the files and rebundle on change, or you can do it
  * via gulp. Gulp will probably be easier at first, since you have to configure
@@ -14,7 +13,7 @@ export default function createBundleTask({config = undefined, watch = false, log
         } else {
             compiler.run(handleWebpackResult);
         }
-        
+
         function handleWebpackResult(err, stats) {
             if (err) {
                 console.error(err.stack || err);
@@ -47,8 +46,9 @@ export function getBabelLoaderOptions({optimize = false, transpileOnlyForLastChr
         return {
             babelrc: false,
             presets: [
-                ['es2015', {
-                    // TODO
+                ['@babel/preset-env', {
+                    useBuiltIns: 'usage',
+                    corejs: 3.6,
                     modules: false
                 }]
             ]
@@ -58,9 +58,14 @@ export function getBabelLoaderOptions({optimize = false, transpileOnlyForLastChr
     return {
         babelrc: false,
         presets: [
-            ['env', {
+            ['@babel/preset-env', {
+                useBuiltIns: 'usage',
+                corejs: 3.6,
                 targets: {
-                    browsers: ['last 2 Chrome versions']
+                    browsers: [
+                        '>0.25%',
+                        'not op_mini all'
+                    ]
                 }
             }]
         ],

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -1,17 +1,17 @@
 /* eslint-env node */
 
 import gulp from 'gulp';
-import { adminBundle } from './groundcontrol/admin-bundle.tasks';
-import { dashboardBundle } from './groundcontrol/dashboard-bundle.tasks';
-import { mediaBundle } from './groundcontrol/media-bundle.tasks';
-import { translatorBundle } from './groundcontrol/translator-bundle.tasks';
-import startLocalTask, { buildOnChange } from './groundcontrol/start-local.task';
+import {adminBundle} from './groundcontrol/admin-bundle.tasks';
+import {dashboardBundle} from './groundcontrol/dashboard-bundle.tasks';
+import {mediaBundle} from './groundcontrol/media-bundle.tasks';
+import {translatorBundle} from './groundcontrol/translator-bundle.tasks';
+import startLocalTask, {buildOnChange} from './groundcontrol/start-local.task';
 import createBuildGroundControlSkeletonTask from './groundcontrol/tasks/build-gc-skeleton';
 
 
 // AdminBundle Tasks
 const analyzeAdminBundle = gulp.series(
-    adminBundle.tasks.eslint,
+    adminBundle.tasks.eslint
 );
 
 const buildLocalAdminBundle = gulp.series(
@@ -102,4 +102,4 @@ const startLocal = gulp.series(
 const buildGroundControlSkeleton = gulp.series(createBuildGroundControlSkeletonTask('./src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/layout/groundcontrol'));
 
 // Export public tasks
-export { test, buildOptimized, testAndBuildOptimized, startLocal, buildGroundControlSkeleton };
+export {test, buildOptimized, testAndBuildOptimized, startLocal, buildGroundControlSkeleton};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -105,5 +105,3 @@ jobs:
		php: 7.4
		env: PHPStan=true
		script: vendor/bin/phpstan analyse --no-progress