Docs: Babel, Webpack and Gulp examples

[GeoffreyBooth]

The CoffeeScript 2 docs could use some good examples to how to set up build chains with Babel, Webpack, Gulp and any other popular build tools. I can update the docs if people can point me in the direction of some good examples such as GitHub repos or articles.

[danielbayley]

@GeoffreyBooth I’m currently working on a package which compiles the latest CoffeeScript to whatever you need, utilising babel-preset-env (plus it wires up source maps properly and a few other bits), which should make a handy tool once I’ve ironed out a few things. I’m doing it combination with an Atom package to take advantage of the new per-package transpilation as they eventually want to get out of doing this kind of thing in core. So basically like this, but for CoffeeScript…

Anyway, maybe a link to these once they’re released and/or some examples of plain simple npm scripts might be a good idea also?

[GeoffreyBooth]

Sure, the more links the merrier. I think for the purposes of documentation, though, we need very simple examples to get people started. Think of the kind of developer who’s never used Babel before, or never used Gulp/Webpack before. The shorter/smaller the examples, the better.

[danielbayley]

very simple examples to get people started. Think of the kind of developer who’s never used Babel before

Yep, that's the main aim of the package… so you don’t have to deal with configuring babel etc just to use CoffeeScript… it should just be something like npm install --save-dev coffeescript-babel and then maybe a few basic scripts examples like a watch task in package.json.

[GeoffreyBooth]

Sure, that would be a good example to provide. We should also have Webpack and Gulp examples for people who have more full-featured build chains (like preprocessing CSS as well, etc.).

[DKhalil]

I wrote an article about the build process for vue.js with grunt, browserify and coffeescript here: https://brainsware.at/blog/10-vue-coffee-browserify-grunt
Maybe that's useful to you!

[GeoffreyBooth]

@DKhalil sure, I’d be happy to link to that. Do you mind posting an example repo to GitHub? Maybe just a hello-world that uses that stack.

[DKhalil]

@GeoffreyBooth there you go! https://github.com/DKhalil/coffeescript-vue-browserify-grunt

[laurentpayot]

I'm struggling to make Flow work with coffeescript 2 type annotations inside webpack 😓
Has anyone ever been able to use CS2 with Flow inside webpack??? A template would be really appreciated…

[danielbayley]

@GeoffreyBooth I also have jest-preset-coffeescript up and running…

[GeoffreyBooth]

After @helixbass released the Prettier and eslint support I was meaning to write a new section for the docs called Integrations, to be placed up high somewhere like near Usage, that would list those two projects/plugins as well as things like jest-preset-coffeescript and gulp-coffee and coffeeify any other big projects that are still maintained and known to work with CoffeeScript 2. If anyone wants to take a first stab at this new section, please feel free 😄 and let us know that you’re going to do so. As it’s become so important nowadays to have an ecosystem around a project, I think it’s something we need to document.

[danielbayley]

After @helixbass released the Prettier and eslint support I was meaning to write a new section for the docs called Integrations, to be placed up high somewhere like near Usage, that would list those two projects/plugins as well as things like jest-preset-coffeescript and gulp-coffee and coffeeify any other big projects that are still maintained and known to work with CoffeeScript 2. If anyone wants to take a first stab at this new section, please feel free 😄 and let us know that you’re going to do so. As it’s become so important nowadays to have an ecosystem around a project, I think it’s something we need to document.

@GeoffreyBooth I made a start… See #5334, and I also edited the Wiki