component-resolver-webpack
Webpack plugin that provides simple convention on how to organize components:
The component file should be placed in a directory named as component itself e.g
button.jsx
must be placed insidebutton
directorty:button/button.jsx
.
Idea
It allows to shorten require
calls and make them more expressive:
var Button = ;// instead of:var Button = ;
Why not 'ui/button.jsx'
?
Because then you can use directories as module containers. As an example, you can
combine component-resolver-webpack
with
component-css-loader
:
var Button = ;// Single `require` to get React component and style associated with it.;var Button = ;
Directory also may contain tests (Jest-like approach).
Installation
Install via npm:
npm install --save-dev component-resolver-webpack
Update webpack config (default: webpack.config.js
):
var webpack = ;var ComponentResolverPlugin = ;moduleexports =plugins:// array of extensions e.g `['js']` (default: `['jsx', 'js']`);
You also may want to specify modulesDirectories
in webpack config:
// ...moduleexports =// ...resolve:modulesDirectories:// It will allow to use path without leading `./` in require// for directories placed in `app`:'app'
Tests
npm test
For watch mode:
npm run-script autotest
Roadmap
- Ignore patterns (like
node_modules
) - Simpler API (if it's possible with webpack)
--