javascript - cum pot rezolva eroarea ESLint 'no-unused-var' cu Google Maps

Cred că este o problemă simplă, dar nu o pot rezolva
Am introdus /* export myMap */ sau /* global myMap */ în partea de sus a scriptului, dar erorile continuă

Cod

HTML

<h1>My First Google Map</h1>
<div id="googleMap" style="width:60%;height:600px;margin: auto;"></div>
<script src="https://maps.googleapis.com/maps/api/js? key=YOUR_KEY&callback=myMap"></script>

JavaScript

function myMap() {
    var mapProp= {
        center:new google.maps.LatLng(37.540881, 127.079689),
        zoom:17,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

Când am scris codul așa cum este arătat mai sus, am văzut următoarea eroare

Eroare ESLint 'myMap' este definit dar nu este folosit. (no-unused-vars)
Eroare ESLint 'google' nu este definit. (no-undef)
Eroare ESLint 'map' i se atribuie o valoare dar nu este folosit. (no-unused-vars)
Eroare ESLint 'google' nu este definit. (no-undef)

dar API-ul Google folosește 'google', 'map' și eu folosesc 'myMap'. nu există îndoială
vă rog să ajutați un începător. mulțumesc

p.s. Nu vreau să rezolv cu /* eslint-disable no-unused-vars */

Răspuns #1

Pentru a scăpa de mesajele de eroare trebuie să îi spui linter-ului că google este o variabilă externă și trebuie să îi spui linter-ului că plănuiești să folosești myMap extern. Și, cum nu folosești map mai târziu, poți pur și simplu să elimini var map =.

Linterul este cu adevărat tâmpit și poate verifica doar consistența în cadrul fișierului pe care îl scanează în prezent, nu poate verifica că se folosește o funcție dintr-un alt fișier/script și nu poate verifica că o variabilă provine din altă parte.

Cea mai simplă abordare ar fi să folosești opțiunea global pentru a spune linter-ului că google a fost definit în altă parte și să scrii window.myMap=myMap, astfel atribui în mod explicit myMap obiectului global window (ceea ce pentru codul dat nu schimbă cu adevărat nimic, deoarece myMap este deja definit global) și spui linter-ului că este de așteptat ca acesta să fie folosit în altă parte, în afara acelui script.

Linterul nu poate verifica că myMap este folosită cu adevărat în altă parte și trebuie să aibă încredere în tine în această privință.

/* global google */

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

window.myMap = myMap;

Dar dacă nu folosești un modul de împachetare precum webpack sau rollup și nimic asemănător cu commonjs, amd sau module native es6, atunci ar trebui să îți înfășori întotdeauna codul într-un IIFE pentru a te asigura că poluezi spațiul global cât mai puțin posibil:

(function() {
  /* global google */

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

Și aici, window.myMap=myMap are într-adevăr scopul de a face funcția disponibilă pentru alte scripturi.

În loc să scrii /* global google */, ai putea face inversul lui window.myMap=myMap, dar acest lucru va funcționa doar dacă scripturile sunt încărcate în ordinea corectă, astfel încât scripturile Google Maps să seteze google înainte ca scriptul tău să fie executat:

(function() {
  var google = window.google;

  function myMap() {
    var mapProp = {
      center: new google.maps.LatLng(37.540881, 127.079689),
      zoom: 17,
    };
    new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }

  window.myMap = myMap;
}())

Acum ai o sintaxă care este foarte apropiată de modul în care arată modulele AMD (așa cum sunt folosite în nodejs sau webpack) și ar face mai ușor dacă plănuiești să treci la un bundler în viitor:

var google = require('google');

function myMap() {
  var mapProp = {
    center: new google.maps.LatLng(37.540881, 127.079689),
    zoom: 17,
  };
  new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

exports.myMap = myMap;