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');
});
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
I compiled js file for each html files, for example, index.html will have index.js, a.html will have a.js, and used requirejs to load it like:
index.html
<script scr="assets/js/build/index" src="assets/js/require.min.js"></script>
a.html
<script scr="assets/js/build/a" src="assets/js/require.min.js"></script>
Bebause of jquery is common and must include library, so I did not compiled it together, just put it in the body.
<script src="assets/js/jquery.min.js"></script>
<script scr="assets/js/build/a" src="assets/js/require.min.js"></script>
But many plugin write dependency with jquery for nodejs I think, like jquery file upload or blockUI, they code something like:
if (typeof define === 'function' && define.amd && define.amd.jQuery) {
define(['jquery'], setup);
} else {
setup(jQuery);
}
When I use r.js to compile the js file, it will ask for jquery path and need to compile jquery together, is there any config to turn it off, I don't really want to remove it from the plugin by myself.
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 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>
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.