Блог

У меня есть файл JS import.js (упрощенный):

 let foo;

function fooBar () {

foo = bar;

}

window.onload = () => {
fooBar()
}
  

В моем html-файле у меня есть:

 <script src=import.js type=module></script>
  

Когда я открываю html-файл, на консоли:

 foo;
ReferenceError: foo is not defined
  

Я понимаю, что это связано с тем, что импортированные модули задают только лексическую область видимости, но каков наилучший способ разрешить область видимости импортируемых let
/const переменных в window / global, чтобы я мог получить к ней доступ в консоли окна?

Удалите type="module" , и это сработает. Вы ничего не экспортировали, но вы рассматривали import.js как нечто, экспортирующее модуль. Просто используйте его, как и любой другой скрипт:

 <script src="import.js"></script>
  

Поскольку вы используете <script type="module"> , вы можете использовать import export синтаксис и и передавать то, что вам нужно, например:

 <script type="module">
  import obj from './import.js';
  // do stuff with obj.foo
</script>
  

при import.js экспорте объекта, которому вы присваиваете foo свойство:

 const exportObj = {};
function fooBar () {
  exportObj.foo = bar;
}
window.onload = () => {
  fooBar()
}
export default exportObj;
  

Тем не менее, поскольку он заполняется асинхронно, вы можете рассмотреть возможность экспорта Promise вместо этого:

 <script type="module">
  import fooProm from './import.js';
  fooProm.then((foo) => {
    // do stuff with foo
  });
</script>
  

и

 let foo;
function fooBar () {
  foo = bar;
}
export default new Promise((resolve) => {
  window.onload = () => {
    fooBar();
    resolve(foo);
  }
});
  

(хотя, в идеале, foo вообще не переназначался бы в нижнем коде)