(Ab)using package.json over index.js
I often navigate to parts of my React/React Native codebase based on filename. So if I’m looking for the code for the Button component in VSCode I wack Ctrl+P and start typing “Button”.
But what if in the Button component folder there is no Button.js but only some other js files (container.js and someFunkyLogic.js say) and an index.js for the export. Oh noes I can’t jump to the file.
So the internet suggested a nice pattern is to abuse package.json for the default export of a folder :)
For me, naming the exported js file the same as the folder is great for quick navigation to the file.
{
"name": "button",
"private": true,
"main": "./Button.js"
}
Advantages IMHO:
- Saves you milliseconds typing the import (still like using index.js)
import Button from 'comps/Button'
--- VS OMG so long to type ---
import Button from 'comps/Button/Button'- Your folder can still have some other “private” js files to break up functionality (exactly like using index.js with other files)
- No logic/code “hidden” in index.js. I personally don’t like this as I can’t easily navigate to “index.js” as there are millions of them.
- Search results previously could return lots of index.js files which are hard to parse.
- Millions of package.json I find easier to ignore than millions of index.js files :)
- One less js file in each folder!
The only thing is now some plugins might need help following import folder statements so you have to tell them about the package.json’s
Here is my config for the awesome Wallaby JS continuous testing plugin
// wallaby.jsmodule.exports = function(wallaby) {
return {
files: [
'src/**/*.js',
'package.json',
'src/**/package.json',
'!src/**/*.test.js',
], tests: ['src/**/*.test.js'], env: {
type: 'node',
runner: 'node',
}, testFramework: 'jest', // uses .babelrc
compilers: {
'**/*.js': wallaby.compilers.babel(),
}, reportConsoleErrorAsError: true
};
};
Any downsides anyone? Am I being silly for instance? :)
Thanks for reading!
