rollup

rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import replace from '@rollup/plugin-replace';
import url from '@rollup/plugin-url';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';

import buildPathsHelpers from './tasks/buildPathsHelpers';

const mode = process.env.NODE_ENV;
const isProduction = mode === 'production';

export default (async () => {
  return {
    input: buildPathsHelpers.src('index.js'),
    output: {
      dir: buildPathsHelpers.out(),
      entryFileNames: isProduction ? '[name].[hash].js' : '[name].js',
      chunkFileNames: '[name].[hash].js',
      assetFileNames: '[name].[hash][extname]',
      format: 'iife',
      freeze: false
    },
    plugins: [
      replace({
        'process.env.NODE_ENV': JSON.stringify(mode || 'development')
      }),
      resolve({
        mainFields: ['module', 'jsnext:main', 'main'],
        browser: true
      }),
      commonjs({
        include: 'node_modules/**'
      }),
      babel({
        exclude: 'node_modules/**', // only transpile our source code
        runtimeHelpers: true
      }),
      postcss({
        use: ['sass'],
        extract: true,
        minimize: isProduction
          ? {
              preset: 'default'
            }
          : false
      }),
      url({ limit: 10 * 1024, fileName: '[name].[hash][extname]' }),
      isProduction &&
        (await import('rollup-plugin-terser')).terser({
          sourcemap: false,
          output: { comments: false },
          compress: {
            passes: 5
          }
        }),
      isProduction &&
        (await import('rollup-plugin-output-manifest')).default({
          fileName: 'manifest.json'
        }),
      filesize()
    ].filter(Boolean)
  };
})();

task.js

import plugin from '@start/plugin';
import { bold, green } from 'kleur';

export default ({ useWatchMode = false } = {}) =>
  plugin('rollup', ({ logMessage }) => async () => {
    const { rollup, watch } = await import('rollup');
    const { default: rollupConfig } = await import('../rollup.config');
    const config = await rollupConfig;

    const bundle = await rollup(config);

    const { output: outputOptions } = config;

    if (typeof outputOptions === 'undefined') {
      throw new Error('config output is not defined');
    }

    if (useWatchMode) {
      const defaultWatchOptions = {
        include: ['src/**'],
        exclude: ['node_modules/**']
      };
      const watchOptions = {
        ...defaultWatchOptions,
        ...config
      };
      await watch(watchOptions).on('event', event => {
        switch (event.code) {
          case 'START':
            logMessage('Compiling modules...');
            break;
          case 'ERROR':
            logMessage(bold().red('Failed to compile'));
            console.error(event.error);
            break;
          case 'FATAL':
            throw event.error;
          case 'END':
            logMessage(
              green(
                'Compiled successfully. Watching for changes, press ctrl-c to exit'
              )
            );
            break;
        }
      });
    } else {
      if (Array.isArray(outputOptions)) {
        for (const output of outputOptions) {
          await bundle.write(output);
        }
      } else {
        await bundle.write(outputOptions);
      }
    }
  });