I just started using RequireJS. I tried a simple code but one way works but the other doesn't.
folder "script" has "main.js", "module.js", "require.js"
<script data-main="script/main.js" src="script/require.js"></script>
in main.js
requirejs( ['module'], function( mod ) {
mod.sayHello();
} );
in module.js:
define( {
name : "value",
sayHello : function() {
alert( "Hello" );
},
sayBye : function() {
alert( "Bye" );
}
} );
I expect baseUrl to be "script" as mentioned in here:
http://requirejs.org/docs/api.html#jsfiles
The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page.
So, I thought there would be no problem, but doesn't mod.sayHello() nor sayBye() and console.log( mod.name ) = undefined.
I tried console.log( mod ) and it prints something like this:
Object {id: "_#r6", uri: "script/_#r6.js", exports: Object}
When I use ["script/module.js"] instead of ["module"], console.log( mod ) prints like the following:
Object {name: "value"}
name: "value"
sayBye: ()
sayHello: ()
__proto__: Object
and mod.sayHello(), mod.sayBye(), mod.name all works.
including the following in the beginning of main.js is the same:
requirejs.config( {
baseUrl: "script"
} );
What am I doing wrong... Please help.
Use a different name than module for your module. For one thing, it is a terribly uninformative name, but the module named module is a special module for RequireJS. It is a module that gives information about the module you are currently in. For instance if foo.js contains this code:
define(['module'], function (module) {
console.log(module.id);
});
and this file is loaded when you request the module named foo, then console.log will show "foo" on the console.
The documentation does not highlight the existence of module but it talks about it when explaining what the configuration option config does. Because you get to access the config of your module through module.config().
The reason requiring "script/module.js" works is because when you do this you require a module named script/module.js rather than module.
I continued reading the documentation:
http://requirejs.org/docs/api.html
and it led to a github that has information about this:
https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#magic
It turns out that "module" is a kind of "magic modules" along as "require", "export".
And "module" ... :
gives you information about the module ID and location of the current module
https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
Related
I'm currently struggling with making a Jest custom matcher work in VSCode with typescript.
I wrote a custom matchers file like the following (I've simplified the test for brevity reasons):
export {}
declare global {
namespace jest {
interface Matchers<R, T = {}> {
toSucceed(): R
}
}
}
function toSucceed(this: jest.MatcherContext, received: Result<any>): any {
return {
pass: true,
message: () => 'Custom matcher message',
}
}
expect.extend({
toSucceed,
})
I included this file path in my jest.config.ts under the tag setupFilesAfterEnv.
Then I wrote tests like:
it('should pass', () => {
expect(foo()).toSucced()
})
All this configuration works fine, but I still get a VSCode inline error:
Property 'toSucceed' does not exist on type 'JestMatchers<any>'
JestMatchers is a type definition inside the #types/jest root, since it is a type I cannot augment it directly.
Have anyone experienced any similar problem?
I encountered a similar error message when the namespace declaration of "interface Matchers" was incorrect. After fixing that, a custom matcher appeared in jestMatchers, too. Matchers and jestMatchers are connected.
Your code works fine for me—except for the undefined Result<any>—so you can try to directly import in test and see if Visual Studio Code can understand the declaration:
import "./toSucceed";
If direct import works for you, I would guess that there's a problem with the jest extension which helps Visual Studio Code understand jest.config.
Did you remember to add the type definitions to your tsconfig?
For me it works fine when I put the type definition in a d.ts file at the root level, and add that path to the "include" option in my tsconfig:
{
// Some other config
"include": [
"custom-matchers.d.ts"
]
}
Haven't tested with your custom matcher specifically, but I had a similar issue that I resolved like this.
So your custom-matchers.d.ts would be:
export {}
declare global {
namespace jest {
interface Matchers<R, T = {}> {
toSucceed(): R
}
}
}
I am using steve sanderson's yeoman knockout scaffolding described here.
However I have one issue which is if I decide to create folders for different types of modules, and If I then want to inject one of these modules into my components using folder name conventions then I have to use a very verbose path resolution like "../../services/service".
define(["knockout", "text!./home.html","../../services/service"], function(ko, homeTemplate, service) {
function HomeViewModel(route) {
this.message = ko.observable('Welcome to App!');
}
HomeViewModel.prototype.doSomething = function() {
this.message('You invoked doSomething() on the viewmodel.');
};
return { viewModel: HomeViewModel, template: homeTemplate };
});
I am wondering if there is a better way to do this. For example just being able to use folder name and file name like "services/service"
The paths configuration is your answer (ref). In your configuration do:
require.config({
// ...
paths: {
'services': 'path/to/services/folder'
},
// ...
})
Now you can require the path/to/services/folder/myservice.js module from any other module as:
define(['services/myservice'], function(myservice) {
// ...
});
I'm not sure about the use of "exports" on shim config, following the example on the requireJS API, I can use Backbone (B in capital letter) to export it to a global scope.
This means that it will be a window object property.
But I realized that I'm forced to use that name, and I can't export it by other reference name, ie: "MyGlobalBackbone"
require.config({
paths: {
backboneAlias:'backbone'
},
shim : {
backboneAlias : {
deps : [ 'underscore', 'jquery-1.9.1' ],
exports : 'MyGlobalBackbone'
}
}
});
require(['backboneAlias'],function(backboneAsAliasDependency){
console.log(backboneAsAliasDependency);//Loaded Ok
console.log(MyGlobalBackbone); //Uncaught ReferenceError: MyGlobalBackbone is not defined
});
This code only works if I use "Backbone" instead of "MyGlobalBackbone"...
Actually you got it the other way around: shimming doesn't export a variable to global scope, it imports it FROM the global scope. The name ("Backbone") was set by Backbone's author, and this is the part you're explaining to RequireJS in shim config element.
See it in the API:
http://requirejs.org/docs/api.html#config-shim
Look at this sentence:
//Once loaded, use the global 'Backbone' as the
//module value.
Let's see it in that way, you will understand it:
//Once loaded, use a global variable 'Backbone' that defined by the backbone vendor as the
//module value.
You should use map to make an alias.
require.config({
paths: {
...
},
shim : {
...
},
map: {
'*': {
'MyGlobalBackbone': 'Backbone'
}
}
});
This will allow you to use MyGlobalBackbone instead of Backbone for all (*) modules.
After another long research, sth comes out :-) It seems the problem is about the function "getObjectByName". It can not work well with requireJS(ADM). Currently, I have to setup a globel var to fix the problem. I am sure there must be have better solution.
Here is my temp soluton:
(1) setup a global var and setup the search model scope to the global ("APP")
var APP = {};
define(['backbone-relational'], function(){
Backbone.Relational.store.addModelScope(APP);
})
(2) export your relation model to the global
APP.YourRelationalModel = YourRelationModel;
It works, not good though... I'm really looking forward to a better answer. Thanks.
//------------
test versions:
1.Backbone-Relational 0.8.5
2.Backbone 1.0.0 and Underscore 1.4.4
3.JQuery 1.8.3
4.RequireJS 2.1.5
Code is very simple: (or see https://github.com/bighammer/test_relational_amd.git)
require.config({
paths : {
js : 'js',
jquery : 'js/jquery-1.8.3',
underscore : 'js/underscore',
backbone : 'js/backbone',
'backbone-relational' : 'js/backbone-relational'
},
shim : {
underscore : {
exports : '_'
},
backbone : {
deps : ['underscore', 'jquery'],
exports : 'Backbone'
},
'backbone-relational' : {
deps: ['backbone']
}
}
});
define(['backbone', 'backbone-relational'], function (Backbone) {
var Child = Backbone.RelationalModel.extend();
var Parent = Backbone.RelationalModel.extend({
relations : [
{
key : 'child',
type : Backbone.HasOne,
relatedModel : 'Child'
}
]
});
var test = new Parent();
});
save above code in main.js and included in index.html as follows:
It doesn't work. There is warning message:
Relation=child: missing model, key or relatedModel (function (){ return parent.apply(this, arguments); }, "child", undefined).
I read the source code of backbone-relational and know there is something wrong with the namespace. Relational-Backbone cannot find the relatedModel defined in "Parent" (i.e. cannot find releatedMode:"Child"). I failed to find the solution to fix this due to my limited knowledge of javascript :-)
Can anyone help me with this?
Before I asked my question, I studied the following solutions:
Backbone.RelationalModel using requireJs
Can't get Backbone-relational to work with AMD (RequireJS)
Loading Backbone.Relational using Use! plugin
None of them worked in this case.
You don't have to reference relatedModel by string, you can reference it directly, so instead of relatedModel: 'Child', just use: relatedModel: Child.
And since you are using requireJS, you can reference model from other file easily.
define(['backbone', 'models/child', 'backbone-relational'], function (Backbone, Child) {
var Parent = Backbone.RelationalModel.extend({
relations : [{
key : 'child',
type : Backbone.HasOne,
relatedModel : Child
}]
});
var test = new Parent();
});
The above solution didn't apply to me. I am gradually moving code out of Rails Asset Pipeline (not RequireJS/AMD/CommonJS/anything) into Webpack, starting with dependencies. When I moved requiring backbone-relational into Webpack bundle preparation by my models and relation definitions were still in Rails Asset Pipeline, I started getting a lot of unexplained Relation=child: missing model, key or relatedModel (function (){ return parent.apply(this, arguments); }, "child", undefined).
In my case, the solution ended up being quite simple, despite taking a long time to discover on my part:
// In a Webpack module, later included into Rails Asset Pipeline
// temporarily to facilitate migration
require('expose?Backbone!backbone') // Exposing just for migration
require('backbone-relational')
Backbone.Relational.store.addModelScope(window)
backbone-relational by default uses its global scope to resolve string-based relatedModels but since it was required without a real global scope, the solution is simply to pass that in using addModelScope so it can search that scope for the specified models.
I'm trying to define a global object that i can reference across all of my modules. however, in the modules, i am unable to reference my path, and it's saying that "g" does not exist.
In main1.js, i have this:
requirejs.config({
paths: {
Underscore: 'lib/underscore/1.3.3/underscore.min',
Backbone: 'lib/backbone/0.9.2/backbone.min',
Globals: 'lib/backbone/ globalVars'
}
});
require([ 'views/pages', 'views/filters'], function(allPages, filters) {
filters.render();
allPages.render();
});
inside globalVars.js, i have this:
(function() {
var Globals = {
isDemo: false
}
console.log('in globalvars') // this shows in my console
}).call(this);
and finally, inside of view/pages.js, i have this:
define([
'Globals',
'Underscore',
'Backbone'
], function(g, _, Backbone){
console.log(g.isDemo) //<-- returns "TypeError: g is undefined"
If i use a define inside my main1.js like this:
define( 'Globals', function() {
return {
isDemo: true
}
})
it works just fine. I haven't had much luck with trying to figure out why this is not working. I'd like to be able to just include a path to the globalVars rather than boilerplate pasting a define block in each and every module that needs it, since changing isDemo to false would require updating many other module pages (main2.js, main3.js, etc) as well. thanks!
Well, to start with, your globalVars.js is not in the module pattern, so requirejs doesn't know what you're trying to register as the module. If you change that file to use the pattern, like the define you added to main1.js, you should be all set. Is there a reason you aren't defining it as a module?