For an angular application, I am building a Dll of my vendor libraries. I am having a problem where the core library (snapjs) has not been loaded by the time the angular-wrapper (angular-snap) is loaded.
What I see in the vendor.bundle.js is happening is that the angular-snap library is being loaded first, therefore window.Snap is not defined (since Snap is located further down the vendor.bundle.js file).
If I manually move the Snap library above the angular-snap library, everything works.
Is there a way to specify require order in order for this to not happen?
Related
I have an application using Backbone.js and requirejs. I'm seeing some incredibly weird behavior where a library, after being properly loaded from the path provided in the requirejs config, fails on load to a totally random path as a dependency of a file that doesn't even list it as a requirement (using CommonJS syntax), or as far as I can tell have that dependency in any of it's dependencies.
In order to debug this problem, I'd like to print at runtime, or step through using the debugger at runtime, what's causing what to load in requirejs. How can I do this?
I need to load entire package on demand. This includes JS and CSS. Package is build up and ready.
Is there any way to do that?
ExtJs 5.0.1
Building the package with sencha package build creates build directory in which you can find resultant javascript files, such as:
build/package.js
build/package-debug.js
where "package" is the actual package name.
Similarly, CSS and resources are placed in
build/resources/package-all.css
build/resources/package-all-debug.css
Loading the package would actually mean to load build/package.js and build/resources/package-all.css at runtime.
The implementation is also easy: inject appropriate script and stylesheet link tags in the page head.
You can find an example of loading css at runtime here: http://extjs.eu/examples/#theme-colors
We have an ExtJS 4.2.1 app and use sencha cmd to build.
But during development I don't want to build every time I change something in the code.
But the index HTML file has bootstrap code in it and the locations of images, other js libraries, etc. is different pre and post build.
Also, even the "testing" concatenated code it too long to set break points in firebug.
So how can I run the code and set break points without building every time.
Typically we just run the code files themselves, but as I said, the location in the source tree, and the index.html file has bootstrap code, so that won't work.
What we do is include css and js libraries BOTH as single files and through the bootstrap. Since they have different paths they won't load twice. The extjs library is loaded through proper setup of the main application class and the loader.
When you're ready for production you can manually remove those since they'll fail every time. Our you can play with the directives. I believe anything included in <x-bootstrap> is ignored.
From the documentation:. The compiler ignores the files in the x-bootstrap block, and they are removed from the final page, as we will see later.
I am using WPF prism for modular application development and each module that is present in the module catalog file is in different folder and they get added and removed from the region one at a time.Each module gets loaded from a its own folder and application exe is at different location. All the dependencies of the module is in its own folder.
In one module (dll) the view which gets added to region is having resource dictionary and with Source of the ResourceDictionary as :
Source="/UIControls.Wpf.MessageBox;component/Themes/Generic.xaml"
If the resource DLL (UIControls.Wpf.MessageBox.dll) is present at the place where application exe is present then it works, that means view get added to the region. But this resource DLL has to be present at folder where module DLL is present(All the dependencies of the module is in its own folder). So if i remove this DLL from where application exe is then it gives FileNotFound exception and the module does not get loaded.
How can I give source/path of the resource dictionary as codebase of the module? Source I don't want as application exe relative,I want the source as the path from where module is getting loaded i.e its codebase. Is there any way or other syntax so that source code is not the application exe relative. Please give me some solutions. One option I have got is to use AssemblyResolved event. But i dont want to use that.
I am trying to have folder structure given here.
The difference is I am using all latest development version of these libraries. However, they are not correctly being uploaded, even jquery. I could not understand what by AMD compatible mean.
I simply downloaded those libraries. Does it mean they are not AMD compatible? Is there a separate AMD compatible version of those libraries?. Do we need to use shim config to load non AMD compatible?.
I am afraid to use shim because require.js official documentation says it is not recommended.
#kryger's right that jQuery is AMD-compatible and there's nothing wrong with shimming non-AMD modules.
AMD-compatible just means that the module adheres to the AMD specification; hence it exports its functionality. For example:
define(['jquery', 'underscore'], function ($, _) {
// function body
});
So in the function body, above:
you can access jQuery via the $ argument; but
underscore doesn't export itself for AMD, so the _ argument will be undefined.
Some AMD-compatible modules (e.g. jQuery) also work 'standalone', such as in an HTML <script> tag, where they will export to the global namespace (e.g. window.$).
I think jQuery still exports the global $ when you load it via an AMD loader, so you could just load jQuery once at your entry-point / when it is first needed and always access the global $ (rather than defining a $ argument).
Also, if you use jQuery plugins (which modify the global one) it can all get a bit confusing!
I couldn't find any mention of shim being "not recommended" in the documentation; I wouldn't be too worried about it. It's a well-tested and increasingly popular way of bridging non-AMD-compliant libraries with RequireJS (previously the only way to do this was was to build a dedicated AMD version wrapped in the define call; that puts extra effort on the library maintainers).
If by "latest development version" you mean jQuery's Pre-Release Builds, it looks like it does support AMD (have a look at the pre-release section of the download page, scroll down to very bottom the source code file: you'll see code relating to AMD)
Backbone and underscore need to be shimmed in any case since they are AMD-agnostic, so there's no escaping from it (these two particular libraries are even used in shim config option documentation example, so you can just reuse that).