I can't get Navigo (npm package) to work with Browserify and Gulp
My file structure (only including relevant stuff)
-index.html
-build
-js
-modules.js
-routing.js
-js
-modules.js
My bundle task in my gulpfile.js that uses browserify to be able to use Navigo in my actual routing.js file
gulp.task('bundlemods', function() {
var bundleMods = browserify('./js/modules.js')
.bundle()
.on('error', console.error)
.pipe(source('modules.js'))
.pipe(gulp.dest('./build/js'));
});
Which outputs the following modules.js file
Then in my routing.js I'm just trying to use Navigo as following:
function initRouting() {
var rootUrl = null;
var useHash = false;
var router = new Navigo(rootUrl, useHash);
router.on(function () {
runHome();
})
.resolve();
}
However, this yields the error Uncaught ReferenceError: Navigo is not defined
Also this is how my index.html file looks (relevant parts once again)
<!doctype html>
<html>
<head>
/* stuff */
</head>
<body>
<main>
/* stuff */
</main>
<script src="build/js/modules.js"></script>
<script src="build/js/routing.js"></script>
/* other scripts */
</body>
</html>
What is the reason it is still undefined? How do I actually use Navigo once I've used Browserify to generate my modules file? Does it have something to do with global scopes or something else I'm missing?
Of course browserify prevent variables to leak in global scope. If you want to have it gloabally available you should explicitly attach it to global scope:
Navigo = require('navigo');
not using var key will attach Navigo var to global scope and when you browserify it, your global will be window and Navigo is available from anywhere.
If you don't want pollute global scope then you could just require it in routing.js:
var Navigo = require('navigo');
function initRouting() {
var rootUrl = null;
var useHash = false;
var router = new Navigo(rootUrl, useHash);
router.on(function () {
runHome();
})
.resolve();
}
and then browserify this file instead.
Related
Hi i have used webpack to load my different modules into one bundle.js file , different function from this files are coming undefined in html but if call the same in my entry file ther working or making winndow.fnName .
here is my code
Test.js
var test=function(msg){
console.log(msg)}
module.exports=test;
lib.js
var lib=function(msg){console.log(msg)}
module.exports=lib;
Entire JS
var lib=require('./lib.js');
var test=require('./test.js');
index.html
test("test called");
lib("lib also called");
In output file created by webpack your code for Entire JS will look something like this:
/*****/
/* 0 */
/*****/ function(module, exports, __webpack_require__) {
'use strict';
var lib = __webpack_require__(1); // require('./lib.js')
var test = __webpack_require__(2); // require('./test.js');
/*****/ },
And since your variables lib and test are defined in function they aren't assign to window object.
You can workaround to export your lib and test to window object (I made this assumption based on that you want to use this variables in html file), by doing this:
var lib = require('./lib.js');
var test = require('./test.js');
window.lib = lib;
window.test = test;
I am trying to reference an html document in a "self containing" module. The module is comprised of two files:
app_root/node_module/my_module/main.js
app_root/node_module/my_module/header.html
main.js contains:
module.exports.test = function() {
var doc = fs.readFileSync('./header.html');
console.log(doc);
}
when i run my program in app_root/program.js
require('my_module').test();
When i start my app, the current working directory is set to app_root. When it tries to read ./header.html it breaks because the paths aren't correct.
How would I find directory of the installed module without knowing anything about what is running it?
You can use __dirname to refer to the path of the current script.
So main.js would become:
module.exports.test = function() {
var doc = fs.readFileSync(__dirname + '/header.html');
console.log(doc);
}
I'm building a gulpfile and have split up the tasks into different files. At runtime I'm requireing all tasks at once with require-dir: https://github.com/aseemk/requireDir.
The structure is identical to the gulpfile found here: https://github.com/greypants/gulp-starter:
// ./gulpfile.js
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true });
The tasks it imports look like this:
// ./gulp/tasks/browserSync.js
var browserSync = require('browser-sync');
var gulp = require('gulp');
var config = require('../config').browserSync;
gulp.task('browserSync', ['build'], function() {
browserSync(config);
});
So there's no module.exports or exports.something. Because of that, I'm wondering whether requireDir will still automatically scope the dependencies to each task. Does it scope my dependencies or am I putting everything in the global namespace when I do this?
You're not required to use module.exports in a module. If in your second file (gulp/tasks/browserSync) you were to do this:
var localValue = "bar";
globalValue = "foo";
// and we never touch module.exports
Then node will create 1 local value which is not exported and 1 value in the global namespace, but that shouldn't be surprising.
If you were to do this in gulpfile.js:
var baz = requireDir('./gulp/tasks', { recurse: true });
Then baz would be:
{
...
"browserSync": {}, // the default value of
... // `module.exports` is an object ( {} )
}
And when you do this in one of your require()'d files:
var gulp = require("gulp");
Then require will return a cached response, because it has already loaded /node_modules/gulp/ before in your main file.
So yes, since you're not making global values (everything is prefixed with var), everything is kept contained within the task files themselves.
I'm trying to include a javascript library (WaveSurfer) into my Angular app (Using Mean.io).
The problem is a warning appears into the console each time I run grunt :
In packages\tracks\public\services\tracks.js :
'WaveSurfer' is not defined.
Here is the code of my different files:
public/controllers/tracks.js
angular.module('mean').controller('PlayerController', ['$scope', 'Global', 'Tracks','myWaveSurfer',
function($scope, Global,Tracks, myWaveSurfer) {
$scope.global = Global;
//Player WaveSurfer
var wavesurfer = Object.create(myWaveSurfer);
wavesurfer.load('music.mp3');
public/services/tracks.js
angular.module('mean.tracks').factory('myWaveSurfer', function() {
return WaveSurfer; /*Warning here*/
});
The content of the wavesurfer.min.js looks like :
var WaveSurfer = {
defaultParams: {...}
init: function(params) {...}
...
}
I included correctly the library into config/assets.json so the library can be loaded.
I can see it on the Chrome console :
<script type="text/javascript" src="/bower_components/wavesurfer.js/build/wavesurfer.min.js"></script>
It only works with grunt --force but is there a solution to include properly this library without warning ?
Thanks in advance !
I assume you are inside the Node env.
Add this to your globals:
GLOBAL.WaveSurfer = {};
Or you could pull it in with require
GLOBAL.WaveSurfer = require('...');
If you require make sure the library module.exports the global object.
I want to use Browserify to bundle my files, but I then need to require one of the modules inside of my Browserify bundled bundle.js on the HTML page itself. This is currently not possible because there is no require function defined on the page.
It appears that the require function defined by browserify in bundle.js is inside of an IIFE, so I can't use that. Is it possible to throw this one out in place of a global require?
<script src="bundle.js"></script>
<script>
// Require the `app` module inside of `bundle.js`
var app = require('app');
app.start();
</script>
I need to do this because my app.start function requires some JSON is passed to it which can only be rendered by the server-side template.
N.B. I am using Browserify v2.
You can use -r to expose a global require() function for the files you specify:
x.js:
module.exports = function (n) { return n * 111 }
Console
$ browserify -r ./x.js > bundle.js
then in your html:
<script src="bundle.js"></script>
<script>
var x = require('./x.js');
console.log(x(3))
</script>
will print 333.
In your case, just do browserify -r app to expose require('app') to the external context.