Node.js

How to browserify IOTA node module kerl

1. Install browserify.
   Type: npm install -g browserify
   
   
2. Show all installed node modules and their versions.
   Type: npm -g ls --depth=0
   
   You should see:
   [email protected]
   
   
3. Show browserify help.
   Type: browserify --help
   
   
4. In the following example the node module "kerl" will be browserified.
   More information about this module see: https://github.com/iotaledger/kerl
   Kerl is a hashing function, based on Keccak, with conversion to ternary. It can be used in node.js or can be in the browser with browserify, which will be demonstrated below.
   
   
5. Create a project directory.
   Type: mkdir ~/demo
   
   
6. Install the node module kerl locally inside this folder.
   Type: cd ~/demo
   Type: git clone https://github.com/iotaledger/kerl
   
   The node module kerl is now installed in folder ~/demo/kerl/javascript
   I have installed kerl with latest commit 7ca94d3 on 22 Sep 2017.
   
   Now install all dependencies.
   Type: cd ~/demo/kerl/javascript
   Type: npm install
   
   To show all installed dependencies and their versions inside folder ~/demo/kerl/javascript, type:
   npm ls --depth=0
   
   It will show several errors such as "UNMET PEER DEPENDENCY bn.js@^4.11.8"
   npm no longer installs peer dependencies so you need to install them manually.
   
   Type: npm install bn.js@^4.11.8
   
   Do this for all "UNMET PEER DEPENDENCY" errors.
   Check if all errors are fixed, type: npm ls --depth=0
   
   
7. Create a file main.js inside this folder.
   Type: touch ~/demo/kerl/javascript/main.js
   
   
8. Enter the following lines in file main.js
   
   module.exports = {
       Kerl: require('./kerl'),
       Converter: require('./converter'),
       CryptoJS: require('crypto-js'),
   }
   
   Note 1:
   I have exported CryptoJS because I needed it my web application iota_seed_mnemonic_words.html.
   
   Note 2:
   The name Kerl, Converter and CryptoJS are arbitrary chosen, but it is important later when calling the module in the web page.
   
   
9. To browserify the node module kerl, the file main.js will be used as input. Browserify will go thru the main.js and will search all attached modules (= require()). Browserify will include the source of those "required" files in a new javascript file. The new javascript file can be given any name. In our example kerl_browser.js. The kerl_browser.js will contain the kerl and converter sources.
   
   Type: browserify main.js -s KerlJS > kerl_browser.js
   
   Note:
   By using the flag -s you assign the global variable name "KerlJS" to the module.
   
   
10. The browserify can also transform the code.
    
    Using flag -d
    Type: browserify main.js -s KerlJS -d > kerl_browser.js
    
    -d means include the source map information for easier debugging in the output kerl_browser.js. Source map information will help you for better error tracing during development proces, but it will make the output file much larger.
    
    To extract the source map information in a separate file:
    • Install node module exorcist: npm install -g exorcist
    • Type: browserify main.js -s KerlJS -d | exorcist kerl_browser.map.js > kerl_browser.js
    • Now two files are created: kerl_browser.js and kerl_browser.map.js
    
    
11. An example how to use the kerl_browser.js inside a web page see kerl_example.html.
    
    
12. Copy the files kerl_example.html and kerl_browser.js to a webserver.
    Open a browser and access the kerl_example.html file.