I maintained an SPA with relatively old frontend. The main trouble was coffeescript - a lot of new things built by ES6 standard and tying process can be a nightmare. The simplest thing in this case - to move to ES6. Not a big deal, things like decaffeinate can help you!
I got a big problem. Decaffeinate can’t work with JSX, but actually coffeescript & JSX are mixed together inside one file. I’ll describe how to migrate below.
npm install -g babel-plugin-transform-react-createelement-to-jsx coffee-react lebab babel-cli
Okay, we have a set of
.coffee files (maybe
.cjsx, that’s up to you).
cd to root directory of these files and:
find . -name \*.coffee -print | xargs cjsx -bc
Now we have plain old
ES5 with ugly
React.createElement inside. Let’s deal with both drawbacks
Lebab is awesome 5to6 tool. Let’s convert old style to new.
find . -name \*.js -print | xargs -iFile lebab File -o File
It’s time for
JSX. Daniel gave me a hint how to do it:
find . -name \*.js -print | xargs -iFile babel --plugins transform-react-createelement-to-jsx File -o File
Another small thing.
Coffee-script package adds a comment to the top of each file it converts. Remove these comments:
find . -name \*.js -print | xargs -iFile sed -i '1d' File
Last. You are using build tool, aren’t you? So ok, let’s replace
.coffee dependencies by
find . -name \*.js -print | xargs sed -i 's/.coffee/.js/g'
Volia! Happy ES6!