I have the following index.js for an angular app. Even though the var statements are executed first, and all variables are successfully logged to the console before the IIFE is executed, they are undefined once it steps into the IIFE scope, with the exception of angular. Presumably angular is defined, because angular is a global object. I've seen window and jquery passed in the same way. I'm just wondering if there is a way for me to pass these locally declared objects to my app's main IIFE script like this? Did I do it wrong? Please help - I'm stumped.
var angular = require('angular'),
config = {
params: require('./config/params').config,
routes: require('./config/routes').config
},
x = {};
(function (angular, config, x) {
// *****angular is the only one of these parameters that is defined here
console.info(angular) // works
console.info(config) // undefined
console.info(x) // works
})(angular, config, x);
Updated
As a commenter pointed out, this is an issue with browserify. If I pass an object I declare literally, it works fine. Does anyone know why this is happening or how to fix it?
Here's my browserify command:
browserify -e -d src/index.js -p [minifyify --map sourcemap.json --output sourcemap.json --uglify] > build/index.js
(I removed the parameter value and shortened the paths for brevity.)
Related
There are several modules that are connected to app.js, for example the code that is inside:
var test = "TEST";
Here is my webpack.config:
module.exports = {
entry: './src/app.js',
output: {
filename: './dist/bundle.js'
}
};
The problem is that when I try to call my test variable in the developer console, I get an error:
Something about the scope, when I connect app.js directly - everything works, what's the problem and how to fix it?
Yes, this is a scope problem. There are two ways to fix this:
Instead of using var, use window.. (window.test = "TEST";)
Forget var (dosen't work in strict mode).test = "TEST";
Before the <script src="bundle.js"></script>, declare test (var test;) and then forget var.
Hope this is the anwser you're looking for.
The default functionality of webpack is to scope files that are passed in to its configuration, see documentation here: https://webpack.js.org/configuration/output/
This means that if you set a var in the file, then bundle it with webpack, it will become available only within its scope which, in this case, is the app.js file. If you open the file in your browser by itself, no scoping will take place hence why you don't have any issues when viewing directly.
If you need to access that test variable outside of the file, you'll have to turn it into a global variable, otherwise it will remain scoped within the bundle.js file created from webpack.
I'm trying to require the library Chart.js with Browserify (tbh it's development environment with gulp, browserify and some other stuff that I barely know how it works togheter):
'use strict';
var angular = require('angular');
require('angular-ui-router');
require('./templates');
require('./controllers/_index');
require('./services/_index');
require('./directives/_index');
window.gauge = require('./vendors/gauge');
//this is what i'm trying to require
window.chartjs = require('./vendors/chart');
angular.element(document).ready(function() {
var requires = [
'ui.router',
'templates',
'app.controllers',
'app.services',
'app.directives'
];
window.app = angular.module('app', requires);
angular.module('app').constant('AppSettings', require('./constants'));
angular.module('app').config(require('./routes'));
angular.module('app').config(require('./PostFix'));
angular.module('app').run(require('./on_run'));
angular.bootstrap(document, ['app']);
});
Tbh it did work well with window.gauge = require('./vendors/gauge'); but when I require vendors/chart.js it throws this error:
undefined // chart.js:4
Uncaught TypeError: Cannot read property 'Chart' of undefined // chart.js:4
And here is those lines in the chart.js file:
(function(){
"use strict";
console.log(this); <------ outputs the "undefined"
var root = this,
previous = root.Chart; <----- fails, as "root" doesn't exist
It's weird, because when I add chart.js using <script></script> that console.log(this) outputs the window object/scope, but when executed from browserify, it's undefined, that's why the chart.js fails.
I'm a total newb with browserify/node/gulp, but I tried different stuff such as:
Browserify-shim -> same error
Requiring the script in different ways, like trying to require it inside an object { }, trying to do a var whatever = new require('./vendors/chart') but failed miserably like a beheaded chicken trying to go to the bathroom.
I'm guessing that somehow I have to attach that script to an object or something so this would not be undefined when executed, but I'm failing to find the way.
I already solved it. The problem was a browserify transform called Babelify. I still don't know why Babel was doing that, but I didn't need it anyway so I just disabled it and that was it. Just posting it here in case it happens to someone else.
I'm using the expect.js library with my mocha unit tests. Currently, I'm requiring the library on the first line of each file, like this:
var expect = require('expect.js');
describe('something', function () {
it('should pass', function () {
expect(true).to.be(true); // works
});
});
If possible, I'd like to remove the boilerplate require code from the first line of each file, and have my unit tests magically know about expect. I thought I might be able to do this using the mocha.opts file:
--require ./node_modules/expect.js/index.js
But now I get the following error when running my test:
ReferenceError: expect is not defined
This seems to make sense - how can it know that the reference to expect in my tests refers to what is exported by the expect.js library?
The expect library is definitely getting loaded, as if I change the path to something non-existent then mocha says:
"Error: Cannot find module './does-not-exist.js'"
Is there any way to accomplish what I want? I'm running my tests from a gulp task if perhaps that could help.
You are requiring the module properly but as you figured out, the symbols that the module export won't automatically find themselves into the global space. You can remedy this with your own helper module.
Create test/helper.js:
var expect = require("expect.js")
global.expect = expect;
and set your test/mocha.opts to:
--require test/helper
While Louis's answer is spot on, in the end I solved this with a different approach by using karma and the karma-chai plugin:
Install:
npm install karma-chai --save-dev
Configure:
karma.set({
frameworks: ['mocha', 'chai']
// ...
});
Use:
describe('something', function () {
it('should pass', function () {
expect(true).to.be(true); // works
});
});
Thanks to Louis answer and a bit of fiddling around I sorted out my test environment references using mocha.opts. Here is the complete setup.
My project is a legacy JavaScript application with a lot of "plain" js files which I wish to reference both in an html file using script tags and using require for unit testing with mocha.
I am not certain that this is good practice but I am used to Mocha for unit testing in node project and was eager to use the same tool with minimal adaptation.
I found that exporting is easy:
class Foo{...}
class Bar{...}
if (typeof module !== 'undefined') module.exports = { Foo, Bar };
or
class Buzz{...}
if (typeof module !== 'undefined') module.exports = Buzz;
However, trying to use require in all the files was an issue as the browser would complain about variables being already declared even when enclosed in an if block such as:
if (typeof require !== 'undefined') {
var {Foo,Bar} = require('./foobar.js');
}
So I got rid of the require part in the files and set up a mocha.opts file in my test folder with this content. The paths are relative to the root folder:
--require test/mocha.opts.js
mocha.opts.js content. The paths are relative to the location of the file:
global.assert = require('assert');
global.Foo = require("../foobar.js").Foo;
global.Bar = require("../foobar.js").Bar;
global.Buzz = require("../buzz.js");
I'm trying to declare global variables for my applications that I'm writing using Node.js and CoffeeScript. So I'm declaring it in a common file that is concatenated to both applications after compilation. In that file I have for example:
root = exports ? this
root.myVariable = 300
So my first application is a HTML one. When I try to access this variable, for example by
console.log myVariable
There is no problem with it. But my other application is a server application lauched by node command and I cannot access that variable in that application. I tried:
console.log root.myVariable
console.log myVariable
With first line I'm getting 'undefined' printed (so it looks that root is defined) and with the second one, I'm getting ReferenceError - myVariable is undefined.
So how can I access this variable?
Here is an output code in Javascript that I get, I guess it might be helpful:
(function() {
var root, _ref;
root = (_ref = typeof module !== "undefined" && module !== null ? module.exports : void 0) != null ? _ref : this;
root.myVariable = 300;
}).call(this);
(function() {
console.log(root.myVariable);
console.log(myVariable);
}).call(this);
You're close, but you need to change things just a little bit
# config.coffee
module.exports =
foo: "bar"
hello: "world"
db:
user: alice
pass: password1
# lib/a.coffee
config = require "../config"
# lib/b.coffee
config = require "../config"
# lib/db.coffee
dbconfig = require("../config").db
Client and server JavaScript (or CoffeeScript) works differently. So, its a really difficult to write a module that'll work in both applications.
There is a lot of libraries to solve this problem, like RequireJS and Browserify.
But I have two simpler suggestions for your problem.
First one is to use JSON to store your global constants. On the server side you can simply require you JSON file:
root = require './config.json'
On the client side you may either parse it manually or serve it as pjson.
My second suggestion is to write really simple module that'll be compatible with both your applications. It'll look something like this:
root =
myVariable: 300
myOtherVariable: 400
modulte.exports = root if module?.parent?
This code should be compatible with both node.js require function and browser <script> tag.
Update:
I just reread you question and realized, that you've did almost as I suggested. But your code looks fine to me. You may try to use module.export instead of its alias exports, it may help:
root = modulte?.exports ? this
root.myVariable = 300
But, as I said, your code looks fine to me as well.
I've installed node-qunit (stable) from npm, but can't seem to get any tests working. My source files don't seem to be included in scope.
./source/myscript.js:
var myObj = {
a : true
}
./test/tests.js:
test("that a is true", function () {
ok(myObj.a);
});
./test/runner.js:
var runner = require('qunit');
runner.run({
code : './source/myscript.js',
tests : './test/tests.js'
});
./Makefile:
test :
<tab>node ./test/testrunner.js
.PHONY: install test
If I run make test, I get a 'ReferenceError: myObj is not defined' error. The source file does run, because it can throw errors. It just doesn't seem to be included in the global scope as it should. It doesn't work if I do it from the command line, as per the instructions in the node-qunit readme. Anyone have any idea how to get this working?
You're not exporting anything. Behind the scenes, node-qunit is using require to load the specified modules. To expose variables when a module is required, you have to add them to the exports object (or assign your own object to the exports variable)
(There's also a syntax error - ; in the object literal)
This works for me:
./source/myscript.js:
exports.myObj = {
a: true
}
./test/tests.js:
QUnit.module('tests')
test("that a is true", function () {
ok(myObj.a)
})
./test/runner.js:
var runner = require('qunit')
runner.run({
code : './source/myscript.js'
, tests : './test/tests.js'
})