Babel: use subset of stage-x preset plugins? - babeljs

Question

How can I use two specific Babel plugins that are in a stage-x "preset", without having to use the entire preset?
Specifically, I want to use transform-class-properties and transform-decorators in my ES6 classes, both currently proposed for ES7 and part of the stage-1 preset.

Answer 1

presets are just a collection of smaller plugins, so you can use that option to pull in the transforms you need:
.babelrc (Or config)
{
"presets": ["es2015"],
"plugins": ["transform-class-properties", "transform-decorators"]
}
Will give you all ES2015 + Class Properties + Decorators

Answer 2

#RGraham's answer was helpful--also wanted to share more details...
I'm using gulp, so first I had to upgrade from gulp-babel 5.x to 6.x:
npm install --save-dev babel/gulp-babel
Then I needed to install ES2015 preset and the two plugins I want to use (+ the react preset since I'm using ReactJS):
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev babel-plugin-transform-class-properties
npm install --save-dev babel-plugin-transform-decorators
Last, I passed the following config to Babel (you could also specify this in your .babelrc file):
{
presets: ['es2015', 'react'],
plugins: [
["transform-class-properties"],
["transform-decorators"]
]
}
Your JavaScript linter will complain about the ES7 syntax. This blog post described the solution: modify lintjs to use Babel as the JavaScript parser. Set "parser": "babel-eslint" in your .eslintrc file then
npm install --save-dev babel-eslint
Lastly for any other ReactJS folks, make sure you modify your component's constructor to include the props and context arguments or else you may get a runtime error like TypeError: Cannot read property 'xxx' of undefined. Here's an example:
/**
* ES6 constructor method (takes the place of the old React componentWillMount() method).
*
* #param {Object} props See https://facebook.github.io/react/docs/reusable-components.html
* #param {Object} context See https://facebook.github.io/react/docs/context.html
*/
constructor(props, context) {
super(props, context);
log.debug(`Creating ${this.constructor.name} instance`, props, context);
}