How to load external scripts

Asked

Viewed 662 times

1

I’m adapting a theme (Bootstrap) with Meteorjs but the theme has more than 15 plugins (jQuery), I can’t just put them in the folder /client and carry them all at once, tried some things (some in despair):

  1. Place scripts in the template footer with tag <script>, but were not loaded or when the template Reload, whether they lose or not carry

  2. Using https://atmospherejs.com/mrt/external-file-loader charging is asynchronous, in this case not feasible, I am carrying dependent Libraries among themselves.

  3. Using https://atmospherejs.com/manuelschoebel/wait-on-lib I have the same problem as item 2, I even managed to make them depend on each other using callbacks but it’s so awful that I refused to post the code.

EDIT

When first loading various application "Undefined is not a Function" go to the console, but when the Content does the Reload, it works perfectly because the library already loaded. I also used the mrt:preloader but it had no effect.

What I need is to load a list of scripts in synchronous order.

javascript jquery meteors

  • Are all these plugins great? Can’t you put some in the same file? Is there one that everyone depends on? So you could have jQuery in the head and the rest in the bottom of the body (async)

  • Some are, but the problem is that the last script that configures the default operation depends on several previous scripts, there arises the problem: if for example the main.js is loading before jquery-ui.js I will have a problem.

  • 6

    Consider using the require js., Asynchronous charging with dependency handling.

  • @bfavaretto I will try to use and give some return.

  • @bfavaretto Even using requirejs did not work the load issue, the problem is like this: The first time the page is loaded, any plugin returns "Undefined is not a Function" in Reload, as the plugin has already been loaded, works normally.

  • 1

    @bfavaretto Really the requirejs solved the problem! Thank you.

Show 1 more comment

2 answers

1

Well I imagine you do not want complicated things, knowing that the best way would be in PRODUCTION put all this sequentially in a single file and compress it with this Google tool

http://closure-compiler.appspot.com/home

It’s the best way to get performance

  • The problem is to load them synchronously and in order.

  • Javascript is a language that gives priority to synchronization and all browsers know this for this reason they know well how to process it in the best way even synchronous, the important thing is to make a well done caching of the same in my opinion

0

The way Meteor loads files is a headache. However, there are some directories with special meanings:

client/compatibility -- Todos as bibliotecas que esperam ser globais, são carregadas primeiro

One way to adjust this with dependencies is inside the folder client/compatibility name the files in numerical order. Meteor loads the files in lexicographic order.

This would be horrendous and difficult to do, and subject to errors if the lib changes the dependencies (it would involve you having to rename the files). So the way I recommend is to create packages.

The Meteor package system lets you explicitly specify dependencies between. js files.

Link: http://docs.meteor.com/#/full/packagejs

One way would be to create a package for each plugin. Map the dependencies between them and integrate them using the Meteor package system. When done meteor deploy or meteor build, packages will be minified in a single JS with the application.

Another idea might be to map the most coupled dependencies and make them a single package. It’s up to you, actually.

Browser other questions tagged javascript jquery meteors

You are not signed in. Login or sign up in order to post.