This Babel plugin transforms indirect imports through a barrel file (index.js) into direct imports.
This plugin is intended for developers who use barrel files (index.js) with the Webpack or Vite bundlers, or when running tests with Jest. I don't know if it's beneficial to use with other bundlers such as Parcel, Rollup, etc.
Before transformation:
import { Button, List } from './components'
After transformation:
import { Button } from './components/Button/Button'
import { List } from './components/List/List'
Install the package using npm:
npm install --save-dev babel-plugin-transform-barrels
Add the following to your Webpack config file in the rule with a babel-loader
loader:
"plugins": [["transform-barrels", "Options (object) - see below"]]
Alternatively, you can add babel-plugin-transform-barrels
to your babel config file:
"plugins": [["babel-plugin-transform-barrels", "Options (object) - see below"]]
Add the following configuration to your Jest config file:
"transform": {
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": require("path").resolve(
"./config/jest/babelTransform.js")
}
Copy the config
folder to the same folder as the Jest config file.
Adapt the config/jest/babelTransform.js
file according to code transformation needs.
Name | Type | Default | Description |
---|---|---|---|
executorName |
string |
"other" |
It should be assigned with one of the supported executor values: webpack , vite or jest . |
alias |
object |
{} |
It should be assigned with the alias value option from the executor config. |
extensions |
array |
[".js", ".jsx", ".mjs", ".cjs", ".ts", ".tsx"] |
It should be assigned with the extensions value option from the executor config. |
isCacheEnabled |
boolean |
false |
If true , enables file-based cache. |
logging |
object |
{ type: "disabled", filePath: "log.txt" } |
Specifies logging options.type can be disabled for no logging, file for logs to a file, or screen for logs to the console.If type is file , filePath specifies the log file path. |
There are two issues that can occur in bundle files created by Webpack when using barrel files:
There are two issues that can occur in Jest when using barrel files:
I recommend reading my articles Potential issues with barrel files in Webpack and Potential issues with barrel files in Jest for more information on possible issues can caused by barrel files.
sideEffects: ["*.css", "*.scss"]
- this solution should replace the first solution above. However, it causes a new issue where the order of imported modules is not based on the order of import statements, but on usage order. This can cause unexpected visual issues due to changes in the import order of CSS.Both solutions above are not optimal, so I decided to develop my own plugin that does not require specific configuration for each package.
My plugin examines every import in the Javascript project files and transforms it from an indirect import through a barrel file to a direct import from the module where the original export is declared.