plugin that provide ability to customize imported file by file name suffix, this plugin can be also used for React-Native. This plugins allows you to create application and decide in build time which code will be taken based on suffix of file name. This give you to abillity reuse code and build multiple application(white label) in the same build.
"plugins": [["import-customization", {"suffix": ["myCustomization"]}]]
someComponent.js
export default class SomeComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text>
Hello I am Some Component;
</Text>
</View>
);
}
someComponent.myCustomization.js
// you can inject the original component to custom component in order to extend or do a composition
import SomeComponent from './someComponent';
export default class MyCustomComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text>
Hello I am Some Custom Component;
</Text>
<SomeComponent />
</View>
);
}
}
import SomeComponent from './someComponent';
render() {
return (
<SomeComponent />
);
}
}
// without plugin usage result:
// Hello I am Some Component;
// without plugin usage result:
// Hello I am Some Custom Component
// Hello I am Some Component;
// possible to provide suffix to babel plugin options
"plugins": [["import-customization", {"suffix": ["myCustomization"]}]]
// possible to provide env key of process.env and then set the suffix in node env process.env.suffixName=myCustomization
// this configration take precedence over the one above.
"plugins": [["import-customization", {"env": "suffixName"}]]
I gave react example but this plugin can be used for any javascipt code which uses babel. This also support if you did require and not import