The bearcat Blog

browserify with asynchronous script loading​

Jan 2, 2015

Overview

browserify is a great project that makes npm everywhere.

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

It is really cool since developers can now use modules from npm which is growing extremely fast, more and more front-end libraries, tools, frameworks are now supporting npm, it is a great advantage. browserify makes it real for front-end developers to use npm modules without much pains.

browserify uses the same module system as node, it is called node-flavored CommonJS modules. It uses require, exports to organize modules, and uses package.json, node_modules to make module reuseable.

therefore, you write node-style modular codes, you can test in node, then if you want to use in the browser, you bundle it through browserify command:

1
browserify hello.js > bundle.js

now bundle.js contains all the javascript that hello.js needs to work. To use in the browser, just plop it into a single script tag in some html:

1
2
3
4
5
<html>
<body>
<script src="bundle.js"></script>
</body>
</html>

as you see, browserify bundles all modular codes in a build process, then it uses the final bundle file, not your original source codes. So when bundle.js file loaded in the browser, all your modular codes are loaded and mapped so that node-style CommonJS require can be worked in the browser. The build process that is always needed, is a problem that not only browserify faces, other browser CommonJS module system(like component, duo, webpack) also faces.

... continue reading

asynchronous frontend dependency management without AMD

Dec 24, 2014

Overview

Frontend dependency management is always the discussion point, people have a lot of to say. The key reason for this is that javaScript language itself does not provide module like support, it really sucks developers.

For years ago, developers used to use <script> tag to write code, however when the page codes grows, the maintainability will be harder and harder. Then, with the arise of nodejs, CommonJS brings up using require, exports to resolve modules. It seems really nice when using in nodejs, however, when it meets browser, it works not quite well. The reason is simply that browser does not support synchronous require, it can not load a script from file I/O. Then AMD comes up a specification used well for browser, as the AMD says:

... continue reading