experience-based-fact-box/rollup.config.js

import autoprefixer from 'autoprefixer';
import babel from '@rollup/plugin-babel';
import browsersync from 'rollup-plugin-browsersync';
import commonjs from '@rollup/plugin-commonjs';
import cssnano from 'cssnano';
import copy from 'rollup-plugin-copy';
// import del from 'rollup-plugin-delete';
// import { eslint } from 'rollup-plugin-eslint';
import json from 'rollup-plugin-json';
import path from 'path';
import postcss from 'rollup-plugin-postcss';
import riot  from 'rollup-plugin-riot';
import resolve from '@rollup/plugin-node-resolve';
import sourcemaps from 'rollup-plugin-sourcemaps';
import stylelint from 'stylelint';
import { terser } from 'rollup-plugin-terser';

import config from './build.json';

const printWarning = (message) => {
    if (message.code === 'CIRCULAR_DEPENDENCY') {
        return;
    }
    console.error(message);  // eslint-disable-line
};

let TARGET = process.env.NODE_ENV || 'development';
let MODE = process.env.NODE_OPT;

export default {
    onwarn: printWarning,
    input: path.join(config.path.input, config.path.js, `${config.main}.js`),
    output: {
        file: path.join(config.path.output, config.path.js, `${config.main}${config[TARGET].infix}.js`),
        format: 'iife',
        sourcemap: config[TARGET].sourcemap
    },
    plugins: [
        // (MODE !== 'serve' && del({ targets: [path.join(config.path.output, '/*'), path.join(config.path.output, '/*')] })),
        resolve({ browser: true }),
        json(),
        commonjs(),
        // eslint({
        //     exclude: ['styles/**', 'context/**', 'html/**']
        // }),
        riot(),
        babel({ babelHelpers: 'bundled' }),
        (TARGET === 'development' && sourcemaps()),
        postcss({
            extract: `${config.main}${config[TARGET].infix}.css`,  // rollup v3 seems to have broken the convenient way. file needs to be copied to destination in succeeding step
            plugins: [
                autoprefixer(),
                stylelint(),
                (TARGET === 'production' && cssnano())
            ]
        }),
        copy({
            targets: [
                { src: path.join(config.path.output, config.path.js, `${config.main}${config[TARGET].infix}.css`), dest: path.join(config.path.output, config.path.css) },
                { src: path.join(config.path.data, config.data), dest:  path.join(config.path.output, config.path.data) },
                { src: path.join(config.path.assets, config.path.js), dest: config.path.output },
                { src: path.join(config.path.assets, config.path.img), dest: config.path.output },
                { src: path.join(config.path.assets, config.path.fonts), dest: config.path.output },
            ],
            hook: 'writeBundle',
            verbose: true
        }),
        (TARGET === 'production' && terser()),
        (MODE === 'serve' && browsersync({
            server: {
                baseDir: config.path.output,
                index: config.html.output
            }
        }))
    ]
};