I've created an UI JS library, package.json
is fine, I bundle it with webpack
and it works great in npm
(stays nicely in node_modules/library
dir).
However, I'd like to make some stuff configurable via config file. Let's say, my library has a Box
React component (it renders 100x100 square with background color):
// Box.js
export default function(props) {
return <div style={{
backgroundColor: props.color,
width: "100px",
height: "100px"
}}>
{props.children}
</div>;
}
I'd like to provide a possibility to add a configuration file so that the background color is users choice color by default.
So user of my library creates a config file (let's call it library.config.js
) in a root directory of his project and this file has sth like this:
// library.config.js
const BoxBackgroundColor = 'green';
export { BoxBackgroundColor }
And if this file exist, the lib knows this and user can simply use Box
like this:
<Box />
and color
prop will be green.
How to achieve sth like this?
The problem is that when I bundle my library I don't know if library.config.js
file exists or not. This information is available for user of my library in user's project. It seems I want to resolve all import
and require
statements in my library except for the library.config.js
. This exception require
should be resolved in user's project bundling phase (when library.config.js
file is available).