In development I use both Coffeescript and Browserify middleware on my Express server to deliver my client side JS like so:
app.use browserify mount: '/client.js', entry: './client.coffee', watch: yes
Today I was upgrading my dependencies and noticed this on the browserify v2 website:
One of the worst ideas in browserify, the ad-hoc http server middleware to host bundles is finally gone.
Default support for coffee-script is gone. You can still use coffee script in your program, you'll just need to either compile to js or hook the source transformation into the bundle pipeline yourself.
Remember that if you disagree with these cuts which I expect many people will, with the v2 refactoring it's much easier to roll your own vision of how browserify should be using the underlying new libraries as a starting place.
Fair enough.
Only thing is, I have read the docs for the new API and I'm at a bit of a loss how to actually go about implementing my own middleware. In fact I can't even get a basic standalone example working using browserify.add() and browserify.bundle(), let alone as express middleware.
I could just continue to use v1 but as this project is still in development I'd like to keep my dependencies up to date. Any suggestions greatly appreciated.
I've got this far:
browserify = require 'browserify'
coffee = require 'coffee-script'
through = require 'through'
app.get '/client.js', (req, res) ->
b = browserify()
b.add './client.coffee'
b.transform (file) ->
write = (buf) ->
data += buf
end = ->
@queue coffee.compile(data)
@queue null
data = ''
return through(write, end)
b.bundle {}, (err, src) ->
res.send src
This works, except where I used to say require './module' it appears I now have to require './module.coffee'. This isn't really ideal, I don't want to have to update every require in my app.
I got this working:
browserify = require('browserify-middleware')
coffeeify = require('coffeeify')
express = require('express')
app = express()
browserify.settings('transform', [coffeeify])
app.get('/client.coffee', browserify('./client.coffee'));
app.listen(3230);
But it may not solve the needing to require("X.coffee") problem.
If you like grunt for development, I've developed this task : https://github.com/amiorin/grunt-watchify
It caches the dependencies and watches the filesystem. Because of this the build is very fast. You can use it with grunt-contrib-watch and grunt-contrib-connect or alone. You can find a Gruntfile.js example in the github repository.
If you don't use grunt, you can use the original watchify from @substack : https://github.com/substack/watchify
You can use coffee of course with the transform.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With