Rollup setup with multiple input

Question

I struggling with rollup setup. I want to use typescript and postcss to build following folder structure.

- Component
  - ComponentA
    - ComponentA.scss
    - ComponentA.ts
    - IconA.svg
    - IconB.svg
  - ComponentB
    - ComponentB.scss
    - ComponentB.ts
- Layout
  - PageA
    - PageA.scss
    - PageA.ts
  - PageB
    - PageB.scss
    - PageB.ts
  - global.scss
  - global.ts

I except this folder structure

- public
  - Component
    - ComponentA
      - ComponentA.css
      - ComponentA.js
      - IconA.svg
      - IconB.svg
    - ComponentB
      - ComponentB.css
      - ComponentB.js
  - Layout
    - PageA
      - PageA.css
      - PageA.js
    - PageB
      - PageB.css
      - PageB.js
    - global.css
    - global.js

I didn't find any related sample in docs or anywhere. I need to copy source code structure to output folder. I Wrote a simple method for discover entry points base on fs that was easy part. But how to setup outputs?

Answer 1

You can still achieve what you want with Rollup. For this, you will need multiple inputs/outputs using an array as your config's default export. As an example:

export default [
  {
    input: 'input1.js',
    output: {
      file: 'outpu1.js',
      format: 'cjs'
    }
    // ...
  },
  {
    input: 'input2.js',
    output: {
      file: 'output2.js',
      format: 'cjs'
    }
    // ...
  }
  // ...
];