bootstrap.amd.json
Locked
 
Administrator
|
I don't understand this (bootstrap.amd.json from Helios)...
{ "paths": { "bootstrap": "." }, "shim": { "bootstrap/dist/js/bootstrap": { "deps": [ "jquery", "css!bootstrap/dist/css/bootstrap" ] } } Why isn't it `"paths": { "bootstrap": "dist/js/bootstrap" }`? The only thing I can't figure out if I go that route is the css... The original was `"deps": [ ... "css!bootstrap/dist/css/bootstrap" ]` which I don't understand, but with the paths change, I can't get it to work at all. I tried a few things like ` "css!bootstrap/../css/bootstrap"` to no avail...
Cheers,
Sean |
|
|
Sean P. DeNigris wrote: > I don't understand this (bootstrap.amd.json from Helios)... > { > "paths": { > "bootstrap": "." In multi-file libraries, when the parts want to know each other, you must map just the path prefix ("bootstrap") and then use it as such (so load the modules themselves with pathlike module id using "bootstrap" as the prefix). > }, > "shim": { > "bootstrap/dist/js/bootstrap": { > "deps": [ "jquery", "css!bootstrap/dist/css/bootstrap" ] > } > } > > Why isn't it `"paths": { "bootstrap": "dist/js/bootstrap" }`? The only thing > I can't figure out if I go that route is the css... > > The original was `"deps": [ ... "css!bootstrap/dist/css/bootstrap" ]` which > I don't understand, but with the paths change, I can't get it to work at > all. I tried a few things like ` "css!bootstrap/../css/bootstrap"` to no "deps" contain module ids, not real paths. All "." and ".." are translated in this realm of symbolic paths, not in the real paths mapped. If you map "bootstrap": "dist/js/bootstrap", you don't have any usable module id pointing to the css file ("css!bootstrap/../css/bootstrap" is nothing more than, of course, "css!css/bootstrap" which is of course nonsense). > avail... > > > > ----- > Cheers, > Sean > -- > View this message in context: http://forum.world.st/bootstrap-amd-json-tp4832821.html > Sent from the Amber Smalltalk mailing list archive at Nabble.com. > -- You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
|
Administrator
|
Three Questions: 1. It seems that with the above code, one has to always fully qualify the path e.g. from deploy.js*, this works: define([...'bootstrap/dist/js/bootstrap',... but this does not: define([...'bootstrap',... * I know I should be doing this from the #imports: section, where I assume I would have to use the long version as well, right? 2. Why isn't Helios requiring the minified css (i.e. "deps": [ ... "css!bootstrap/dist/css/bootstrap.min" ])? 3. Why not load the css from CDN? It's more likely to be cached and less load on the server, no?
Cheers,
Sean |
|
|
Sean P. DeNigris wrote: > Herby Vojčík wrote >>> "paths": { >>> "bootstrap": "." > > Three Questions: > 1. It seems that with the above code, one has to always fully qualify the > path e.g. from deploy.js*, this works: > define([...'bootstrap/dist/js/bootstrap',... That's what I meant by "using 'bootstrap' as a path prefix". > but this does not: > define([...'bootstrap',... 'bootstrap' is mapped to the directory. Of course it fails if you want to load it as a module. > > * I know I should be doing this from the #imports: section, where I assume > I would have to use the long version as well, right? > > 2. Why isn't Helios requiring the minified css (i.e. "deps": [ ... > "css!bootstrap/dist/css/bootstrap.min" ])? > 3. Why not load the css from CDN? It's more likely to be cached and less > load on the server, no? Everything is packed into the.js when deployed (and minified, which should answer 2. as well). -- You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
|
Administrator
|
I'm sorry. I read requirejs and AMD docs, blog posts, and SO questions for hours yesterday and still do not know enough to understand your answers. And maybe I don't have to, if I can eke out a few recipes to do some basic tasks. I appreciate all this support and promise to write it up as a guide for other new users :)
So you're saying that is correct? All references to the module will use the long version? I guess that Helios's app.js is like a deploy.js and can be used as an example? I don't understand that, but again maybe it doesn't matter. Okay! Yes, that is clear. And very cool :) After seeing bootstrap shim its css, I thought it would work the same way for an Amber app (i.e. add a shim to local.amd.json), but I see Helios instead 1) adds the css folder as a path, and then 2) lists the css files individually in app.js (which IIUC is like my deploy.js). Is that the best practice? Why doesn't this work like the bootstrap example? Lastly, how do I handle these conditional loads from the bootstrap template:
Cheers,
Sean |
|
|
Beginnig from the end: I don't know what you mean by "conditional loads"; there is nothing like conditional loads in AMD or requirejs.
If you write a guide, I can point you more directly to places where you misunderstand things. I would not use Helios' app.js to explain anything, as it is internal thing. All I know is from the same sources as you used, primarily the requirejs docs. There is no magic behind what you are failing to grasp yet. What complicates it, is that in paths section, you can map either the target file itself (without .js or .css in case of css! plugin), or a directory; and if you mapped the file, you just use the mapped name as the id to load the module, and in case you mapped the directory, you use the mapped name as a prefix and continue the path from it. It is preferred to map directly the file, but this is not always feasible: when library consists of more files, and especially when those files load each other using "./foo" and "../bar" module ids (and I stress once more that these are resolved in space of ids "virtual file tree", not in actual paths; one of libraries that do that is codemirror with its plugins/language modes). In that case, you have no other choice then to map only the common parent directory and , yes, use module ids that are paths beginning with name that was mapped to that common parent directory. The problem us when you want to make a rule, since there there are two possibilities and you must choose which one to use (though rule of the thumb is clear - one file = direct file mapping; more files = libdir/distdir mapping - which means, in case of bootstrap, dist could be mapped instead of . and module ids could be one "dist/" shorter). Dňa 18. júna 2015 4:47:27 CEST používateľ "Sean P. DeNigris" <[hidden email]> napísal: > I'm sorry. I read requirejs and AMD docs, blog posts, and SO questions > for > hours yesterday and still do not know enough to understand your > answers. And > maybe I don't have to, if I can eke out a few recipes to do some basic > tasks. I appreciate all this support and promise to write it up as a > guide > for other new users :) > > > Herby Vojčík wrote > > one has to always fully qualify the path... deploy.js*...: > > define([...'bootstrap/dist/js/bootstrap',... > > So you're saying that is correct? All references to the module will > use the > long version? I guess that Helios's app.js is like a deploy.js and can > be > used as an example? > > > Herby Vojčík wrote > > 'bootstrap' is mapped to the directory. Of course it fails if you > want > > to load it as a module. > > I don't understand that, but again maybe it doesn't matter. > > > Herby Vojčík wrote > > Everything is packed into the.js when deployed (and minified, which > > should answer 2. as well). > > Okay! Yes, that is clear. And very cool :) > > After seeing bootstrap shim its css, I thought it would work the same > way > for an Amber app (i.e. add a shim to local.amd.json), but I see Helios > instead 1) adds the css folder as a path, and then 2) lists the css > files > individually in app.js (which IIUC is like my deploy.js). Is that the > best > practice? Why doesn't this work like the bootstrap example? > > Lastly, how do I handle these conditional loads from the bootstrap > template: > > > > > > > ----- > Cheers, > Sean > -- > View this message in context: > http://forum.world.st/bootstrap-amd-json-tp4832821p4832918.html > Sent from the Amber Smalltalk mailing list archive at Nabble.com. -- You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
|
Administrator
|
I meant that those script tags were inside an HTML conditional comment, so how do I incorporate them into a config. Is there currently a public project that one can use as a model for best practices here? Okay I think I understand that part now. I was however intrigued by this SO answer (http://stackoverflow.com/a/14547106/424245), which says, "Paths configurations should only be used for folders, not modules themselves. Map configurations apply to individual modules"
Cheers,
Sean |
|
|
Sean P. DeNigris wrote: > Herby Vojčík wrote >> I don't know what you mean by "conditional loads"; there is nothing like >> conditional loads in AMD or requirejs. > > I meant that those script tags were inside an HTML conditional comment, so > how do I incorporate them into a config. I still do not understand, though. > Herby Vojčík wrote >> in paths section, you can map either the target file itself... or a >> directory > > I was however intrigued by this SO answer > (http://stackoverflow.com/a/14547106/424245), which says, "Paths > configurations should only be used for folders, not modules themselves. Map > configurations apply to individual modules" I've never heard of this being the official paradigm, but it may be it is (citation needed, guy with 31 points is not that authoritative for me). If it is indeed true, lots of things were done wrong, but it can be solved but just changing a few .amd.json files. Nevertheless, the above _is_ used with require-css plugin. OTOH, it is needed because the css.js module requires normalize.js module via "./normalize" name, so it may as well be a workaround. -- You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
|
|
In reply to this post by Sean P. DeNigris
Hi,
-- if I put bootstrap.amd.json (with content below) in my project root, do 'grunt devel' and 'amber serve' I can't start helios anymore. What am I missing? Should I edit 'imports {...}' before? Thanks in advance Jörg On Wednesday, June 17, 2015 at 4:12:39 PM UTC+2, Sean DeNigris wrote: I don't understand this (bootstrap.amd.json from Helios)... You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
|
|
Jörg Rade wrote:
> Hi, > > if I put bootstrap.amd.json (with content below) in my project root, do > 'grunt devel' and 'amber serve' I can't start helios anymore. What's the point of putting bootstrap.amd.json to your project root (if I understand correctly, it has helios as its development dependency)? Are you having some nonstandard distribution of bootstrap that you feel the need to overwrite helios's (working, IIRC) bootstrap.amd.json? Herby > What am I missing? > Should I edit 'imports {...}' before? > > Thanks in advance > Jörg > > On Wednesday, June 17, 2015 at 4:12:39 PM UTC+2, Sean DeNigris wrote: > > I don't understand this (bootstrap.amd.json from Helios)... > { > "paths": { > "bootstrap": "." > }, > "shim": { > "bootstrap/dist/js/bootstrap": { > "deps": [ "jquery", "css!bootstrap/dist/css/bootstrap" ] > } > } > > Why isn't it `"paths": { "bootstrap": "dist/js/bootstrap" }`? The > only thing > I can't figure out if I go that route is the css... > > The original was `"deps": [ ... "css!bootstrap/dist/css/bootstrap" > ]` which > I don't understand, but with the paths change, I can't get it to > work at > all. I tried a few things like ` "css!bootstrap/../css/bootstrap"` > to no > avail... > > > > ----- > Cheers, > Sean > -- > View this message in context: > http://forum.world.st/bootstrap-amd-json-tp4832821.html > <http://forum.world.st/bootstrap-amd-json-tp4832821.html> > Sent from the Amber Smalltalk mailing list archive at Nabble.com. > > -- > You received this message because you are subscribed to the Google > Groups "amber-lang" group. > To unsubscribe from this group and stop receiving emails from it, send > an email to [hidden email] > <mailto:[hidden email]>. > For more options, visit https://groups.google.com/d/optout. -- You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
|
|
Hi Herby,
-- thanks for the fast reply! So my changes resulted in replacing Helios? My intention was to use bootstrap-css from Amber. I tried to follow Richard Eng's tutorial [https://medium.com/smalltalk-talk/a-gentle-introduction-to-amber-8c532631e9ab#.4749e8lz0], 'Integrating External JavaScript Libraries'. I just discovered that bootstrap and bootstrap-css are two different things. So I need to put the bootstrap-css.amd.json in <my-amber-project>\node_modules\bootstrap-css dir? How do I reference it in 'imports: {}'? I'm new to npm/bower/grunt, still learning JS, and undusting my ST - reading suggestions appreciated! Thanks in advance Jörg On Tuesday, December 6, 2016 at 3:33:51 PM UTC+1, Herby wrote: Jörg Rade wrote: You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
|
|
Jörg Rade wrote:
> Hi Herby, > > thanks for the fast reply! > > So my changes resulted in replacing Helios? My intention was to use > bootstrap-css from Amber. Amber has no bower dependencies. Maybe from Helios? Even then, it is not good idea anyway, to use dependency of a dependency (they may change). The correct way would be, to declare it your dependency (bower install bootstrap-css --save) and use it. > I tried to follow Richard Eng's tutorial > [https://medium.com/smalltalk-talk/a-gentle-introduction-to-amber-8c532631e9ab#.4749e8lz0], > 'Integrating External JavaScript Libraries'. > > I just discovered that bootstrap and bootstrap-css are two different things. Oh, I see. > So I need to put the bootstrap-css.amd.json in Yes. > <my-amber-project>\node_modules\bootstrap-css dir? > How do I reference it in 'imports: {}'? If it is a single module, than, of course, as 'bootstrap-css'. If mapping plays the role of prefix path (as is the case for multimodule molochs like bootstrap or codemirror), then, something longer. AMD module name, in any case. > I'm new to npm/bower/grunt, still learning JS, and undusting my ST - > reading suggestions appreciated! > > Thanks in advance > Jörg Herby > On Tuesday, December 6, 2016 at 3:33:51 PM UTC+1, Herby wrote: > > Jörg Rade wrote: > > Hi, > > > > if I put bootstrap.amd.json (with content below) in my project > root, do > > 'grunt devel' and 'amber serve' I can't start helios anymore. > > What's the point of putting bootstrap.amd.json to your project root (if > I understand correctly, it has helios as its development dependency)? > Are you having some nonstandard distribution of bootstrap that you feel > the need to overwrite helios's (working, IIRC) bootstrap.amd.json? > > Herby > > > What am I missing? > > Should I edit 'imports {...}' before? > > > > Thanks in advance > > Jörg > > > > On Wednesday, June 17, 2015 at 4:12:39 PM UTC+2, Sean DeNigris > wrote: > > > > I don't understand this (bootstrap.amd.json from Helios)... > > { > > "paths": { > > "bootstrap": "." > > }, > > "shim": { > > "bootstrap/dist/js/bootstrap": { > > "deps": [ "jquery", "css!bootstrap/dist/css/bootstrap" ] > > } > > } > > > > Why isn't it `"paths": { "bootstrap": "dist/js/bootstrap" }`? > The > > only thing > > I can't figure out if I go that route is the css... > > > > The original was `"deps": [ ... > "css!bootstrap/dist/css/bootstrap" > > ]` which > > I don't understand, but with the paths change, I can't get it to > > work at > > all. I tried a few things like ` > "css!bootstrap/../css/bootstrap"` > > to no > > avail... > > > > > > > > ----- > > Cheers, > > Sean > > -- > > View this message in context: > > http://forum.world.st/bootstrap-amd-json-tp4832821.html > <http://forum.world.st/bootstrap-amd-json-tp4832821.html> > > <http://forum.world.st/bootstrap-amd-json-tp4832821.html > <http://forum.world.st/bootstrap-amd-json-tp4832821.html>> > > Sent from the Amber Smalltalk mailing list archive at > Nabble.com. > > > > -- > > You received this message because you are subscribed to the Google > > Groups "amber-lang" group. > > To unsubscribe from this group and stop receiving emails from it, > send > > an email to [hidden email] <javascript:> > > <mailto:[hidden email] <javascript:>>. > > For more options, visit https://groups.google.com/d/optout > <https://groups.google.com/d/optout>. > > -- > You received this message because you are subscribed to the Google > Groups "amber-lang" group. > To unsubscribe from this group and stop receiving emails from it, send > an email to [hidden email] > <mailto:[hidden email]>. > For more options, visit https://groups.google.com/d/optout. -- You received this message because you are subscribed to the Google Groups "amber-lang" group. To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email]. For more options, visit https://groups.google.com/d/optout. |
«
Return to Amber Smalltalk
|
1 view|%1 views
| Free forum by Nabble | Edit this page |