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.
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 want to port my requirejs web application to webpack module bundler. The app use several non AMD libraries (such jquery and bootstrap). RequireJS maintains such libraries via shim configuration. How I can declare dependincies for non AMD libraries in webpack?
I'm in the process of doing the same. It's practically as you would any AMD module. To use stringified templates put into AngularJS' $templateCache as an example:
Templates are generated in non-AMD format wrapped in an IIFE, pushed into a .tmp dir, then requested as per any module:
define([
'./module',
'templates/ubCampaignEditor'
]
As to keep definitions clean, I've created a resolve.alias named templates, in the Webpack config:
resolve: {
alias: {
templates: path.join(__dirname, '.tmp/templates')
}
}
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 know we could use requirejs combine files into one js file.
such like the following config.
module.exports = {
baseUrl: 'js/',
mainConfigFile: 'src/js/common.js',
dir: 'scripts/',
optimize: 'uglify2',
modules: [
{
name: 'common',
include: [
'jquery',
]
}
]
};
my result into one file is
common.js
----------------
jquery.js
modernizr.js
common.js
my question is, do we still need to put a require.js file in scripts folder and to use the following format
<script data-main="scripts/common" src="scripts/require.js"></script>
or we could just use
<script src="scripts/common.js"></script>
as files are compressed into one file?
You still need to load require.js the usual way to actually make use of the module loading benefits that it provides, and especially if you use the asynchronous functionality a lot. However, you can have a look at almond providing your code uses AMD and (from the README):
optimize all the modules into one file -- no dynamic code loading.
all modules have IDs and dependency arrays in their define() calls -- the RequireJS optimizer will take care of this for you.
only have one requirejs.config() or require.config() call.
do not use RequireJS multiversion support/contexts.
do not use require.toUrl() or require.nameToUrl().
do not use packages/packagePaths config. If you need to
use packages that have a main property,
volo can create an adapter module so
that it can work without this config. Use the amdify add command to
add the dependency to your project.
Almond is great because it doesn't need require.js at all; it wraps your own code with itself, which is a very minimal AMD loader skeleton and nowhere near as powerful as the main library. You then get a single optimised file that can be linked directly in your HTML:
<script src="scripts/common.js"></script>
The Gruntfile config for almond could look something like this:
compile: {
options: {
name: 'path/to/almond',
baseUrl: 'js',
include: ['main'],
insertRequire: ['main'],
mainConfigFile: 'scripts/config.js',
out: 'scripts/main.js',
optimizeAllPluginResources: true,
wrap: true
}
}
The above is all standard r.js boilerplate, you can find many more examples at the almond homepage.
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>