After a lack of an easy way to create static websites with dynamic files (from a JSON file for example), this project aims to build a barrel file to import those files. Providing so a const variable with the imported files.

npm i barrelator --save-dev

In a barrelator.json file:

[
  {
    "dir": "src/Assets"
  },
  {
    "dir": "src/model/images",
    "exts": ["png"],
    "name": "assets",
    "parse": false
  }
]

In package.json, just add an barrelator property:

"barrelator": [
  {
    "dir": "src/Assets"
  },
  {
    "dir": "src/model/images",
    "exts": ["png"],
    "name": "myImages"
  }
]

npx barrelator

This will generate a file for each element in the barrelator array in the barrelator.json or in the package.josn.

For the previous configuration, assuming both folders two files image1.png and image2.jpg, the results would be:

src/Assets/assets.js

import image1 from 'src/model/images/image1.png'
import image2 from 'src/model/images/image2.png'

export default {
  'src/model/images/image1.png': image1,
  'src/model/images/image2.png': image2,
}

src/model/images/myImages.js

import image1 from 'src/model/images/image1.png'

export default {
  image1,
}

If no name is provided, it will export

Then in a component:

import assets from '../Assets/assets'
import myImages from '../model/images/images'

function MyComponent({ dynamicImage }) {
  const image = myImages[dynamicImage]; // dynamicImage will be 'src/model/images/image1.png'
  const { image1, image2 } = assets;
}

The parse options intends to export the files in a more readable way in case this module is not used to import files dynamically, but just to have all files imported in a barrel file.

A file called src/assets/My-song.mp3 will parse into a property called MySong.