using-npm-on-the-client-side

[Petronel MALUTAN (p.m)]

Hi Kyle

I was tried to use guidelines you provided in http://dontkry.com/posts/code/using-npm-on-the-client-side.html article on a Laravel website.
I am trying to use node_modules inside my web site, and by chance I did thought to ask you maybe you'll clarify me a bit:
I did created index.js with:

var strip_js = require('./public/stripjs.js');
var parsed = strip_js('<h1 onclick="whatever();">Start</h1><script src="http://laravel-petro.dev/bundle.js"></script><h1>End</h1>');
console.log(parsed);

I did also

browserify index.js > public/bundle.js    

and in my view

<script src="{{ asset('bundle.js') }}"></script>

In the web page I see first log inside the index.js correctly stripped js tags

<h1>Start</h1><h1>End</h1>

but second log from inside a script loaded inside the same above view which is saying:

$(document).ready(function () {
    console.log(strip_js);

the output is:

index.js:15 Uncaught ReferenceError: strip_js is not defined
    at HTMLDocument.<anonymous> (index.js:15)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

Any ideea what I do wrong ? Or strip_js should not be visible in my own js ? The order is bundle.js called first and only after my.js file

With kind regard
Petronel

[Kyle Robinson Young]

Every file bundled with Browserify will be contained in a closure or in other words, all the variables you create in a file is only accessible to that file. This is to prevent your variables from leaking out and affecting other libraries.

There are lots of ways to expose a variable though. A good pattern is to var strip_js = require('./public/stripjs.js'); in every location that needs that variable.

But if you're throwing in another script tag that isn't bundled by Browserify, you can expose that variable globally by adding it to window:

var strip_js = window.strip_js = require('./public/stripjs.js');

Now it will be available everywhere. But just keep in mind, globals can quickly become your enemy and avoiding that pattern is one of the primary reasons to use a module bundler like Browserify. So I recommend bundling all files with Browserify instead of using globals.