I've got RequireJS installed in my node_modules directory, and my intern.json file has:
"node": {
"loader": "requirejs"
},
However, when I run "npx intern", it fails with:
Error: Loader script requirejs did not register a loader callback
at
at
Is there a way to get Intern 4 to use RequireJS?
To use a particular loader, Intern needs a 'loader' script that will actually initialize the loader and handle loading modules with it. Intern includes loader scripts for several loaders, such as Dojo 1, Dojo, and SystemJS. It doesn't include a loader script for RequireJS, but you can add one fairly easily.
A simple script for RequireJS would look like:
// your_project/reqjs.js
intern.registerLoader(function(options) {
function initLoader(requirejs) {
// Configure requireJS -- use options passed in through the intern.json
// config, and add anything else
requirejs.config(options);
// This is the function Intern will actually call to load modules
return function(modules) {
return new Promise(function(resolve, reject) {
requirejs(modules, function() {
resolve();
}, function(error) {
reject(error);
});
});
};
};
if (typeof window !== 'undefined') {
return intern
.loadScript('node_modules/requirejs/require.js')
.then(function() {
return initLoader(window.requirejs);
});
} else {
return initLoader(require('requirejs'));
}
});
Note that Intern doesn't use loaders to actually retrieve modules for its own use (which is why the resolve call above doesn't include the loaded modules), it only uses them to load test suites. The suites themselves may use the loader normally.
You would use the script in your config with
"node": {
"loader": "./reqjs.js"
}
Related
I'm trying to bring the Underscore.String library in to a Require.js project. The library is setup to support AMD, with the following code:
} else if (typeof define === 'function' && define.amd) {
// Register as a named module with AMD.
define('underscore.string', [], function() {
return _s;
});
But I have a problem: I don't keep the library in my root path, I keep it in "ext/underscore.string". This seems to make it impossible to require the library.
I have tried requiring both "ext/underscore.string" and "underscore.string", with and without defining a path (of "underscore.string": "ext/underscore.string"). When I don't have a path, and I require "underscore.string" the file (unsurprisingly) doesn't load, and in all other cases the file loads but the library doesn't get defined.
If I try to reference the library afterwards I get:
Error: Module name "underscore.string" has not been loaded yet for
context:
... even if I do so immediately after the define line (in the code above)! In other words, if I change the code to
define('underscore.string', [], function() {
return _s;
});
console.log(require('underscore.string'))
Require tells me that "underscore.string" hasn't been loaded yet!
Can anyone help me figure out how I can bring this library in to my codebase?
In your require configuration do:
var require = {
...
map: {
"*": {
"underscore.string": "path/to/file/disregarding/baseUrl"
}
}
};
NOTE: The path to file should include the baseUrl, so in your case and assuming baseUrl="scripts", it would be something like:
"scripts/ext/underscore.string.js"
NOTE 2: It needs the .js extension, i.e. it is exact file name.
I'm struggling to get jasmine along with it's ConsoleReporter working within a backbone application using require.js. I have seen Check Backbone/requireJs project with Jasmine but that hardcodes the libraries (which is something that I'd prefer to avoid).
In my backbone application I have created test function (I'd prefer to keep it there to test interactions between models):
test = function () {
require(['js/test/run'], function () {});
}
and run.js (I get the console.log "should" fine, but don't get anything to do with the failed test):
define(["jasmine", "jasmineConsoleReporter"],
function (jasmine, ConsoleReporter) {
describe('hello', function () {
it('should be true', function () {
console.log('should');
expect(true).toEqual(true);
});
});
jasmine.getEnv().addReporter(new ConsoleReporter(console.log));
jasmine.getEnv().execute();
//return tests;
}
);
The shim for jasmine and jasmineConsoleReporter are:
jasmine: {
exports: "jasmine"
},
jasmineConsoleReporter: {
deps: ['jasmine'],
exports: "getJasmineRequireObj"
}
And the source for jasmineConsoleReporter can be found at https://github.com/pivotal/jasmine/blob/master/src/console/console.js
I'm guessing that the console reporter isn't being constructed correctly because I get the 'should' in the console and nothing else.
Try my setup:
https://github.com/wojciechszela/jasmine-requirejs-jscover
Adding backbone to it (or any other lib) should be easy.
I have RequireJS implemented fine, and a Grunt based build process which is optimizing the all the JS files app into one file via r.js which is also working fine. All my app files are concatenated into one big JS file for efficient production deployment.
Now I'm having the following requirements:
I need to write a plugin for requirejs, that will not load(not include the file) into the optimized file in the build process, but will required on demand:
Meaning in my code I'll have:
var myObj = require("myplugIn!jsFile");
So in the end when this line runs, it will runs in 2 options:
on build process, the file is not included in the optimized file
The application is running, it will be request the file on demand.
I wrote the following plugin, but is not working:
define(function () {
"use strict";
return {
load : function (name, req, onload, config) {
// we go inside here we are running the application not in build process
if (!config.isBuild) {
req([name], function () {
onload(arguments[0]);
});
}
}
};
});
What I'm missing here.
In your build configuration you can exclude files that you don't want to bundle. They will still be loaded on demand when needed. You may also do something like this:
define(function (){
// module code...
if (condition){
require(['mymodule'], function () {
// execute when mymodule has loaded.
});
}
}):
This way mymodule will be loaded only if condition is met. And only once, if you use same module dependency elsewhere it will return loaded module.
It was more simpler that I though, if helps someone, I'm posting the solution, I create a plugin , that in build process return nothing and in run time, returns the required file, hope helps someone.
define(function () {
"use strict";
return {
load : function (name, req, onload, config) {
if (config.isBuild) {
onload(null);
} else {
req([name], function () {
onload(arguments[0]);
});
}
}
};
});
I am trying to test Intern to see if it would be a good fit for a testing framework. I am trying to test the following code in Intern.
var HelloWorld;
HelloWorld = (function () {
function HelloWorld (name) {
this.name = name || "N/A";
}
HelloWorld.prototype.printHello = function() {
console.log('Hello, ' + this.name);
};
HelloWorld.prototype.changeName = function(name) {
if (name === null || name === undefined) {
throw new Error('Name is required');
}
this.name = name;
};
return HelloWorld;
})();
exports = module.exports = HelloWorld;
The file is located in 'js-test-projects/node/lib/HelloWorld.js' and Intern is located at 'js-test-projects/intern'. I am using the 1.0.0 branch of Intern. Whenever I try to include the file and run the test I don't get any output after "Defaulting to console reporter". Here is the test file.
define([
'intern!tdd',
'intern/chai!assert',
'dojo/node!../lib/HelloWorld'
], function (tdd, assert, HelloWorld) {
console.log(HelloWorld);
});
1. Assuming the following directory structure (based on the question):
js-test-projects/
node/
lib/
HelloWorld.js - `HelloWorld` Node module
tests/
HelloWorld.js - Tests for `HelloWorld`
intern.js - Intern configuration file
intern/
2. Your Intern configuration file should contain info on the node package and any suites to run:
// ...
// Configuration options for the module loader
loader: {
// Packages that should be registered with the loader in each testing environment
packages: [ 'node' ]
},
// Non-functional test suite(s) to run
suites: [ 'node/tests/HelloWorld' ]
// ...
3. Your test file should load HelloWorld using Intern's version of Dojo, like this:
define([
'intern!tdd',
'intern/chai!assert',
'intern/dojo/node!./node/lib/HelloWorld.js'
], function (tdd, assert, HelloWorld) {
console.log(HelloWorld);
});
Note: You don't have to use Intern's version of Dojo to load the HelloWorld node module in this AMD test, it is just a convenient way to do so. If you have some other AMD plugin that node-requires a node module, that's perfectly fine.
4. Finally, to run the tests in a Node.js environment, use Intern's client.js node runner by issuing the following command from within the intern directory:
node client.js config=node/tests/intern
I'm trying to use typescript with angularjs in the client-side.
I found if I use external modules, the generated js won't be run in browser.
controllers.ts
/// <reference path="./libs/underscore.d.ts"/>
import _ = module("underscore");
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
The generated js will be:
var _ = require("underscore")
var test;
(function (test) {
var Ctrl = (function () {
function Ctrl($scope) {
$scope.name = "Freewind";
_.each($scope.name, function (item) {
});
}
return Ctrl;
})();
test.Ctrl = Ctrl;
})(test || (test = {}));
Which can't run correctly. But if I remove the module("underscore") part, it will be OK.
Since I have add underscore.js in the HTML, I think it should be something wrong with the require() method. How to fix it?
There are two ways to load stuff in your HTML pages.
Bundling
The first one is to manually include all the script files in your page. You might run some kind of pre-release step to merge and minify your code - but you're taking responsibility for that instead of leaving it to the code to do. This is generally called bundling.
In the case on bundling, you only use references in your TypeScript code (not imports), like this:
/// <reference path="./libs/underscore.d.ts"/>
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
Module loading
If you want to use a module loader, which for The Web is typically RequireJS, you can load External Modules using the import statement. Normally you wouldn't need the reference in this case...
import _ = module("./libs/underscore");
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
RequireJS with non-modules
There is a third scenario, which is quite common. If you intend to import something that isn't an External Module (such as jQuery, but underscore may also fit this pattern), you are better off using a reference and a manual call to RequireJS.
RequireJS will load the dependency for you, so you would wrap your main program with it (which would probably be in a separate file such as app.ts.
///<reference path="./libs/require.d.ts" />
///<reference path="./libs/underscore.d.ts" />
module test {
export class Ctrl {
constructor($scope:any) {
$scope.name = "Freewind";
_.each($scope.name, function(item) {});
}
}
}
require(['underscore'], function (_) {
var ctrl = new test.Crtl({});
});
You can also use require.config to specify the path to underscore in your application.
require.config({
paths: {
"underscore": "libs/underscore"
}
});
When you use require, you asserting that underscore is exported as a loadable module. This further assumes that you are using some sort of module loader system (TypeScript currently supports AMD and CommonJS modules). Since you aren't using a module system, and underscore is simply available in global scope, you can use a /// reference to tell TypeScript that Underscore is available in global scope. Put the following at the top of your file:
/// <reference path="./libs/underscore.d.ts">
And you should be good to go!