@teclone/rollup-all
TypeScript icon, indicating that this package has built-in type declarations

1.29.1 • Public • Published

@teclone/rollup-all

Build Status Coverage Status semantic-release npm version npm

@teclone/rollup-all is a package for generating javascript/typescript library builds with typescript definition file support.

This package does the heavy lifting and builds on top of Rollupjs and Babel making it possible to generate cjs, es, umd and iife builds at once.

Motivation for this package

The Javascript ecosystem is diverse, and every changing with new language proposals. There is big need to support older environments while writing in modern Javascript syntax.

Library developers face the problem of shipping modern Javascript codes to formats that are compatible with NodeJs, browsers and bundle tools (webpack) in the leanest forms.

Moreso, there is need to generate typescript definition files for most projects (javascript and typescript projects alike), sourcemaps, minification, production build, development build, resolution of dynamic imports, etc.

library source codes in one parsing, allowing you to generate commonjs, es module, and browser builds at once. It is very configurable and runs asynchronously.

This package automates the whole process with the right configurations and makes it easy to get all target build formats generated in one command with configurability in mind.

Installation with npm

npm install --save-dev @teclone/rollup-all

Installation with yarn

yarn add --dev @teclone/rollup-all

Run via cli

npx rollup-all

Run as npm/yarn script

add a build script to package.json

{
  "scripts": {
    "build": "rollup-all"
  }
}

You can now run it as npm or yarn command

yarn rollup-all

Supported build Formats:

The following build formats are supported:

  • cjs: Commonjs build, this output of this build is compatible with Nodejs.
  • es: Es module build, the output of this build is compatibile with modern bundle tools such as webpack
  • umd: Browser bundle compatible with umd loaders,
  • iife: Browser bundle

NB: By default, output directory name matches the format name and are placed inside the project's root folder.

Configurations

It is possible to configure the build process via a config file or via cli options. To configure the build via a config file, create a rollup.config.js file in the project's root directory

const { createConfig } = require('./temp');
module.exports = createConfig({
  /**
   * build formats to generate
   */
  formats: ['cjs', 'es', 'iife', 'umd'],

  src: 'src',

  /**
   * folder to put all builds, defaults to root folder
   *
   * for instance cjs builds will be put inside ${out}/cjs/
   */
  out: './build',

  /**
   * extra rollup js plugins
   */
  plugins: [],

  /**
   * entry file for umd/iife build, index here matches any of the extensions
   */
  entryFile: 'index',

  /**
   * package export name for umd/iife,
   *
   * this is the name of the package as it will be accessed in browser windows (window.moduleName)
   */
  moduleName: '',

  /**
   * allowed file extensions
   */
  extensions: ['.js', '.ts', '.jsx', '.tsx'],

  /**
   * define list of file extensions to be considered as asset files.
   * Asset files are copied over to the build directories.
   *
   * default values are .json, .png, .jpg, .jpeg, .gif, .svg, etc
   */
  assetExtensions: []

  /**
   * defines string of file patterns to process
   */
  include: [],

  /**
   * defines string of file patterns to ignore. by default, type definition files are ignore
   */
  exclude: [],

  /**
   * boolean indicating if the interop rollup setting should be enabled
   */
  interop: true,

  /**
   * boolean indicating if sourcemap should be generated, can be true, false, or 'inline'
   */
  sourcemap: true,

  /**
   * package imports that should not be bundled in a umd/iife, treated as externals
   */
  globals: {},

  /**
   * applies to dist builds (umd, iife), if true, a separate [filename].[env].min.js build will be
   * generated for each file.
   */
  minify: true,

  /**
   * development and production builds can be genereted for umd/iife builds
   *
   * the advantage is that development specific codes (process.env.NODE_ENV === 'development') will be removed in production build
   */
  envs: ['development', 'production'],
});

Cli options

The following options can be parsed to the cli binary

  • --sourcemap: boolean: to generate sourcemaps, default is true
  • --envs: development|production|uni: comma separated list of environment based builds. uni value will generate build that runs for production and development. Environment based builds only applies to distribution build formats, umd and iife. default is development,production
  • --src: string: your code's src folder: default value is src
  • --out: string: folder to place all builds, default is root directory ./

Environment and minified builds

When generating distribution builds, aka umd and iife, it is desirable to have separate development and production build with minified and non minified versions.

The build filename format for dist builds is [filename].[env].[min]?.js;

Production build will strip out all development related codes, and vice versa.

for instance, the code sample below will be removed in production builds

if (process.env.NODE_ENV === 'development') {
  // code snippets here
}

This is taken care of automatically with the help of babel-plugin-transform-inline-environment-variables

Package Sidebar

Install

npm i @teclone/rollup-all

Weekly Downloads

67

Version

1.29.1

License

MIT

Unpacked Size

177 kB

Total Files

80

Last publish

Collaborators

  • teclone