javascript - started - Migración de Webpack 1.x a 2.x

webpack wikipedia

Question

En Webpack 1.x solía hacer lo siguiente de forma regular:

require.ensure([ ''./mod2.js'' ], ( require ) => {
setTimeout(() => {
// some later point in time, most likely through any kind of event
var data = require( ''./mod2.js'' ); // actual evaluating the code
},1100);
}, ''myModule2'');

Con esta técnica, pudimos transferir un paquete de paquetes web a través del cable, pero evaluar los contenidos reales (el código JavaScript) de ese paquete en algún momento posterior. Además, utilizando require.ensure podríamos nombrar el paquete, en este caso myModule2 , por lo que podríamos ver el nombre / alias cuando se ejecutó el paquete web ejecutando el paquete .

En Webpack 2.x, la nueva forma de hacerlo es usar System.import . Si bien me encanta recibir un objeto Promise ahora, tengo dos problemas con ese estilo. El equivalente del código anterior se vería así:

System.import( ''./mod2.js'' ).then( MOD2 => {
// bundle was transferred AND evaluated at this point
});

• ¿Cómo podemos dividir la transferencia y la evaluación ahora?
• ¿Cómo podemos todavía nombrar el paquete?

La documentación de Webpack en Github dice lo siguiente:

La dinámica completa requiere ahora fallar por defecto

Una dependencia con solo una expresión (es decir, require (expr)) ahora creará un contexto vacío en lugar de un contexto del directorio completo.

Mejor refactoriza este código ya que no funcionará con los módulos ES6. Si esto no es posible, puede usar el ContextReplacementPlugin para sugerir al compilador la resolución correcta.

No estoy seguro si eso juega un papel en este caso. También hablan sobre la división de códigos allí, pero es bastante breve y no mencionan ninguno de los "problemas" o cómo solucionarlos.

Answer 1

tl; dr: System.resolve y System.register hacen la mayor parte de lo que desea. El resto de esta respuesta es por qué require.ensure no puede y cómo System.import llama a los demás.

Creo que los módulos ES6 impiden que esto funcione bien, aunque seguirlo a través de las especificaciones relevantes es complicado, por lo que puedo estar totalmente equivocado.

Dicho esto, comencemos con algunas referencias:

1. el cargador de módulos WhatWG
2. la especificación ES6 en módulos (§15.2)
3. la especificación del módulo CommonJS
4. El System.resolve

La primera referencia explica más el comportamiento, aunque no estoy del todo seguro de cómo se normaliza. El último explica los detalles de implementación en el lado JS. Como ninguna plataforma implementa esto todavía, no tengo referencias sobre cómo funciona realmente en la vida real, y tendremos que confiar en la especificación.

El require que ha estado disponible en el paquete web 1.x es un mashup de los requisitos de CommonJS y AMD. El lado de CommonJS se describe en la ref. 3, específicamente en la sección "Contexto del módulo". En ninguna parte la mención require.ensure , ni la "especificación" de AMD (tal como es), por lo que esto es puramente una invención de webpack. Es decir, la característica nunca fue real, en el sentido de estar especificada en algún lugar oficial y elegante.

Dicho esto, creo que se require.ensure conflictos de seguridad con los módulos ES6. Al llamar a System.import debe invocar el método de import desde un objeto Loader . La sección relevante en la referencia # 2 no lo establece explícitamente, pero la §10.1 menciona la §10.1 un cargador al System .

El método Loader.prototype.import no está muy involucrado, y el paso 4 es el único que nos interesa:

4. Devuelva el resultado de la transformación Resolve (cargador, nombre, referencia) con un controlador de cumplimiento que, cuando se le llama con la clave de argumento, ejecuta los siguientes pasos:
   1. Deje que la entrada se asegure de registrarse (cargador, clave).
   2. Devuelva el resultado de transformar LoadModule (entrada, "instanciar") con un controlador de cumplimiento que, cuando se le llama, ejecuta los siguientes pasos:
      1. Vuelva a GarantizarEvaluado (entrada).

El flujo es resolver-registro-carga-evaluar, y usted desea interrumpir la carga y evaluar. Sin embargo, LoadModule cuenta que la etapa de carga llama a LoadModule con la stage configurada para "instantiate" . Eso implica y probablemente requiera que el módulo ya haya sido traducido a través de RequestTranslate , que realiza gran parte del análisis pesado al intentar encontrar el punto de entrada del módulo y así sucesivamente.

Esto ya ha hecho más trabajo de lo que quieres, por lo que parece. Dado que los aspectos básicos de la carga del módulo requieren un punto de entrada conocido, no creo que haya una manera de evitar analizar y evaluar parcialmente el módulo con las llamadas expuestas desde el System . Usted ya lo sabía.

El problema es que System.import no puede saber, hasta después del análisis, si el módulo es un módulo ES6 que debe evaluarse o un paquete de paquetes web que podría diferirse. El análisis debe realizarse para determinar si necesitamos analizar, lo que lleva a un problema de huevo y gallina.

Hasta este punto, hemos estado siguiendo la ruta desde System.import través del Loader . La llamada de import dicta en qué etapa de la importación estamos, asumiendo que desea pasar por el proceso completo de carga de extremo a extremo. Las llamadas subyacentes, como Loader.prototype.load , proporcionan un control detallado sobre esas etapas.

No estoy seguro de cómo invocarías las dos primeras etapas (buscar y traducir), pero si pudieras traducir y registrar un módulo, las llamadas posteriores deberían simplemente evaluarlo y devolverlo.

Si la especificación es precisa, esto debería estar expuesto (en las implementaciones de soporte) a través de la propiedad System.loader y tendría los métodos a los que necesita llamar. Hay partes grandes del flujo a las que no tiene acceso, por lo que le sugiero que no haga esto y que configure su código para que no se ejecute nada significativo cuando se carga un módulo. Si eso no es posible, debe recrear el flujo hacia arriba a través del registro, pero evite la evaluación.