Почему порядок выполнения моих модулей отличается от ожидаемого?

Question

Я использую Babel для компиляции некоторых ES6 JavaScript до ES5. У меня возникают некоторые проблемы с моим кодом, потому что мои модули оцениваются в неопределенном порядке.

Скажем, у меня есть модули:

// a.js 
class A { 
    constructor() { 
    this.prop = window.randomProperty; 
    console.log("Prop " + this.prop); 
    } 
} 

const a = new A(); 
export default a; 

Этот модуль основан на window.randomProperty, чтобы установить, прежде чем он может создать экземпляр себя.

Теперь у меня есть главный файл:

// main.js 
import "babel-polyfill"; // Not sure if this is relevant 

window.randomProperty = function() { return "hi"; }; 
console.log("randomProperty set"); 

import A from "a"; 

Выход консоли этого:

Prop undefined 
randomProperty set 

Как я могу иметь код выполнять в правильном порядке?

Answer 1

Операции импорта заправлены, поэтому импорт загружается до того, как ваш код будет выполнен. Чтобы выполнить его по своему желанию, вы должны использовать другой загрузчик модуля, например, с помощью require.

const A = require("a"); 

Answer 2

Ваша проблема заключается в том, где вы инстанцируете A, попробуйте сделать это в main.js. Проверьте это:

// a.js 
class A { 
    constructor() { 
    this.prop = window.randomProperty; 
    console.log("Prop " + this.prop); 
    } 
} 

// do not instantiate here 
// const a = new A(); 
export default a; 

Просто убедитесь, что вы создаете объект здесь:

// main.js 
import A from "a"; 

window.randomProperty = function() { return "hi"; }; 
console.log("randomProperty set"); 

const a = new A(); 

Причина, при импорте модуля, он будет ссылаться на какие-либо методы, которые не привязаны к функции или определение класса.

Надеюсь, это поможет!

Answer 3

Импорт загружается (и выполняется, если только циклический), прежде чем модуль будет выполнен статически. В вашем случае a.js будет загружен до того, как будет выполнен main.js.

Если у вас есть зависимости, вы должны объявить их в явном виде:

// random_prop.js 
window.randomProperty = function() { return "hi"; }; 
console.log("randomProperty set"); 

// a.js 
import "random_prop"; 
const a = { 
    prop: window.randomProperty; 
} 
console.log("Prop " + a.prop); 
export {a as default} 

// main.js 
import "babel-polyfill"; // Not sure if this is relevant 
import a from "a"; 
console.log(a.prop); 

Конечно, вы можете также import в random_prop.js в основном. js до a.js, и он будет работать в этой простой настройке, но я бы не рекомендовал полагаться на o n побочных эффектов.