@brixtol/rollup-config

@brixtol/rollup-config

Shareable rollup configuration used within the Brixtol Textiles monorepo. The module acts as an interface, exporting an instance of Rollup and several plugins that are frequently used by packages contained across the workspace. Each plugin is wrapped as a getter which helps negate exposing unused plugins on the export.

Why

We operate atop of a cloud driven serverless architecture. This module assists in the processes relating to our cloud builds, serverless apis, open/closed sourced package and applications using Lambdas or edge handlers. It provides us a single dependency import for bundling with Rollup and single source for version controlling all plugins we leverage.

Rollup + ESBuild

Bundles are generated using ESBuild together will Rollup. TypeScript and JavaScript modules are processed with esbuild using rollup-plugin-esbuild.

Install

This module can be installed and leveraged by projects that are outside of our organization.

pnpm

pnpm add @brixtol/rollup-config -save-dev

Brixtol Monorepo

If you are working within the Brixtol Textiles monorepo then please note that this module is installed at root, so for development on private modules it does not need to be installed. If a project is public facing or consumed in build images elsewhere then you will need to explicitly install it.

Use workspace:* for version definition to ensure packages are always using the latest.

Usage

This is an ESM module, your rollup config file must use a .mjs extension (rollup.config.mjs) or else Node will complain depending on your project presets. The rollup() export is totally optional, its a re-export of defineConfig and used to provide type completions.

import { rollup, env, plugin } from "@brixtol/rollup-config";

export default rollup(
  {
    input: "src/file.ts",
    output: {
      format: 'cjs',
      dir: 'package',
      sourcemap: env.is('dev', 'inline'), // Inline sourcemap in development else false
      interop: 'default'
    },
    plugins: env.if('div')(
      [
        plugin.esbuild(options: {}),
        // etc etc
      ]
    )(
      [
        plugin.terser()
      ]
    )
  }
);

Types are re-exported and provided for all plugins which support them. Rollup configuration files within our workspace.

What is the env.if() method?

This module provides exports from @brixtol/rollup-utils. The env.if() allows us to use single file for development and production bundles. When an --environment flag is passed with a of value of prod the plugins are concatenated, so first curried parameter is combined with the second curried parameter, which should both be an array list of plugins[].

The dev is default, so running rollup -c -w results in:

env.if('dev')([ plugin.commonjs(), plugin.ts() ])([ plugin.terser() ])
// => [ commonjs(), ts() ]

If you run rollup -c --environment prod it results in:

env.if('dev')([ plugin.commonjs(), plugin.ts() ])([ plugin.terser() ])
// => [ commonjs(), ts(), terser() ]

Plugins

All plugins are available via the named plugin export. In addition to the plugins rollup's defineConfig function is exported as rollup namespace so configuration options have typings on the default export. Below is the complete list of included plugins:

Export	Plugin
plugin.alias	@rollup/plugin-alias
plugin.beep	@rollup/plugin-beep
plugin.bs	rollup-plugin-browsersync
plugin.copy	rollup-plugin-copy
plugin.commonjs	@rollup/plugin-commonjs
plugin.del	rollup-plugin-delete
plugin.esbuild	rollup-plugin-esbuild
plugin.filesize	rollup-plugin-filesize
plugin.html	@brixtol/rollup-html
plugin.json	@rollup/plugin-json
plugin.livereload	rollup-plugin-livereload
plugin.multi	@rollup/plugin-multi-entry
plugin.polyfills	rollup-plugin-node-polyfills
plugin.resolve	@rollup/plugin-node-resolve
plugin.postcss	rollup-plugin-postcss
plugin.replace	@rollup/plugin-replace
plugin.dts	rollup-plugin-dts
plugin.serve	rollup-plugin-serve
plugin.terser	rollup-plugin-terser

Optional Dependencies

The module includes several optional dependencies, one being Rollup itself. Ensure that if you are using a plugin you install any optional it might require.

• Autoprefixer
• PostCSS
• Rollup
• TypeScript

Related

• @brixtol/rollup-utils

License

Licensed under MIT.

We ♡ open source!