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

@swissquote/crafty-runner-rollup

v1.22.3

Published

rollup.js is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Downloads

176

Readme

Description

rollup.js is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

rollup.js works well with libraries because it's able to output files with EcmaScript 2015 exports which allow for advanced tree shaking.

The rollup.js integration is experimental and has some issues that are known and some that are not pinpointed yet.

[TOC]

Features

  • Bundle your JavaScript using EcmaScript 2015 imports or commonjs imports
  • Your code is Uglified after compilation.
  • Configurable output formats
  • Watch mode, re-compiles your files on changes

Options

We don't provide any option to configure rollup.js outside bundles, but as crafty.config.js is considered as a preset, you can define the rollup override method in your configuration file and change the configuration to your needs.

Check the Extending the configuration section below for more information on that.

Bundle Options

The rollup.js preset is compatible with our Babel and TypeScript

| Option | Type | Optional ? | Description | | --------------- | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------- | | format | string | Yes | Define the output format can be any of amd, iife, cjs, es or umd. Defaults to es. | | externals | string[] | Yes | Extends the list of provided libraries (Webpack understands both globs and strings, rollup.js doesn't understand globs) | | inlineRuntime | boolean | Yes | Do we inline the @babel/runtime ? Read below for details and implication |

inlineRuntime / put @babel/runtime inline or keep it as imports

Default: true when nothing is specified, and to false when a dependency to @babel/runtime is found.

When compiling newer EcmaScript to older versions, some helper functions can be needed to make it work. For example functions to create classes, rest, spread, etc...

These helpers are quite small, however, if you are creating a library which will be included in another project, your bundle might end up containing the library along with the copies that the final project will contain as well.

A way to reduce this cost is instead of having these helpers inline is to keep them as imports.

// This
function _classCallCheck(instance, Constructor) {
  /* */
}
function _defineProperties(target, props) {
  /* */
}
function _createClass(Constructor, protoProps, staticProps) {
  /* */
}

// Becomes
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";

The way to do this is by adding a dependency to @babel/runtime in your project's package.json.

If for some reason you need a dependency to @babel/runtime but still wish helpers to be inline, you can force it with inlineRuntime: true.

Extending the configuration

Each preset and crafty.config.js can define the rollup(crafty, bundle, rollupConfig) function to override rollup.js' configuration.

module.exports = {
  /**
   * Represents the extension point for rollup.js configuration
   * @param {Crafty} crafty - The instance of Crafty.
   * @param {Object} bundle - The bundle that is being prepared for build (name, input, source, destination)
   * @param {Object} rollupConfig - The current rollup.js configuration (input, output, watch)
   */
  rollup(crafty, bundle, rollupConfig) {
    // Mutate any of rollupConfig.input, rollupConfig.output or rollupConfig.watch to your liking
  }
};

The full list of available configuration option is available on the official website.

The difference with the official configuration is how plugins are handled. The section below explains how plugins are configured.

Adding / modifying plugins

In rollup.js, plugins are functions that are called with their options.

As we want to be able to override those options during the preparation phase of the runner, those plugins are presented in the following way :

Here is an example of how the rollup-plugin-eslint is integrated into rollup.js .

const rollupEslint = require("rollup-plugin-eslint");

module.exports = {
  /**
   * Represents the extension point for rollup configuration
   * @param {Crafty} crafty - The instance of Crafty.
   * @param {Object} bundle - The bundle that is being prepared for build (name, input, source, destination)
   * @param {string} rollupConfig - The current rollup configuration (input, output, watch)
   */
  rollup(crafty, bundle, rollupConfig) {
    // rollupConfig.input.plugins is an object during preparation phase with four possible keys :
    // - plugin : the function to initialize the plugin
    // - options : A configuration object, will be passed to the function as a first parameter upon initialization
    // - weight : (optional) The weight of the plugin, used to define the order in which the plugins are run (A weight of 0 is applied if this key is omitted)
    // - init : (optional) A function that Returns an instance of the plugin. The default is : `(plugin) => plugin.plugin(plugin.options)`

    rollupConfig.input.plugins.eslint = {
      plugin: rollupEslint,
      weight: -20,
      options: {
        ...crafty.config.eslint,
        throwOnError: crafty.getEnvironment() === "production",
        exclude: ["node_modules/**"],
        include: ["**/*.js", "**/*.jsx"]
      }
    };
  }
};

Known issues

  • If you have two bundles that run with rollup.js, if one fails, the second one stops as well.
  • ESLint stops linting after the first file in error, this shouldn't be the case.