How to use PlugIns in PhoneGap on MAC OSX? I always mess with "TypeError" & "ReferenceError:"

Question

I am newbie in Phonegap. I did installed latest version of phoneGap app for MAC OSX. Below is version detail.MAC OSX PhoneGap App version detail :.

I did cerated New PhoneGap project. Now i wants to use cordova-plugin-qrcode in my PhoneGap project. I am confused it with few days.

I tried many steps for it, But having no success yet :(

I installed below with CLI:

• node -v -- v6.1.0
• phonegap -v -- 6.2.2
• npm -v -- 3.8.6
• cordova -v -- 6.1.1

I did add package.json file in my project directoey.Then i applied npm install qrcode-reader command on my Terminal. So node_modules folder created in my project directory. Displaying node_modules hierachy

Then i edited my config.xml file for add below PlugIn tag :

<plugin name="qrcode-reader" source="npm" spec="~0.1.1" />

Now, In my index.html i gave reference for plugin by add below script :

<script type="text/javascript" src="../node_modules/qrcode-reader/dist/browser.js"></script>

Now , In index.js, i did use it according to plugin suggest by below code :

$(document).ready(function(){
                  var QrCode = require('qrcode-reader');
                  var qr = new QrCode();
                  qr.callback = function(result) { console.log(result) }
                });

But whenever i run this project i got below error :

ReferenceError: require is not definedvar
var QrCode = require('qrcode-reader');

Though i did search on web till last few days, didn't get any success. Please help me with this. Correct me if there any conceptual mistakes.

Thanks !