Repository navigation
using-npm-on-the-client-side #16
Description
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
Activity
shama commentedon May 30, 2017
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: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.