Rollup JS

Overview

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today.

Rolluprollupjs

redux/rollup.config.js at master · reduxjs/reduxGitHub

rollup.config.js

import nodeResolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import replace from '@rollup/plugin-replace'
import typescript from 'rollup-plugin-typescript2'
import { terser } from 'rollup-plugin-terser'

import pkg from './package.json'

const extensions = ['.ts']
const noDeclarationFiles = { compilerOptions: { declaration: false } }

const babelRuntimeVersion = pkg.dependencies['@babel/runtime'].replace(
  /^[^0-9]*/,
  ''
)

const makeExternalPredicate = (externalArr) => {
  if (externalArr.length === 0) {
    return () => false
  }
  const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`)
  return (id) => pattern.test(id)
}

export default [
  // CommonJS
  {
    input: 'src/index.ts',
    output: { file: 'lib/some-framework.js', format: 'cjs', indent: false },
    external: makeExternalPredicate([
      ...Object.keys(pkg.dependencies || {}),
      ...Object.keys(pkg.peerDependencies || {}),
    ]),
    plugins: [
      nodeResolve({
        extensions,
      }),
      typescript({
        useTsconfigDeclarationDir: true,
        tsconfig: "tsconfig.build.json",
      }),
      babel({
        extensions,
        plugins: [
          ['@babel/plugin-transform-runtime', { version: babelRuntimeVersion }],
        ],
        babelHelpers: 'runtime'
      }),
    ],
  },
  
  // ES
  {
    input: 'src/index.ts',
    output: { file: 'es/some-framework.js', format: 'es', indent: false },
    external: makeExternalPredicate([
      ...Object.keys(pkg.dependencies || {}),
      ...Object.keys(pkg.peerDependencies || {}),
    ]),
    plugins: [
      nodeResolve({
        extensions,
      }),
      typescript({
        tsconfigOverride: noDeclarationFiles,
        tsconfig: "tsconfig.build.json",
      }),
      babel({
        extensions,
        plugins: [
          [
            '@babel/plugin-transform-runtime',
            { version: babelRuntimeVersion, useESModules: true },
          ],
        ],
        babelHelpers: 'runtime'
      }),
    ],
  },
  
  // ES for Browsers
  {
    input: 'src/index.ts',
    output: { file: 'es/some-framework.mjs', format: 'es', indent: false },
    plugins: [
      nodeResolve({
        extensions,
      }),
      replace({
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      typescript({
        tsconfigOverride: noDeclarationFiles,
        tsconfig: "tsconfig.build.json",
      }),
      babel({
        extensions,
        exclude: 'node_modules/**',
      }),
      terser({
        compress: {
          pure_getters: true,
          unsafe: true,
          unsafe_comps: true,
          warnings: false,
        },
      }),
    ],
  },
  
  // UMD Development
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/some-framework.js',
      format: 'umd',
      name: 'SomeFramework',
      indent: false,
    },
    plugins: [
      nodeResolve({
        extensions,
      }),
      typescript({
        tsconfigOverride: noDeclarationFiles,
        tsconfig: "tsconfig.build.json",
      }),
      babel({
        extensions,
        exclude: 'node_modules/**',
      }),
      replace({
        'process.env.NODE_ENV': JSON.stringify('development'),
      }),
    ],
  },
  
  // UMD Production
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/some-framework.min.js',
      format: 'umd',
      name: 'SomeFramework',
      indent: false,
    },
    plugins: [
      nodeResolve({
        extensions,
      }),
      typescript({
        tsconfigOverride: noDeclarationFiles,
        tsconfig: "tsconfig.build.json",
      }),
      babel({
        extensions,
        exclude: 'node_modules/**',
      }),
      replace({
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      terser({
        compress: {
          pure_getters: true,
          unsafe: true,
          unsafe_comps: true,
          warnings: false,
        },
      }),
    ],
  },
]