Config Helper Rollup - simple Rollup Configurations

Description

Config Helper Rollup is a helper function to create configurations for the bundler Rollup. Submitting settings to this API creates readable, modifiable and working rollup configurations.

The API helps with settings for

• styles
• minification
• development server
• html template
• svelte
• jsx (in effect, React)
• TypeScript

Contents

-

Installation

Install as a devDependency using npm:

npm i config-helper-rollup -D

Usage

In your rollup.config.js file, import chr, and export a configuration (or array of configurations):

import { chr } from "config-helper-rollup";
export default [
    chr("myApp").end(),
];

The above is calling the builder API, with all default options, and finally invoking end() to produce an actual rollup configuration object.

To make the resulting configuration include settings for anything like styles, templates, svelte, jsx or TypeScript, supply a corresponding options object - or use the chaining syntax:

chr("myApp", {
    styles: true,
    htmlTemplate: true,
}).end();

// or

chr("myApp")
    .styles()
    .htmlTemplate()
    .end();

Helpful entries in npm's package.json scripts are:

// package.json, excerpt
---- >8
"scripts": {
    "clean": "rm -rf ./dist",
    "build": "rollup -c",
    "dev": "npm run build -- -w --environment NODE_ENV:development
}
8< ----

Options

The signature of chr is

chr: (appName: string, options: IOptions) => IIntermediateResult;

The appName corresponds to a plain Rollup config's output.name property, and thus should be a string that is also a valid JavaScript identifier.

The options signature is

interface IOptions {
    // Base options
    src?: string;                   // default "./src"
    dist?: string;                  // default "./dist"
    entry?: string;                 // default "main.js"
    sourcemap?: boolean;            // default: true 
    production?: boolean | string;  // default: "NODE_ENV"
    minify?: boolean;               // default: true if production mode, false otherwise (see "production" option) 
    
    // Plugin options
    styles?: boolean | IStylesOptions;              // default: false
    htmlTemplate?: boolean | IHtmlTemplateOptions;  // default: false
    devServer?: boolean | IDevServerOptions;        // default: false
    svelte?: boolean | ISvelteOptions;              // default: false
    jsx?: boolean | IJsxOptions;                    // default: false
    ts?: boolean | ITsOptions;                      // default: false
    
}

Base options

| prop | description | |------------|----------------------| | src | the source directory | | dist | the build directory, to which all processed files are written | | entry | the main entry filename (in the src directory) | | production | used to determine prod/dev mode. It is either a "hard boolean", or a string indicating which node.env property to look at. If that property is anything but "development", mode is considered to be production. | | minify | whether to minify written files. If not supplied, it will be deduced from whether mode is production (true) or not (false). |

Plugin options

styles

interface IStyleOptions {
    autoModules?: RegExp;   // default: /.+\.module\..+/
    extract?: boolean;      // default: true
    sourceMap?: boolean;    // default: true
    minify?: boolean;       // default: deduced from the Base option "minify"
}

| prop | description | |------|-------------| | autoModules | Regexp to match style file names which should be treated ass css modules | | extract | whether to extract styles to a file ow its own | | sourceMap | whether to generate sourcemaps for styles | | minify | whether to minify the content in bundles written |

Example:

chr("myApp", {
    styles: {
        minify: false,
    }    
});

// or, using the chaining style API:
chr("myApp")
    .styles({
        minify: false,
    });

htmlTemplate

interface IHtmlTemplateOptions {
    template?: string;  // default: "index.html"
    page?: string;      // default: "index.html"
}

| prop | description | |------|-------------| | template | template filename (in src directory) | | page | output html file name (in distdirectory) |

Example:

chr("myApp", {
    htmlTemplate: {
        template: "index.v2.html",
    }
});

// or, using the chaining style API:
chr("myApp")
    .htmlTemplate({
        template: "index.v2.html",
    });

devServer

interface IDevServerOptions {
    port?: number;          // default: 3000
    livereload?: boolean;   // default: true
}

| prop | description | |------|-------------| | port | port on which to start development server | | livereload | whether to use livereload |

Example:

chr("myApp", {
    devServer: {
        port: 8001,
    }
});

// or, using the chaining style API:
chr("myApp")
    .devServer({
        port: 8001,
    });

svelte

interface ISvelteOptions {
    cssFileBaseName?: string;   // default: deduced from the submitted base "appName" setting 
}

| prop | description | |------|-------------| | cssFileBasename | base name of generated css file. Will result in <baseName>.svelte.css (in dist directory) |

Example:

chr("myApp", {
    svelte: {
        cssFileBaseName: "styles",
    }
});

// or, using the chaining style API:
chr("myApp")
    .svelte({
        cssFileBaseName: "styles",
    }) 

jsx

interface IJsxOptions {}

| prop | description | |------|-------------| | | |

Example

chr("myApp", {
    jsx: true,
});

// or, using the chaining style API:
chr("myApp")
    .jsx();

ts

interface ITsOptions {}

| prop | description | |------|-------------| | | |

Example:

chr("myApp", {
    ts: true,
});

// or, using the chaining style API:
chr("myApp")
    .ts();

License

License: Finally, include a section for the license of your project. For more information on choosing a license, check out GitHub’s licensing guide!