1. rollup-plugin-multi-input
rollup plugin for bundling modular libraries
rollup-plugin-multi-input
Package: rollup-plugin-multi-input
Created by: alfredosalzillo
Last modified: Sat, 25 Mar 2023 14:47:42 GMT
Version: 1.4.1
License: MIT
Downloads: 127,788
Repository: https://github.com/alfredosalzillo/rollup-plugin-multi-input

Install

npm install rollup-plugin-multi-input
yarn add rollup-plugin-multi-input

rollup-plugin-multi-input

CI/CD
codecov
npm version
semantic-release

A rollup plugin to bundle modular libraries with sub directories.

  • Use multiple entry points.
  • Use glob in entries.
  • Preserve src tree structure in the dist folder.

Install

Install via npm or yarn.

 npm i -D rollup-plugin-multi-input
yarn add rollup-plugin-multi-input

Setup

In the rollup configuration

 import multiInput from 'rollup-plugin-multi-input';

export default {
    // use glob in the input
    input: ['src/**/*.js'],
    output: {
      format: 'esm',
      dir: 'dist'
    },
    plugins: [ multiInput() ],
};

If using a rollup version lower than 1.0.0
enable experimentalCodeSplitting.

It's possible to mix input type.

  • use glob in array
     input: ['src/**/*.js']
    
  • use object input configuration
     // DO 👍
    input: [{
      output1: 'src/output1.js'
    }]
    // DON'T ❌ (glob not supported yet)
    input: [{
      output1: 'src/**/*.js'
    }]
    
  • use glob string and object configuration
     input: ['src/more/**/*.js', 'src/more2/**/*.js', {
      output1: 'src/output1.js'
    }]
    

Options

relative 'src/'

Specify the relative path to use in the dist folder.

Example:

 import multiInput from 'rollup-plugin-multi-input';

export default {
    input: ['src/bar.js', 'src/foo/bar.js'],
    output: {
      format: 'esm',
      dir: 'dist'
    },
    plugins: [ multiInput({ relative: 'src/' }) ],
};
// create the files dist/bar.js and dist/foo/bar.js

transformOutputPath

A callback for transforming output file path.

Example:

 import multiInput from 'rollup-plugin-multi-input';
import path from 'path';

export default {
    input: ['src/bar.js', 'src/foo/bar.js'],
    output: {
      format: 'esm',
      dir: 'dist'
    },
    plugins: [ multiInput({ 
        relative: 'src/', 
        transformOutputPath: (output, input) => `awesome/path/${path.basename(output)}`, 
    }) ],
};
// create the files awesome/path/bar.js and awesome/path/foo/bar.js

glob {}

fast-glob object configuration.

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin