npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

presetter-preset-rollup

v5.0.0

Published

An opinionated presetter preset for using rollup as a bundler

Downloads

15

Readme

Logo

🏄🏻 A collection of opinionated configurations for a building a code bundle via rollup for presetter

•   Quick Start   •   Project Structure   •   Customization   •   Scripts   •

npm build maintainability coverage security dependencies license

Features

presetter-preset-rollup is an opinionated preset for you to setup rollup in a fraction of time you usually take via presetter.

  • 🗞️ Rollup 2
  • 2️⃣ Dual CJS and ESM modules export by default
  • 🍄 Common rollup packages included as one single bundle
    • @rollup/plugin-commonjs
    • @rollup/plugin-graphql
    • @rollup/plugin-image
    • @rollup/plugin-json
    • @rollup/plugin-yaml
    • rollup <~ of course including rollup itself
    • rollup-plugin-postcss
    • rollup-plugin-ts
    • rollup-plugin-tsconfig-paths
    • rollup-plugin-visualizer

Quick Start

FULL DOCUMENTATION IS AVAILABLE HERE

  1. Bootstrap your project with presetter-preset-esm & presetter-preset-rollup
npx presetter use presetter-preset presetter-preset-rollup

That's. One command and you're set.

After bootstrapping, you would see a lot of configuration files generated, including a rollup.config.ts that has all plugins configured properly for you.

  1. Develop and run life cycle scripts provided by the preset

At this point, all development packages specified in the preset are installed, and now you can try to run some example life cycle scripts (e.g. run prepare).

Demo

IMPORTANT For NodeJS to import the correct export, remember to specify the following in your project's package.json too!

{
  "main": "lib/index.js",
  "module": "lib/index.mjs",
  "types": "lib/index.d.ts",
  "exports": {
    "require": "./lib/index.js",
    "import": "./lib/index.mjs"
  }
}

Project Structure

After installation, your project file structure should resemble the following or with more configuration files if you also installed other presets such as presetter-preset-esm.

Implement your business logic under source and prepare tests under spec.

TIPS You can always change the source directory to other (e.g. src) by setting the source variable in .presetterrc.json. See the customization section below for more details.

(root)
 ├─ .git
 ├─ .presetterrc.json
 ├─ node_modules
 ├─ source
 │   ├─ <folders>
 │   ├─ index.ts
 │   ├─ (auxiliary).ts
 ├─ spec
 │   ├─ *.spec.ts
 ├─ package.json
 └─ rollup.config.ts

Customization

By default, this preset exports a handy configuration for rollup for a typescript project. But you can further customize (either extending or replacing) the configuration by specifying the change in the config file (.presetterrc or .presetterrc.json).

These settings are available in the config field in the config file. For directories, the setting is specified in the variable field.

The structure of .presetterrc should follow the interface below:

interface PresetterRC {
  /** name(s) of the preset e.g. presetter-preset-rollup */
  name: string | string[];
  /** additional configuration passed to the preset for generating the configuration files */
  config?: {
    //  ┌─ configuration for other tools via other presets (e.g. presetter-preset-esm)
    // ...

    /** additional configuration for rollup */
    rollup?: {
      //  ┌─ any configuration supported by rollup, see https://rollupjs.org/guide/en/#configuration-files
      // ...

      /** list of plugin and its options */
      plugins?:
        | NormalizedRollupConfig['plugins']
        | Array<
            | string
            | [name: string]
            | [
                name: string,
                options:
                  | Record<string, unknown>
                  | `@apply ${string}`
                  | `@import ${string}`
                  | null,
              ]
          >;
    };
  };
  /** variables to be substituted in templates */
  variable?: {
    /** the directory containing all source code (default: source) */
    source?: string;
    /** the directory containing all output tile (default: source) */
    output?: string;
  };
}

For generating rollup.config.ts, this preset also support the @apply and @import directives such that you can also import configuration from other packages or ts/js files.

The usage of the directives is simple. In any part of the configuration for rollup, you can simply put @apply package_name or @import package_name and the preset will automatically replace the content with an imported variable. For example:

{
  "rollup": {
    "plugins": [
      [
        "@apply rollup-plugin-postcss[default]",
        { "plugins": "@import ./postcss.config[default.plugins]" }
      ]
    ]
  }
}

will create a rollup.config.ts file with the following content:

import * as import0 from 'rollup-plugin-postcss';
import * as import1 from './postcss.config';

export default {
  plugins: [import0.default(...[{ plugins: import1.default.plugins }])],
};

The syntax for both the directives is quite similar. Use @apply in a situation that you have to invoke a function from an imported package, such as rollup-plugin-postcss in the above example. You can also specify the arguments for the invoked function in the form of ["@apply package", options]

For @import, use it if you want to import value from another package or ts/js file. For example, @import ./postcss.config[default.plugins] would allow you to refer default.plugins from ./postcss.config in the above example.

In addition to the directives, to specify the plugins for rollup, you can write it in three ways similar to babel.

  1. A object with plugin name as the key and its options as its value e.g. {'@apply @rollup/plugin-typescript[default]': {options}}
  2. Name of a plugin in an array e.g. ['@apply @rollup/plugin-typescript[default]']
  3. Doublet of [plugin name, options] in an array e.g. [['@apply @rollup/plugin-typescript[default]', {options}]]

Script Template Summary

  • run build: Bundle your code via rollup
  • run develop: Continuous code build and watch