I use the Require.js "AMN" to load my files, this is my HTML file.
<script data-main="js/main.js" href="js/require.js"></script>
when i load my main.js - i made this config to load my jquery file.
require.config({
baseUrl: 'js',
paths: {
"jQuery":'lib/jquery-1.9.1.min'
}
});
require(['jQuery'], function ($) {
console.log($);
})
But i am not getting any console. all my paths are correct.
my index.html file located at the parent of the js filder.
Help me to resolve this.
jQuery module for AMD should always be lowercase. Check what path is used when browser requesting files using developer tools in chrome or fiddler. This way you will know if you configured it right.
UPDATE: please correct the syntax for loading script. Must be src instead of href.
<script data-main="js/main.js" src="js/require.js"></script>
Related
this the content of my /laravel/webpack.mix.js :
mix
.js([
'resources/assets/js/jquery.js',
'resources/assets/js/plugin.js'
], 'public/js/my_app.js');
The content of /resources/assets/js/jquery.js is :
window.$ = window.jQuery = require('jquery');
The content of /resources/assets/js/plugin.js is the local code written like this :
(function($) {
// plugin script
})(jQuery);
When the plugin.js script is written locally (as above), it is loaded BEFORE jQuery in my_app.js (e.g plugin.js THEN jQuery)
BUT
when I extract plugin.js with "require" or "import" instruction directly from
node_modules**, e.g require('plugin') written in plugin.js, the order is OK :
jquery.js is loaded first THEN plugin.js.
My question:
I want to load jquery.js BEFORE plugin.js.
So, How to do to respect the order EVEN when the plugin.js is a local script?
Laravel mix provides feature where you can extract vendor libraries to vendor.js. But you have to make sure your application code app.js is called after your vendor.js.
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
Reference - https://laravel.com/docs/5.4/mix#vendor-extraction
After the .extract call, add
autoload({
jquery: ['$', 'jQuery', 'window.jQuery']
});
So,
mix.js(...).extract(...).autoload(...);
Edit : just saw your response that you tried this
This is a config file in the /themes/ifd/js/ folder:
require.config({
// Initialize the application with the main application file
deps: ['plugins/console', 'main'],
baseUrl: '/themes/ifd/js/components'
paths: {
jquery: 'jquery/jquery.min',
flexslider: 'flexslider/jquery.flexslider-min',
easydropdown: 'easydropdown/jquery.easydropdown.min',
bpopup: 'bpopup/jquery.bpopup.min',
jqrangeslider: 'jqrangeslider/jQRangeSlider',
jqueryui: 'jquery-ui/js/jquery-ui-1.10.4.custom.min'
// More additional paths here
},
shim: {
jqueryui: 'jquery'
},
// Prevent caching issues, by adding an additional URL argument
urlArgs: 'bust=' + (new Date()).getDate()
});
I've got a main.js file in the /themes/ifd/js folder too:
require([
// Require the modules
'modules/module',
'jquery',
'flexslider',
'easydropdown',
'bpopup',
'jqueryui',
'jqrangeslider'
], function (module) {
'use strict';
// Rest of a file
And rest of files (modules?) are inside /themes/ifd/js/components:
Screenshot of list of files
In my HTML I have:
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
The messages I see in Chrome console:
GET http://DOMAIN/themes/ifd/js/jquery.js 404 (Not Found) requirejs.js:34
GET http://DOMAIN/themes/ifd/js/flexslider.js 404 (Not Found)
I can't find what is wrong and why it doesn't search in components directory...
The entry point for requirejs is the main module specified in the html file.
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
requirejs loads '/themes/ifd/js/main.js' 1st. Now in the main.js file, require([...]) try to load in the module specified in the args but requirejs won't be able to find them.
The reason is that requirejs does not know about them since require.config (...) is not executed.
Need to have 'require.config (...)' in '/themes/ifd/js/main.js' to do all the settings
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.
The network activity you show us indicates that your configuration is completely ignored by RequireJS. And you say "Then i have that in my html":
<script data-main="/themes/ifd/js/main" src="/themes/ifd/js/requirejs.js"></script>
You've shown the contents of /themes/ifd/js/main.js but it does not include your configuration, which apparently is in a different file.
The solution here would be to move your call to require.config into your main.js file, before your call to require.
It looks like you're just loading main.js and never telling RequireJS to use your config.
This RequireJS issue lists several ways to load both a config and a main -
put the config on the HTML before you require the top-level module.
load the config.js with another tag.
do a nested require() on the HTML file (require config than require your main).
do a nested require() inside main.js.
keep the configuration inside main.js
The best approach will vary based on your project structure, I've been doing 5 way more often than the others since I usually have a single entry-point for all pages, but in some cases I used 1 and 2.
Further down the page some code examples of these approaches are also shown.
i'm reading little about requireJS and trying to understand it.
What i want to know:
Should i structure my files in specific way or pattern like Module-Pattern ??
When working with libraries should these files support AMD ?
Thanks Alot for your help.
You can structure your files any way you see fit. RequireJS loads the script file referenced in the data-main attribute of the script tag that loads require.js. From that file you're free to require whatever modules you want.
Libraries don't need to support AMD. You can use the shim config to load modules that export value to the global scope (i.e. normal javascript files).
Mostly I'm setting up a require.js project with a structure as below:
root
js
modulesType1
mod1
mod2
modulesType2
mod1
mod2
app.js
bootstrap.js
lib
require
require.js
lib1
lib1.js
css/img/partials/...
index.html
And an initial bootstrap.js a have a require.config object and an initial require:
/*global define, require */
require.config({
baseUrl: 'js',
paths: {
lib1: '../lib/lib1/lib1'
},
shim: {
lib1: ['something']
}
});
require(['lib1', 'app'], function (lib1, app) {
app.doSth();
});
In your html page you only need one script tag with a data-main attribute:
<body>
...
<script type="text/javascript" src="lib/require/require.js" data-main="js/bootstrap"></script>
</body>
Edit: modules don't have to be AMD compliant, but if they are under your own control, it is better to make them AMD compliant. You can make third party non-AMD libraries loadable using the shim property in require.config.
I have the following folder structure:
index.html
js/
libs/
require.js
jquery.js
main.js
In index.html I added the following line to the head section:
<script data-main="js/main" src="js/libs/require.js"></script>
When I add a simple alert to main.js, it works. When I want to use jQuery, it's not working:
require(['libs/jquery'], function ($) {
$('#test').html('123');
});
In the chrome web inspector, I see that jquery loaded succesfully, but the text doesn't appear in my div. When I move jquery out of ./js/libs and just put it in ./js (and ofcourse change the dependency to ['jquery']), it works.
What am I doing wrong? Why can't I just put jquery in ./js/libs to keep things organized?
Thanks
If I configure a path
require.config({
paths: {
'jquery': 'libs/jquery'
}
});
and change the require to:
require(['jquery'], function ($) {
$('#test').html('123');
});
it appears to be working. If someone could explain me why.
You have to provide basePath in order it to work correctly.
In your case it's just js. You can do it in the beginning on main.js file.
require.config({
baseUrl: '/js'
});
after that this code will work, because it will concatenate baseUrl with your relative url.
require(['libs/jquery'], function ($) {
$('#test').html('123');
});
I have the following file structure:
|- index.html
vendor
|- jquery.min.js (some libraries)
js
|- app.js
When I try to load the index.html from my browser using the following url:
http://localhost/~myname/WebFrontend/
I get the following error in conf.js (see the comments on conf.js).
How should I fix this problem?
// index.html
<script data-main="js/conf" src="./vendor/require.js"></script>
// conf.js
requirejs.config({
baseUrl: '../vendor',
paths: {
jquery: 'jquery.min', // it works
}
});
require(['../js/app']); // http://localhost/~mynane/js/router.js not found
require(['./js/app']); // http://localhost/~myname/vendor/js/router.js not found
// I would like to point to http://localhost/~antoniopierro/WebFrontend/js/router.js
Not sure it will be possible to change the baseUrl on the same file.
And also if you load another module I don't think you can change the baseUrl.
Anyway:
1) You said jquery module is successfully load.
It is false because you don't get the error just because the require(['../js/app']); fails.
2) With your structure I suggest to define the baseUrl: './' .
In this way you will be able to access the vendor modules making vendor/filename and your source files making js/filenane.