Rollup.js

• Cannot mix using CommonJS require() and ES module import in the same one JS file
• import can import ES module
• import can import CommonJS using @rollup/plugin-commonjs

IIFE

Immediately-Invoked Function Expression

• No Code Splitting

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

// `npm run build` -> `production` is true
// `npm run watch` -> `production` is false
const production = !process.env.ROLLUP_WATCH;

const plugins = [
    resolve(), // find date-fns in node_modules
    commonjs(), // converts date-fns to ES modules
    production && terser() // minify, but only in production
];

export default [
    {
        input: 'src/main.js',
        output: {
            file: 'public/bundle.js',
            format: 'iife',
            sourcemap: true
        },
        plugins: plugins,
    },
    /* 
    {
        input: ...,
        output: ...,
    }
    */
];

Ref: rollup-starter-app

Run

-c	Use config file Default: rollup.config.js
-w	Watch mode

rollup -c [rollup.config.js] [-w]

Ref: Configuration Files

Using SystemJS

• Compatible
• Code Splitting

npm install --save-dev systemjs

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

const plugins = [
    resolve(),
    commonjs(),
    production && terser(), // minify
];

export default [
    {
        input: ['page.js', /*...*/],
        output: {
            dir: 'dist/',
            format: 'system',
            sourcemap: true,
        },
        plugins: plugins,
    },
];

.html

<script src="node_modules/systemjs/dist/s.min.js"></script>

<script>
System.import('dist/page.js');
</script>

Import plain JS

import 'plain.js';