Search code examples
javascriptnode.jsbrowserifyuglifyjsuglifyjs2

how to serve node.js code for browsers with automatic browserify+uglify

I have some plain js code for node.js with 5 files:

+--compress.js
+--util
     +--vector.js
     +--map.js
     +--set.js
     +--util.js

then compress.js requires set.js and util.js, set.js requires map.js which in turn requires vector.js and util.js Now I want to serve this code for browsers from my own simple web server (express app). What kind of options do I have? I'm kind of new, so I have some basic questions and not so basic ones. I want to know about possible options if I want to include compress.js from my html page. As I understand, I can modify code to be compatible with node.js and browsers. What do I use for that, require-js? How is this called in nodejs speak when code is compatible with server and client side? Another option is to use browserify and to generate a version of compress.js that can be used client side.

Then, there is uglify-js that can minify that compress.js file (and create corresponding map file), right?

Now my goal is to keep my js code unmodified and be accessible from the browser. For that, as I understand, I'd have to do server side code that would automatically browserify these files (e.g. concatenate them in the right order) and pass result through uglify and serve result on the fly. From my understanding, this way if I include only one file compress.js and try to debug that code in chrome I'll see in chrome debugger as if I included all of these files in chrome as-is with nodejs style way to include dependencies. Am I right, and what tools/libs do I need to use to achieve that?

Next step is caching results of that on-the-fly conversion in such a way so that if I modify any of the included files (e.g. if I edit them on the live server or completely replace with modified version) all dependent files would automatically need to be regenerated. This might happen on next GET of compress.js (e.g. internally I'd need to remember in my app dependency graph and verify it on each GET /compress.js) or, alternatively, I'd need to add some sort of filesystem/os event hook that would fire an event in my app when any of the files is changed and that event would trigger rebuild browserified+uglified version of my compress.js (or any other files). Are there any existing options to do something like that in node.js or I'd need to implement all that myself (and in that case what libs tools should I look into?)

Solution

  • Well I will try to give you a very basic idea. I would create a new folder with name "public". Inside public also create two folders: something like "assets" and "dist". Assets will contain uncompressed files. You would put compress.js into it. Dist will contain compressed files. You dont have them for now.

    Now create app.js. Inside app.js include http://expressjs.com/ or http://koajs.com/. I personally use koa, since it is ES6 based. Now in your app use module for serving static files. This module gonna also take care about caching. For koa for example https://github.com/koajs/static. Then whole app will be 

    var koa = require('koa');
var app = koa();
var static = require('koa-static');
app.use(static("/path_to_your_project/public/dist"));

app.listen(3000);

    Now last piece. You will need http://gulpjs.com/ OR http://gruntjs.com/ to compress your js assets into minified version. Also use https://github.com/deepak1556/gulp-browserify to broserify your modules. Task will be something like (very approx):

    gulp.task('jsassets', function(){
    return gulp.src(['public/assets/*'])
        .pipe(browserify({ insertGlobals : true, debug : !gulp.env.production }))
        .pipe(uglify())
        .pipe(gulp.dest('public/dist'))
});

    Then create index.html in dist. Include your result file there as usual javascript. Run your app.js as node app.js The open browser at localhost:3000. Should see your code executed in browser. Ididnt test this, so debugging is up to you.

    Profit.