[4.0] Feature/compile es6 (joomla#19650)

* Improve eslint IDE support (ignore .js, lint *.es6.js)

* Adjust eslint rules: allow usage of dev dependencies in build directory

* Add babelrc

* Install glob and babel-core

* Add simple script to compile es6 to es5 using babel-core

* Disable module transformation

By default babel transforms to commonjs.

* CS

* Example-1: Copy old file and suffix it with .es6.js

* Example-2: Fix code style according to new style guide

* Example-3: Execute compiler

* Add do-not-modify message

* Change browser targets

* Use literals

* Use arrow function

* CS

* Update target browsers

* Allow „use-strict“

* Remove & Revert example

* Revert CS

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "last 1 version"
+          ]
+        }
+      }
+    ]
+  ]
+}

.eslintignore

@@ -1 +1,4 @@
 # A list of files to ignore from linting
+*.js
+!*.es6.js
+!build/**/*.js

.eslintrc

@@ -12,5 +12,12 @@
   // Additional global variables your script accesses during execution
   "globals": {
     "Joomla": true
+  },
+  // Rule overrides
+  "rules": {
+    // Allow usage of dev-dependencies in js files in build directory
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["build/**/*.js"]}],
+    // Allow strict mode (we are not dealing with modules)
+    "strict": [0]
   }
 }

build/build-modules-js/compile-es6.js

@@ -0,0 +1,36 @@
+const glob = require('glob');
+const fs = require('fs');
+const babel = require('babel-core');
+
+const pattern = './**/*.es6.js';
+const options = {
+  ignore: './node_modules/**',
+};
+
+/**
+ * Compiles es6 files to es5.
+ * @param filePath
+ */
+const compileFile = (filePath) => {
+  const headerText = `PLEASE DO NOT MODIFY THIS FILE. WORK ON THE ES6 VERSION.
+OTHERWISE YOUR CHANGES WILL BE REPLACED ON THE NEXT BUILD.`;
+  const babelOptions = {
+    plugins: [
+      ['add-header-comment', { header: [headerText] }],
+    ],
+  };
+
+  babel.transformFile(filePath, babelOptions, (error, result) => {
+    if (error) process.exit(1);
+    const fileName = filePath.slice(0, -7);
+    fs.writeFile(`${fileName}.js`, result.code, (fsError) => {
+      if (fsError) process.exit(1);
+    });
+  });
+};
+
+// Compile all files of the given pattern
+glob(pattern, options, (error, files) => {
+  if (error) process.exit(1);
+  files.forEach(compileFile);
+});

package.json

@@ -12,7 +12,7 @@
     "build:css": "node build --compilecss",
     "watch:js": "node build --compilejs --watch",
     "watch:css": "node build --compilecss --watch",
-    "lint:js": "node ./node_modules/eslint/bin/eslint.js --ext=.es6.js . || exit 0",
+    "lint:js": "node ./node_modules/eslint/bin/eslint.js . || exit 0",
     "test": "node node_modules/karma/bin/karma start karma.conf.js --single-run",
     "update": "node build --update"
   },
@@ -40,18 +40,21 @@
     "@webcomponents/custom-elements": "latest",
     "@webcomponents/webcomponentsjs": "latest",
     "autoprefixer": "^8.0.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.0",
-    "babel-minify": "latest",
+    "babel-minify": "^0.3.0",
+    "babel-plugin-add-header-comment": "^1.0.3",
     "babel-plugin-static-fs": "latest",
-    "babel-preset-env": "latest",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "babelify": "^8.0.0",
     "browserify": "*",
-    "eslint": "latest",
+    "eslint": "^4.17.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.8.0",
     "fs": "0.0.1-security",
     "fs-extra": "^5.0.0",
+    "glob": "^7.1.2",
     "ini": "latest",
     "jasmine-core": "latest",
     "jasmine-jquery": "latest",