TL; DR: ¿es posible inyectar variables constantes (que no cambiarán durante el tiempo de ejecución) en los comentarios?
Me he encontrado con una situación muy singular en la que necesito que mis comentarios tengan un valor específico.
Estoy dividiendo código en React y la forma de nombrar fragmentos en React es agregar un comentario al lado de la importación de esta manera:
const MyComponent = lazy(() => import('./MyComponent' /* webpackChunkName: "MyComponent" */) )Esto le da a mis fragmentos cargados perezosos nombres legibles sobre los nombres de identificación generados.
Hay una sección en mi base de código donde genero rutas cargadas de forma diferida para mis componentes en función de la estructura de mi carpeta, pero me he topado con un muro en el que no puedo establecer el nombre de mi fragmento en una variable establecida por una función.
Aquí está mi función:
function generateLink(label: string) { const path = label.replaceAll(' ', ''); return { Element: lazy( () => import(`./pages/${path}`, /* webpackChunkName: "{{this should be path}}" */) ), label, path }; } ¿Hay alguna forma de inyectar la variable de path en ese comentario?
Una nota al margen adicional, esta función generateLink no se ejecuta durante el tiempo de ejecución, los enlaces son estáticos.
Desafortunadamente, no existe un método simple para inyectar variables en sus comentarios. Sin embargo, hay una solución de paquete web para su problema específico, solo use Magic Comments
Actualizar su función de generateLink enlace a lo siguiente debería resolver su problema.
function generateLink(label: string) { const path = label.replaceAll(' ', ''); return { Element: lazy( () => import(`./pages/${path}`, /* webpackChunkName: "[request]" */) ), label, path }; } Ahora, si su path es HomePage , su nombre de fragmento se resolverá en /HomePage.[chunkId].js
Solo asegúrese de que todos los nombres de sus archivos sean únicos; de lo contrario, el paquete web agregará un número como sufijo a sus fragmentos para nombres de archivos no únicos.
Por ejemplo, si tiene 2 nombres de archivo de HomePage.jsx , terminará con /HomePage0.[chunkId].js y /HomePage2.[chunkId].js
Esta pregunta ha sido respondida antes en https://stackoverflow.com/a/52345836/2188587
Puede usar un marcador de posición [request] y el paquete web usará automáticamente el nombre de archivo resuelto.
import(/* webpackChunkName: "[request]" */ `./pages/${path}`)Revisé los documentos, todavía existe.
Excepción: usará el nombre del archivo, por lo que si tiene archivos anidados y la variable de path también puede usar directorios, probablemente no tenga suerte.