script.js icon indicating copy to clipboard operation
script.js copied to clipboard

More documentation please

Open fresheneesz opened this issue 11 years ago • 6 comments

Please add some documentation about the following:

  • Where to download script.js (is it in any package management system like npm?)
  • How to load script.js (I assume just your normal script tag)
  • What format loaded files need to be in (if any)
  • How do you access the resources after they're loaded? Are these scripts just run in the global scope and exposed in the same way they'd be if they were loaded in a script tag?
  • What is the actual footprint? You claim its footprint is impressively light, put a number here please so we can compare it to other loaders (minified and gzip compressed)

Please also add specifications for each function script.js exposes. Looks like this is just $script() $script.ready and $script.done. The examples you give don't explain well what exactly they do, and are pretty misleading. I would have expected $script.ready("file.js", function() {}) to load file.js and call the callback when its done. Instead, it doesn't do that at all, and requires a $script() call to happen first. This is entirely unclear.

fresheneesz avatar Apr 09 '14 20:04 fresheneesz

Also $script.order has existed since 2011 and is not documented anywhere.

wheany avatar Oct 17 '14 15:10 wheany

ha. right on. i can do that

ded avatar Oct 17 '14 18:10 ded

Any progress on this?

Also, managing complex dependencies is not clear. Lets say I have A.js, B.js and C.js, and app.js that depends on all three. B.js also depends on A.js. Is it possible to load these without referencing $script from within js files? And have them on CDN with fallback local load on top?

It's easy to do with requirejs, but I'm trying to go with webpack and is has little to offer on loading

enlait avatar Jan 26 '15 10:01 enlait

Hey @enlait this is pretty easy to achieve with $script as well... see below:


   var $depFallbackList = {
      'bready2':'http://cdn.store.com/.../B.js',
      'acready2':['http://cdn.store.com/.../A.js', 'http://cdn.store.com/.../C.js']
   };

    $script(['A.js', 'C.js'], 'acready', function(){
           $script('B.js', 'bready', function(){
                 // you could get rid of me (function) as the last argument to $script once you feel like it...
                 console.log("B.js is good to go!");
           });
    });

   $script.ready(['acready', 'bready'] , function(){
        // if we are here, then go ahead and load the last script: 'app.js'
         $script(['app.js']);
   }, function(deps404){
        // if $script gets here, some dependencies were not found.. Ooops!
        deps404.forEach(function(dep){
             if(dep == 'bready'){
                 $script($depFallbackList['bready2']);
             }else if(dep == 'acready'){
                 $script($depFallbackList['acready2']);
             }
        });
   });

I think the above captures your concerns at the moment for complex dependency management. I hope i tackled your question properly.

isocroft avatar Jan 26 '15 12:01 isocroft

@enlait What are you trying to do loading-wise alongside webpack? Webpack can auto split bundles into parts using require.ensure and loads them automatically at that point. I have a situation this doesn't work for myself, but require.ensure should work for most situations.

fresheneesz avatar Jan 26 '15 19:01 fresheneesz

@isocroft I thought third argument to ready is executed when there are some missing handles among dependencies; but those would still count for registered even if remote server didn't fulfill the request (e.g. 404). Guess I misunderstood this part of the docs, from reading sources it seems that should actually work, thanks.

@fresheneesz I'm trying to package and use my front-end without hosting some libraries myself. require.ensure doesn't seem to work with remote sources - that's where I came from, actually https://github.com/webpack/webpack/issues/150

enlait avatar Feb 02 '15 10:02 enlait