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;
Related
I'm using 'yet-another-webpack-es6-starterkit' as my build kit. Unmodified, no changed package.json settings.
The code works well on its own but I need to export a function in the main index.js file so the function can be used by other js files in a node environment.
This is the example code I used for how to export:
In Node.js, how do I "include" functions from my other files?
I created a test function called 'test' in the index.js.
module.exports = {
test: function () {
var r = 42;
return r;
}
};
But the external file cannot find the function. It doesn't seem to be visible from outside the js file.
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.
I have a javascript file that I place in the client/lib folder within my Meteor app. As the file grew bigger, I decided to split it into 3 files and define an object 'App' in the global namespace in order for the 3 files to share the data.
Each file starts with
var app = app || {};
(function () {
'use strict';
app.object1 = {
This way, file2 and file3 can still use app.object1, and so on.
The problem is when Meteor loads the files, it seems to automatically wraps it with function(){}, and this makes app.object1 not accessible from files loaded subsequently.
(function(){
var app = app || {};
(function () {
'use strict';
app.object1 = {
What is the best way to avoid this issue? Thanks.
EDIT: I referred to this posting [Link:][1]Global variables in Meteor which suggests defining the variable without "var". I replaced the code in file1 to app = {}, but my app is now crashing in file2 in the following line of code, with the message from the Meteor console pasted below.
app.ALL_LIST = 'all'
=> Your application is crashing. Waiting for file change.
ReferenceError: app is not defined
omit var in your variable declaration ;) then it will be scoped globally.
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.