Niewłaściwe działanie transpilatora

Question

Witam,

W skrypcie mam następującą pętlę:
 

function resetCats(){
let images = document.querySelectorAll('.cats');
let size = images.length;
for (i=0; i<size; i++)
    images[i].remove();
}

Z użyciem Babela transpiluję kod z @babel/preset-env, czyli transpilator powinien np. dodać słowo kluczowe var przed zmienną i będącą iteratorem pętli. Po wykonaniu skryptu Babela pętla w pliku źródłowym wygląda następująco:

function resetCats() {
  var images = document.querySelectorAll('.cats');
  var size = images.length;

  for (i = 0; i < size; i++) {
    images[i].remove();
  }

Jak widać, zmienna i pozostaje bez słowa kluczowego, przez co skrypt odpalony w strict mode program wyrzuca error.

Dlaczego użycie transpilatora nie skutkuje dopisaniem słowa kluczowego var, jak powinno być w tym przypadku?

Załączam plik konfiguracyjny babel.config.json:
 

{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

 

Comments

Swoją drogą, dlaczego sam nie zadeklarowałeś zmiennej i przez var lub let? Gdybyś użył lintera, to powinien krzyczeć, że masz niezadeklarowaną zmienną (lub implicit global) w nagłówku pętli - możesz go skonfigurować żeby sprawdził pliki projektu zanim proces budowania się rozpocznie.

Answer 1

> Dlaczego użycie transpilatora nie skutkuje dopisaniem słowa kluczowego var?

Nie wiem, ale proponuję dopisać w Twoim kodzie:

for (let i=0; i<size; i++)

Powinno rozwiązać problem z brakiem var

Comments

Wiem, ale transpilator ma działać w taki sposób, że rzeczy nieprzechodzące przez interpreter przeglądarki (głównie rzeczy ze standardu ES2015+) kompiluje w taki sposób, żeby przeglądarka je rozumiała. Chrome nie ma problemu z brakiem var, IE już może, a Babel jest po to, żeby takich mankamentów nie musieć pilnować samemu.

---

Wszystko działa wszystko poprawnie.

Stworzyłeś zmienną globalną i oczekujesz że transpilator zamieni ją na zmienną o zasięgu funkcyjnym. Czemu miałby to zrobić?

Answer 2

Podejrzewam, że skoro sam nie użyłeś ani var ani let to po prostu nie dodał. W sumie dlaczego miałby dodawać? Przecież nie każda zmienna używana wewnątrz funkcji musi być w niej zadeklarowana. Może pochodzić z zakresu nadrzędnego.