DEV Community

Cover image for I wrote my first babel plugin! (And it wasn't that hard!)

I wrote my first babel plugin! (And it wasn't that hard!)

Luciano Graziani on March 05, 2019

Cover image from https://www.grimms.eu/en/products/building-amp-rainbow-worlds/organic-shapes/1240/colored-waldorf-blocks Today I wrote a tin...
Collapse
 
sanketmaru profile image
Sanket Maru

I wrote my first babel plugin here github.com/sanketmaru/babel-plugin....

Couple of issues i am unable to proceed with and wanted help

  1. I am trying to remove the functions based upon some param and it is not able to hit ClassMethod visitor in production mode, where as in development mode it works.

  2. While debugging in vs code. Sometimes the breakpoints hit and sometimes it doesn't. Have you faced this issue ?

The development/production mode can be altered from build.js ( its a create-react-app).

Collapse
 
lgraziani2712 profile image
Luciano Graziani

Hello Sanket! Happy to know you're making a plugin!

BTW, I am no expert about create react app, but I have to ask, why are you using CRA to make/test the plugin? To me it feels like too much for a babel plugin development.

I do not know either what it does CRA internally in dev mode and prod mode (and I thought CRA wouldn't allow you to use custom babel config O: ahhh, you ejected!). But one thing I saw was the browserlist config! You have one for prod and one for dev. In prod you say you want your app to be able to run in really old browsers (> 0.2% rule), while in dev mode you're saying you want to run it only for last version of chrome, firefox and safari, and maybe that's where your bug is.

While debugging in vs code. Sometimes the breakpoints hit and sometimes it doesn't. Have you faced this issue ?

Yeah, happens a lot: webpack is generating the sourcemaps, and sometimes are lines that won't hit. Again, using CRA to develop a simple plugin is overengineering. If you look into my repo github.com/lgraziani2712/babel-plu... you'll see I only have babel and jest as deps (eslint and prettier too though they are only for linting and formatting).

Collapse
 
sanketmaru profile image
Sanket Maru

Hi Luciano Graziani,
Thanks for your reply.
I will give it a try with your observations. May be its not a problem with plugin and prod/dev config with CRA is an issue.