CODEWITHSUNDEEP
babeljs
clint
clint

Reputation: 14524

Babel: use subset of stage-x preset plugins?

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.

Upvotes: 0

Views: 273

Answers (2)

clint
clint

Reputation: 14524

@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);
  }

Upvotes: 1

CodingIntrigue
CodingIntrigue

Reputation: 78555

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

Upvotes: 1

Related Questions