@nx/rollup

What is @nx/rollup?

@nx/rollup is a package that integrates Rollup, a module bundler, with the Nx build system. It allows you to bundle JavaScript and TypeScript libraries and applications efficiently within an Nx workspace.

What are @nx/rollup's main functionalities?

Bundling JavaScript/TypeScript Libraries

This feature allows you to bundle JavaScript or TypeScript libraries using Rollup within an Nx workspace. The code sample demonstrates how to configure the build target for a library named 'my-lib' using the @nx/rollup executor.

json
{
  "name": "my-lib",
  "version": "1.0.0",
  "scripts": {
    "build": "nx build my-lib"
  },
  "nx": {
    "targets": {
      "build": {
        "executor": "@nx/rollup:rollup",
        "options": {
          "outputPath": "dist/libs/my-lib",
          "tsConfig": "libs/my-lib/tsconfig.lib.json",
          "project": "libs/my-lib/package.json"
        }
      }
    }
  }
}

Custom Rollup Configuration

This feature allows you to use a custom Rollup configuration file for more advanced bundling scenarios. The code sample shows how to specify a custom Rollup configuration file for an application named 'my-app'.

json
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "build": "nx build my-app"
  },
  "nx": {
    "targets": {
      "build": {
        "executor": "@nx/rollup:rollup",
        "options": {
          "outputPath": "dist/apps/my-app",
          "tsConfig": "apps/my-app/tsconfig.app.json",
          "project": "apps/my-app/package.json",
          "rollupConfig": "apps/my-app/rollup.config.js"
        }
      }
    }
  }
}

Watch Mode

This feature enables watch mode for continuous building during development. The code sample demonstrates how to configure the build target for a library named 'my-lib' to run in watch mode.

json
{
  "name": "my-lib",
  "version": "1.0.0",
  "scripts": {
    "build:watch": "nx build my-lib --watch"
  },
  "nx": {
    "targets": {
      "build": {
        "executor": "@nx/rollup:rollup",
        "options": {
          "outputPath": "dist/libs/my-lib",
          "tsConfig": "libs/my-lib/tsconfig.lib.json",
          "project": "libs/my-lib/package.json",
          "watch": true
        }
      }
    }
  }
}

Other packages similar to @nx/rollup

rollup

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. While @nx/rollup integrates Rollup with the Nx build system, Rollup itself is a standalone tool that can be used in any JavaScript project.

webpack

Webpack is a popular module bundler for JavaScript applications. It offers a rich plugin ecosystem and is highly configurable. Unlike @nx/rollup, which specifically integrates Rollup with Nx, Webpack can be used independently or with other build systems.

parcel

Parcel is a web application bundler that offers a zero-configuration setup. It is designed to be easy to use and fast. While @nx/rollup focuses on integrating Rollup with Nx, Parcel aims to provide an out-of-the-box bundling experience.

README

---

Nx: Smart Monorepos · Fast CI

Nx is a build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.

This package is a Rollup plugin for Nx.

Getting Started

Creating an Nx Workspace

Using npx

npx create-nx-workspace

Using npm init

npm init nx-workspace

Using yarn create

yarn create nx-workspace

Adding Nx to an Existing Repository

Run:

npx nx@latest init

Documentation & Resources

• Nx.Dev: Documentation, Guides, Tutorials
• Intro to Nx
• Official Nx YouTube Channel
• Blog Posts About Nx