Issue #2868137 by drpal, alexpott, dawehner, droplet: Improve JavaScript build tooling

core/package.json

@@ -5,13 +5,14 @@
   "private": true,
   "scripts": {
     "build:js": "node ./scripts/js/babel-es6-build.js",
-    "watch:js": "node ./scripts/js/babel-es6-watch.js",
+    "watch:js": "cross-env NODE_ENV=development node ./scripts/js/babel-es6-watch.js",
     "lint:core-js": "node ./node_modules/eslint/bin/eslint.js --ext=.es6.js . --fix || exit 0"
   },
   "devDependencies": {
     "babel-core": "6.24.1",
-    "babel-preset-es2015": "6.16.0",
+    "babel-preset-env": "1.4.0",
     "chokidar": "1.6.1",
+    "cross-env": "^4.0.0",
     "eslint": "3.19.0",
     "eslint-config-airbnb": "14.1.0",
     "eslint-plugin-import": "2.2.0",
@@ -21,7 +22,22 @@
   },
   "babel": {
     "presets": [
-      "es2015"
+      [
+        "env",
+        {
+          "modules": false,
+          "targets": {
+            "browsers": [
+              "ie >= 9",
+              "edge >= 13",
+              "firefox >= 5",
+              "opera >= 12",
+              "safari >= 5",
+              "chrome >= 56"
+            ]
+          }
+        }
+      ]
     ]
   }
 }

core/scripts/js/babel-es6-build.js

@@ -11,44 +11,32 @@
 
 const fs = require('fs');
 const path = require('path');
-const babel = require('babel-core');
 const glob = require('glob');
 
-// Logging human-readable timestamp.
-const log = function (message) {
-  // eslint-disable-next-line no-console
-  console.log(`[${new Date().toTimeString().slice(0, 8)}] ${message}`);
-};
-
-function addSourceMappingUrl(code, loc) {
-  return code + '\n\n//# sourceMappingURL=' + path.basename(loc);
-}
-
-const changedOrAdded = (filePath) => {
-  babel.transformFile(filePath, {
-    sourceMaps: true,
-    comments: false
-  }, function (err, result) {
-    const fileName = filePath.slice(0, -7);
-    // we've requested for a sourcemap to be written to disk
-    let mapLoc = `${fileName}.js.map`;
-
-    fs.writeFile(mapLoc, JSON.stringify(result.map));
-    fs.writeFile(`${fileName}.js`, addSourceMappingUrl(result.code, mapLoc));
-
-    log(`'${filePath}' is being processed.`);
-  });
-};
+const changeOrAdded = require('./changeOrAdded');
+const log = require('./log');
 
+// Match only on .es6.js files.
 const fileMatch = './**/*.es6.js';
+// Ignore everything in node_modules
 const globOptions = {
-  ignore: 'node_modules/**'
+  ignore: './node_modules/**'
 };
 const processFiles = (error, filePaths) => {
   if (error) {
     process.exitCode = 1;
   }
-  filePaths.forEach(changedOrAdded);
+  // Process all the found files.
+  filePaths.forEach(changeOrAdded);
 };
-glob(fileMatch, globOptions, processFiles);
+
+// Run build:js with some special arguments to only parse specific files.
+// npm run build:js -- --files misc/drupal.es6.js misc/drupal.init.es6.js
+// Only misc/drupal.es6.js misc/drupal.init.es6.js will be processed.
+if (process.argv.length > 2 && process.argv[2] === '--files') {
+  processFiles(null, process.argv.splice(3, process.argv.length));
+}
+else {
+  glob(fileMatch, globOptions, processFiles);
+}
 process.exitCode = 0;

core/scripts/js/babel-es6-watch.js

@@ -11,50 +11,29 @@
 
 const fs = require('fs');
 const path = require('path');
-const babel = require('babel-core');
 const chokidar = require('chokidar');
 
-// Logging human-readable timestamp.
-const log = function log(message) {
-  // eslint-disable-next-line no-console
-  console.log(`[${new Date().toTimeString().slice(0, 8)}] ${message}`);
-};
-
-function addSourceMappingUrl(code, loc) {
-  return `${code}\n\n//# sourceMappingURL=${path.basename(loc)}`;
-}
+const changeOrAdded = require('./changeOrAdded');
+const log = require('./log');
 
+// Match only on .es6.js files.
 const fileMatch = './**/*.es6.js';
+// Ignore everything in node_modules
 const watcher = chokidar.watch(fileMatch, {
   ignoreInitial: true,
-  ignored: 'node_modules/**'
+  ignored: './node_modules/**'
 });
 
-const changedOrAdded = (filePath) => {
-  babel.transformFile(filePath, {
-    sourceMaps: true,
-    comments: false
-  }, (err, result) => {
-    const fileName = filePath.slice(0, -7);
-    // we've requested for a sourcemap to be written to disk
-    const mapLoc = `${fileName}.js.map`;
-
-    fs.writeFileSync(mapLoc, JSON.stringify(result.map));
-    fs.writeFileSync(`${fileName}.js`, addSourceMappingUrl(result.code, mapLoc));
-
-    log(`'${filePath}' has been changed.`);
-  });
-};
-
 const unlinkHandler = (err) => {
   if (err) {
     log(err);
   }
 };
 
+// Watch for filesystem changes.
 watcher
-  .on('add', filePath => changedOrAdded(filePath))
-  .on('change', filePath => changedOrAdded(filePath))
+  .on('add', changeOrAdded)
+  .on('change', changeOrAdded)
   .on('unlink', (filePath) => {
     const fileName = filePath.slice(0, -7);
     fs.stat(`${fileName}.js`, () => {

core/scripts/js/changeOrAdded.js

+const fs = require('fs');
+const babel = require('babel-core');
+
+const log = require('./log');
+
+module.exports = (filePath) => {
+  const moduleName = filePath.slice(0, -7);
+  log(`'${filePath}' is being processed.`);
+  // Transform the file.
+  // Check process.env.NODE_ENV to see if we should create sourcemaps.
+  babel.transformFile(
+    filePath,
+    {
+      sourceMaps: process.env.NODE_ENV === 'development' ? 'inline' : false,
+      comments: false
+    },
+    (err, result) => {
+      if (err) {
+        throw new Error(err);
+      }
+      const fileName = filePath.slice(0, -7);
+      // Write the result to the filesystem.
+      fs.writeFile(`${fileName}.js`, result.code, () => {
+        log(`'${filePath}' is finished.`);
+      });
+    }
+  );
+}

core/scripts/js/log.js

+module.exports = (message) => {
+  // Logging human-readable timestamp.
+  console.log(`[${new Date().toTimeString().slice(0, 8)}] ${message}`);
+}