I was using v2.240 with requriejs before and today I updated it to v2.26.0 and now everything is broken.
I investigated a little bit and found the following issues
First Topic : Existing UMB BLOCK:
Very first issue is with /dist/jquery.fancytree-all.js UMD Block
instead of
define( [ "jquery", "./jquery.fancytree.ui-deps" ], factory );
it should be
define( [ "jquery", "`jquery.fancytree-all-deps" ], factory );
jquery.fancytree-all-deps
without ./
, because of ./
it tries to resolve path relative to index.html
which is wrong
- name should be
jquery.fancytree-all-deps
instead of jquery.fancytree.ui-deps
for /dist/jquery.fancytree-all.js
after compilation. jquery.fancytree-all
should depend on jquery.fancytree-all-deps
not on ./jquery.fancytree.ui-deps
Some Notes:
UMD uses word "jquery" without any ./ because it is assumed to be defined variable by AMD always.
Therefore this should be proper setup IMO
// fancytree UMD block line change
define( [ "jquery", "`jquery.fancytree-all-deps" ], factory );
//
//AMD setup
requirejs.config({
paths: {
'jquery': './js/vendor/jquery',
'jquery.fancytree': './js/vendor/jquery.fancytree-all',
'jquery.fancytree-all-deps' : './js/vendor/jquery.fancytree-all-deps',
}
});
2nd Topic : Resolving jquery-ui Dependency:
Even though I pointed out some changes above , I do not agree with existing UMD block setup.
jquery ui documentation is very clear on how to use it with amd.
see here please
Some people tend to use jquery-ui-all.js
(custom or all bundled in one file) with AMD which is wrong, of course it is a work around but this is against very soul of AMD usage andjquery ui documentation suggests that one should use directory structure of it instead of jquery-ui-all.js
when working with AMD
├── index.html
├── js
│ ├── app.js
│ ├── jquery-ui
│ │ ├── accordion.js
│ │ ├── autocomplete.js
│ │ ├── button.js
│ │ ├── core.js
│ │ ├── datepicker.js
│ │ ├── dialog.js
│ │ └── ...
│ ├── jquery.js
│ └── require.js
Fancytree should never bundle dependencies because
- It is extra maintenance
- It is against repo and AMD rules. There is a reason we have github , npmjs and JSMP Repos, they are there to resolve dependencies. Why repeat same work again ?
Correct Usage:
As per jquery ui documentation, following would be the correct setup.
Note: I was using same while using 2.24 and it was working perfectly but I was doing this manually
UMD BLOCK
define(['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'], factory );
Full UMD BLOCK:
;(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define(['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'], factory );
} else if ( typeof module === "object" && module.exports ) {
// Node/CommonJS
require("jquery.fancytree.ui-deps");
module.exports = factory(require("jquery"));
} else {
// Browser globals
factory( jQuery );
}
}( function( $ ) {
//
AMD SETUP:
requirejs.config({
paths: {
'jquery': './js/vendor/jquery',
'jquery-ui': './js/vendor/jquery-ui',
'jquery.fancytree': './js/vendor/jquery.fancytree-all'
}
});
waiting build-process