This is useful when using selectors like data-test to run selenium test. Those properties are useless when running the code in production. You can save bandwidth by removing them.
In
class Foo extends React.Component {
render() {
return (
<div className="bar" data-test="thisIsASelectorForSelenium">
Hello Wold!
</div>
);
}
}
Out
class Foo extends React.Component {
render() {
return (
<div className="bar">
Hello Wold!
</div>
);
}
}
npm install --save-dev babel-plugin-react-remove-properties
.babelrc
without options
{
"env": {
"production": {
"plugins": ["react-remove-properties"]
}
}
}
with options
{
"env": {
"production": {
"plugins": ["react-remove-properties", {"property": "data-test"}]
}
}
}
babel --plugins react-remove-properties script.js
require("babel-core").transform("code", {
plugins: ["react-remove-properties"]
});
MIT