barrelator

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.

Installation

npm i barrelator --save-dev

Configuration

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"
  }
]

| Property | Type | Mandatory | Default | Description | |:--------:|:-------:|:---------:|:-------:|---------------------------------------------| | dir | string | yes | - | Directory from which import files | | exts | array | no | - | Array of extensions that should be included | | name | string | no | index | Barrel file name | | parse | boolean | no | true | Camel case the file names | | ts | boolean | no | false | Produce a Typescript barrel |

Run

npx barrelator

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

Example

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;
}

Notes

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.