Estoy creando una aplicación web progresiva con la biblioteca Workbox. Hay un ejemplo en el documento de Workbox que muestra que las declaraciones de importación se pueden omitir usando una constante.
Código con declaraciones de importación:
import {registerRoute} from 'workbox-routing'; import {CacheFirst} from 'workbox-strategies'; import {CacheableResponse} from 'workbox-cacheable-response'; registerRoute( ({request}) => request.destination === 'image', new CacheFirst() );Código sin declaraciones de importación:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js'); const {registerRoute} = workbox.routing; const {CacheFirst} = workbox.strategies; // same as const CacheFirst = workbox.strategies.CacheFirst const {CacheableResponse} = workbox.cacheableResponse; registerRoute( ({request}) => request.destination === 'image', new CacheFirst() );¿Cómo es posible instanciar un objeto CacheFirst (nuevo CacheFirst()) usando una constante en lugar de una importación? ¿Es esta una característica de ES6 o algo específico de Workbox? No pude encontrar una respuesta en Google o SO. ¿Cómo se relaciona el objeto CacheFirst con la constante?
Como vengo de PHP, esta construcción es nueva para mí.
Centrémonos en una de las tres líneas.
import {CacheFirst} from 'workbox-strategies'; esto busca el módulo workbox-strategies e importa un miembro exportado del mismo, por lo que tiene que parecerse un poco a esto:
// in node_modules/workbox-strategies/index.js: function CacheFirst(){ // implementation... - could also be a class with constructor before transpilation etc. } export CacheFirst;importScriptsAhora para el segundo ejemplo. Aquí la magia realmente sucede en
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');que tiene que hacer algo como
// in https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js // define global var workbox var workbox = {}; // isolate rest of the declarations so they don't pollute the global namespace (()=>{ function CacheFirst(){ // implementation... - could also be a class with constructor before transpilation etc. } workbox.strategies = { CacheFirst: CacheFirst, //create a member named CacheFirst and assign the function CacheFirst to it - could use AutoProperties } })(); Entonces, después de la llamada importScripts() , tiene un objeto de workbox de trabajo global. Ahora solo crea un alias para algunos miembros para facilitar el acceso. Usando la desestructuración esto parece
const {CacheFirst} = workbox.strategies; // create actual instance const myCacheFirstStrat = new CacheFirst();Pero también podría usar el objeto webpack global directamente
const myCacheFirstStrat = new workbox.strategies.CacheFirst();Eso responde tu pregunta?