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).
Related
I've got pretty much this error:
AngularJS ngSanitize Error
short version: "lowercase is not a function".
While my application has AngularJS enforced to 1.4.9, we didn't enforce angular-sanitize, so it resolves to 1.7.0 and on that version of AngularJS lowercase function doesn't exist anymore, producing an error.
Probably by forcing angular-sanitize to a fixed version would fix that, but I want to go beyond fixing it and understand what is causing the problem and why, because I find a few inconsistencies.
AngularJS is forced to 1.4.9. bower-components folder holds this version, build folder after compiling also holds this version, developer panel on Chrome show only this version is fetched. This version does have lowercase method.
Angular-sanitize has angular 1.7.0 as a dependency, but it's never downloaded, never. Not in any single folder or subfolder on the entire project, not at compiling, not from Chrome either. So I guess the only angular.js he's got access to is 1.4.9, which does have lowercase method.
I don't quite understand why then "lowercase is not a function" error appears if the only available angular.js still has that method. Also I don't understand why angular-sanitize 1.7.0 demanding angular 1.7.0 uses non-existing methods on AngularJS 1.7.0 (Angular developers mistake? but I find hard to believe it.)
Probably sanitize is downloading and accessing angular 1.7.0 somehow, but I would like to know how. Just out of curiosity. And also to confirm if this is an angular developers mistake or if there's something I've missed.
It is explained in the official Angular 1.6 to 1.7 Migration Guide:
Due to 1daa4f, the helper functions angular.lowercase and angular.uppercase have been removed.
These functions have been deprecated since 1.5.0. They are internally used, but should not be exposed as they contain special locale handling (for Turkish) to maintain internal consistency regardless of user-set locale.
Developers should generally use the built-ins toLowerCase and toUpperCase or toLocaleLowerCase and toLocaleUpperCase for special cases.
Further, we generally discourage using the angular.x helpers in application code.
Is there a way to specify a fallback for webpack external, for example if I can't find angular then try to search for it in your node_modules?
You can reference parts 2 of the answer to this Webpack question.
You can use the provide plugin and set an alias for the global. As stated:
Most legacy modules rely on the presence of specific globals, like jQuery plugins do on $ or jQuery. In this scenario you can configure webpack, to prepend var $ = require("jquery") everytime it encounters the global $ identifier.
The angular global will be treated the same way. Therefore if you don't have angular in node modules but loaded via external script, Webpack will allow you to use it the same way as if it was living in your node modules.
Yes, I know this has been asked ad infinitum here, and I already know the general rule that when using requirejs, everything that calls define() must be loaded through a single script tag as in:
<script src="js/lib/require.js" data-main="js/main"></script>
but I find myself in a position where the general advice offered with respect to this common error is not sufficient for solving my particular problem, which on the surface seems pretty simple.
I am working on an angular, requirejs, and WinJS (just to keep things interesting) app, and have run into a problem with this error. My main html file does indeed load several other JavaScript source files using separate script tags but none of them call define(). I checked. Twice. Okay, three times. All other JS source files in the app are loaded through a single script tag similar to the above. Yet I still get this error.
I tried giving each of my app modules a requirejs identifier:
define('myModule', ['dep1', 'dep2', etc.], function(dep1, dep2) {
return angular.module('app.mymod', ['winjs', etc.]);
});
but with this approach angular modules that depend on the angular module defined as above cannot resolve that dependency (although requirejs is now perfectly happy).
The three JS files being loaded outside requirejs are:
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<script src="js/lib/dynamic-content-shim.js"></script>
Where the latter patches the WinJS runtime to allow dynamic content creation. The WinJS runtime does actually expose a define function in its own namespace, but it is completely unrelated to requirejs.
So what gives?
I'm reading https://github.com/ExactTarget/fuelux in order to get familiar with the Fuelux wizard, and how I can integrate it with my AngularJS project.
In the non-AMD section it says :
Non-AMD
If you'd prefer not to use AMD, simply add the loader script to the head tag of your page:
<script src="http://www.fuelcdn.com/fuelux/2.6.1/loader.min.js" type="text/javascript"> </script>
but something in jquery is conflicting with my angular routes.
I'm also using this as a guide, and adding the necessary css links and requirejs links; however the wizard does not render properly (as if it were missing the css styling).
wizard
UPDATE:
In my latest attempt, after downloading from https://github.com/ExactTarget/fuelux/tree/3.0.0-wip , I'm still getting the non-formatted wizard. Please see screen shot :
FuelUX 2.x is AMD only. The loader.js is a polyfill of sorts (almond.js- a minimal AMD API implementation) that allows AMD, just so you don't have to load require.js yourself, but it's still there.
The latest version FuelUX 3 is a WIP branch and is UMD (Universal Module Definition) which means it can be used with/without AMD via tags with only Bootstrap and JQuery as dependencies. You might try it.
A typical extjs example application includes the extjs library by referencing files such as:
ext-all.css
ext-all.js
What's the 'rails 3.1 way' of including these files, noting that they reference hundreds? of files in subdirectories
(e.g. ext-4.0.2/resources/themes/stylesheets/ext4/default/_all.scss)
and there are relative paths:
(e.g. background-image:url('../../resources/themes/images/default/shared/shadow.png'))
I'm tried numerous combinations of require_tree et al., but can't seem to get it to work.
I'm wondering if I need to mess w/ 'provide', but I can't seem to find the documentation I need.
What you want is for this file to compile via the Rails asset pipeline:
resources/themes/templates/resources/sass/my-ext-theme.scss
To get this to work, I learned a few things the hard way:
ExtJS uses SASS to compile (so does Rails) and Compass, which includes blueprint and compass CSS kits. Compass doesn't work with rails, you need to use the gem "compass-rails", which doesn't include the CSS toolkits. Only the main compass gem has these toolkits, and it's a dependency for compass-rails so you should get them if you bundle compass-rails, they need to be in your sass.load_paths config. If you include the "compass" gem without compass-rails you will have strange errors and become an expert at the rails asset pipeline as you try to solve them!
ExtJS uses an older version of SASS, the newer one Rails uses doesn't like having functions and mixins defined inside of modules. To fix this, look at the errors it's giving you (always a function or mixin definition) and move them to _functions or _mixins files.
(more info: getting error after ugrading to sass-3.1.8)
Here's how to get up and running:
Put this into your config/application.rb:
# Set up our ExtJS SASS build environment
config.sass.load_paths << "#{Rails.root}/vendor/assets/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/compass/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/blueprint/stylesheets"
Put the ExtJS stylesheets (the ext4/default directory in the SDK) here:
vendor/assets/stylesheets/ext4/default/
Put my-ext-theme.scss into app/assets/stylesheets and use it like you normally would with rails. It will call this code:
#import 'ext4/default/all';
That will bring in all of the ExtJS definitions, and you should be on your way.
Jeff! Take a look at my answer here, I think your problem is the same.