Skip to content
Allow using sync nodejs require('module') in browser.
CoffeeScript JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A experimental lib allow you use nodejs style sync require in browser without precompile ... written in coffee.


  • do what common module do.
  • localStorage cache support
  • flexible version support
  • source map support, you will not notice any difference of your code when debug, just like directly include them in the html.
  • friendly with manifest.


All the example script can be found at /example.

Best practice

here introduce the best practice of leaf-require.

first create a config file using leafjs-require from npm.

npm install -g leafjs-util
# print help for leafjs-require
leafjs-require -h
# see the script below at ./example/best-practice/
# create the config file
read version < ./version
 [ -z "$version" ] && version=0
# everytime after creating require.json, version bumps.
version=$((version + 1))
echo $version > ./version
leafjs-require ./js -r "./js" --set-version "0.0.0."$version -o ./require.json --excludes ./js/init.js,./js/lib/leaf-require.js
<!doctype html>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="../leaf-require.js"></script>
    <script type="text/javascript" src="./init.js"></script>

Then we write a to setup .

loader = new LeafRequire.BestPractice({
    # the first module to run after load

require.json may looks like below, // is invalid for json, so don't add them to your json file

    "name": "leaf-require",
    "version": "0.0.1",
    "js": {
        "root": "./test/",  // request root, togather with the file path we generate the request url
        "files": [
                //remote file path and local require path as well
                "path": "a.js",
                // we will try to load scripts from localStorage
                "hash": "2859bc"
                "path": "b.js",
                "hash": "24cbd7"
                "path": "c.js",
                "hash": "472654"
                "path": "main.js",
                "hash": "413b74"
                "path": "rootA.js",
                "hash": "8285bf"
                "path": "sub/subA.js",
                "hash": "62a110"
                "path": "sub/subB.js",
                "hash": "4a748f"


You can easily generate this config by using leafjs-util. You can generate the above codes at example/ directory of this repo.

sudo npm install -g leafjs-util

leafjs-require -h   # print the help message

# The config will be print to stdout.
# You can also use -o option to specify a file to store it.
# Note, if -o with an exists file, leafjs-require 
# will try to inherit it's property like debug and cache.
# You can give a -f option to force overwrite and get rid of this behavior.

difference with commonjs module

require("a.js") will be /{root}/{requiringScriptPath}/a.js

require("/a.js") will be /{root}/a.js

require("/a") will be /{root}/a or then /{root}/a.js

useful features in BestPractice

new BestPractive {
        console.error "give user some feedback to let them try again later"
        console.log ask user to refresh the page"
        callback confirm "update detected, shall we reload now?"
    # ignore cache completely and compile source map.
    # you can also only enable source map
    # use a prefix to avoid cache key conflict in `localStorage`


Testcase require nodejs and grunt

npm install
npm test

and open http://localhost:3000/test/index.html to see the result.

You can’t perform that action at this time.