understanding-graphs/tasks/scripts.js

import config from '../config';
import path from 'path';
import { rollup } from 'rollup';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import json from '@rollup/plugin-json';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import browsersync from 'browser-sync';

const target = config.currentTarget;
const mode = config.currentMode;

/**
 * d3 has circurlar dependencies, declared as "won't fix"
 * because these are, according to mbostock, compliant with es6 specification:
 * https://github.com/d3/d3-selection/issues/168
 * This function silences the corresponding rollup console error/warning output
 */
const printWarning = (message) => {
  if (message.code === 'CIRCULAR_DEPENDENCY') {
    return;
  }
  console.error(message);
};

/**
 * Generates rollup build configurations
 * based on target (development / production) and mode (online / offline)
 *
 * @param cTarget: Build target
 * @param cMode: Build mode
 * @return: Rollup configuration object
 */
const rollupConfig = (cTarget, cMode) => {

  const targetInfix = `${config.targets[cTarget].delimiter}${config.targets[cTarget].infix}`;
  const modeInfix = `${config.modes[cMode].delimiter}${config.modes[cMode].infix}`;

  let rconf = {
    source: {
      onwarn: printWarning,
      input: path.join(
        config.paths.src,
        config.paths.js,
        `${config.fileNames.jsx}${modeInfix}.jsx`
      ),
      plugins: [
        json(),
        resolve(),
        commonjs(),
        babel({ babelHelpers: 'bundled' })
      ]
    },
    destination: {
      output: {
        file: path.join(
          config.paths.dest,
          config.paths.assets,
          config.paths.js,
          `${config.fileNames.js}${modeInfix}${targetInfix}.js`
        ),
        format: 'iife'
      },
      sourceMap: cTarget === 'development' ? 'inline' : false
    }
  };

  if (cTarget === 'production') {
    rconf.source.plugins.push(terser());
  }
  return rconf;
};

/**
 * Transpile javascript with configuration specific for target and mode
 * based on configuration
 *
 * @param cb: callback handler passed by gulp, signals task completion when called
 */
const scripts = (cb) => {

  let rConf = rollupConfig(target, mode);

  rollup(rConf.source)
    .then((bundle) => {
      bundle.write(rConf.destination);
    }).then(() => {
      process.stdout.write(`[${rConf.destination.output.file}]\n`);
    }).then(() => {
      cb();
      if (target === 'development') {
        browsersync.reload();
      }
    });
};

export {
  scripts
};