JavaScript ES^ import order

Question

I have a main.js file in which I import all other js files, but the problem is the scripts from imported files are not executed in the same order that are imported.

My main.js looks like this:

     import * as libs from './libs.js';
     import * as utils from './utils.js';
     import * as slider from './slider.js';

but in the main.js, after compiling, the slider script is run before utils, so utils are not available in slider.js

Is there a way to set order of imported files?

The content of my files is:

Utils.js:

         let Utils = Utils || {};

         (function($, window, document, app, undefined) {
         'use strict';

         app.isRwdSize = (size) => {
            return size.css('opacity') === 1;
          }

         })(jQuery, window, document, Utils);

slider.js:

          import * as utils from './utils.js';
           let Utils= Utils|| {};

           (function($, window, document, app, undefined) {
               'use strict';

                console.log(app); - shows empty object
           })(jQuery, window, document, Utils);

main.js:

       import * as libs from './libs.js';
       //import * as utils from './utils.js'; - tried here and in slider.js
       import * as slider from './slider.js';

Thanks in advance for any help Raf

No libs.js is just slider library and slider.js is initializing slider. Actually the order of imports after compiling in main.js is: slider.js, libs.js and utils.js — Raf, Jun 21 '17 at 18:27
if `slider.js` is dependent on `utils.js` then `slider.js` needs to import `utils.js` — Hoyen, Jun 21 '17 at 18:27
ok. so there isn't a way to import all files to one main file in a specific order? Because the utils.js are general functions wich I will use in all other files. So I have to import utils.js in every file in order to make sure it gets always available? — Raf, Jun 21 '17 at 18:30
You can import them in your `main.js` if you want, but the imported variables you've got here are only accessible in the file you imported them into. You can't access them from other files. — loganfsmyth, Jun 21 '17 at 18:30
I imported utils.js into slider.js and it still shows after slider after compiling — Raf, Jun 21 '17 at 18:49
Please post the content of your files (at least the part that is necessary to reproduce this) and how you are compiling them. Are you sure there are no circular dependencies? — Bergi, Jun 21 '17 at 18:56

score 0 · Accepted Answer · answered Jun 21 '17 at 21:33

0

Your

let Utils = Utils || {};

lines do not make sense in a modular JS world. Utils should be the modular that've imported. Similarly, (function($, window, document, app, undefined) { as a wrapper isn't something you'd normally see in a module either. I'd expect your files to be along the line of

utils.js:

export const isRwdSize = (size) => {
  return size.css('opacity') === 1;
};

slider.js:

import * as Utils from './utils.js';

console.log(Utils);

main.js:

import * as libs from './libs.js';
import * as slider from './slider.js';

answered Jun 21 '17 at 21:33

loganfsmyth

156,129
30
331
251

Thanks, that helped me a lot, but is there also a way to define order in which the files imported in main.js are executed? – Raf Jun 22 '17 at 14:50
The imports will run in the order they are imported, but usually that isn't important unless you are relying on your modules having global side-effects, which you usually don't want. – loganfsmyth Jun 22 '17 at 17:25

JavaScript ES^ import order

1 Answers1