How to easily modularize Javascript like C/C++

Question

I have a large project entirely built in JavaScript, I have an ordered and "inside modularized" 5k lines .js file that's the engine of whole site.

Now I have to make other site (extension of this one) in which I'll have to repeat a lot of code, my question is, I've seen lot of possibilities using Browserify, CommonJS, etc. But that's not what I'm searching, I'm searching modularize JavaScript just like C/C++, making #includes with the files of the functions or functionalities and reuse code like that. I'm already doing this including other JS files in HTML, but that JS files are only variables and some arrays, not functionality of the site.

I use jQuery too, in that large 5k lines .js file I have almost all inside the jQuery document.ready event, that's bringing trouble too, because I'll have to make a document.ready event for every file?

I need some orientation please

Why is Browserify not what you want? It lets you define your code in modules and then include them where required. if you want an alternative, maybe [RequireJS](http://requirejs.org/)? — nnnnnn, Oct 05 '16 at 02:47

Soviut · Accepted Answer · 2016-10-05T04:06:05.253

CommonJS will let you require() modules, this is the foundation for the NodeJS module system. Browserify simplifies this implementation for use in browsers and even allows you to require Node modules (as long as they don't depend on binaries, the file system and other features a browser doesn't support).

var lib = require('someLibrary');

ECMAScript6 (aka: ES6) brings imports to javascript. While browsers don't fully support ES6 yet, you can use Babel to "transpile" ES6 to ES5. This ES5 will take advantage of CommonJS to replicate the importing behaviour.

import { SomeClass, someFunction, someValue } from 'some/library';

In all cases, your javascript will require some kind of pre-processing to transpile it into javscript a browser can understand. This usually means taking all your separate source files and bundling them into a single minified bundle file. This reduces the number of requests the browser has to make.

To handle all this transpiling and bundling, several popular build systems exist including Grunt, Gulp and Webpack. Grunt is older and typically slower because of it's configuration-based design. Gulp is simpler and faster because it relies on NodeJS streams. Webpack is the newest and most powerful, but at the cost of complexity. For what you're hoping to do, I'd recommend looking at Webpack since it can modularize not only your javascript but your stylesheets and other web assets.

http://webpack.github.io/docs/tutorials/getting-started/

Useful information to start to read & investigate. Thank you. — Nicolas Harrinston, Oct 05 '16 at 03:03

score 1 · Answer 2 · answered Oct 05 '16 at 02:49

1

Use webpack to bundle your code http://webpack.github.io/docs/tutorials/getting-started/

answered Oct 05 '16 at 02:49

Zane Hitchcox

936
1
9
23

How to easily modularize Javascript like C/C++

2 Answers2