Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

395
Vistas
Webpack Loader/Plugin: reemplaza una variable en una cadena para generar una nueva cadena

Estoy escribiendo un cargador de paquete web personalizado para eliminar el código innecesario que Terser no puede recoger.

Aquí está la salida source de muestra del cargador de paquetes web;

 const SvgsMap = { map1: () => { return '1'; }, map2: () => { return '2'; }, map3: () => { return '3'; }, // ...redacted map100: () => { return '100'; }, }

Tenga en cuenta que arriba entra en el cargador como una cadena. Y tengo una lista blanca de string[] como cuál de ellos debería incluirse en la salida de compilación;

 const whitelistsArr = ["map1"]

Actualmente estoy escribiendo un cargador de paquete web para preprocesarlo antes de incluirlo en el paquete. Que actualmente usa Node VM que supongo podría analizarlo en un objeto javascript, en el que luego puedo eliminar algunas de las propiedades no utilizadas en SvgsMap , luego volver a generarlo como una cadena.

Mi pregunta es;

  1. ¿Lo estoy haciendo de la manera correcta con Loader para eliminarlos? ¿O es realmente un trabajo de complemento de paquete web para hacer esto? ¿Alguna otra alternativa?
  2. Estoy golpeando una roca haciendo esto con VM, parece que no puede mutar el código existente y devolverlo como una cadena. ¿Estoy equivocado aquí?

Cualquier sugerencia es apreciada.


Aquí está el código de mi cargador hasta ahora;

 const path = require( 'path' ); const { loader } = require( 'webpack' ); const vm = require( 'vm' ); const whitelists = ['frame21Web']; const loaderFn = function ( source ) { /** @type {loader.LoaderContext} */ // eslint-disable-next-line babel/no-invalid-this const self = this; const filename = path.basename( self.resourcePath ); const templateWithoutLoaders = filename.replace( /^.+!/, '' ).replace( /\?.+$/, '' ); const vmContext = vm.createContext( { module: {} } ); let newSource = ''; try { const vmScript = new vm.Script( source, { filename: templateWithoutLoaders } ); const cachedData = vmScript.createCachedData(); console.log(cachedData.toString()); // Doesn't seem to output as a string. } catch (err) { console.error(err); } console.log( 'loader', filename, source ); process.exit( 0 ); return source; }; module.exports = loaderFn;
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puede haber un par de respuestas a esta pregunta. Difícil de saber sin conocer el razonamiento detrás de la eliminación.

Si tiene el control del archivo, puede usar una combinación del complemento Define de Webpack y alguna lógica if/else . Por ejemplo

 // in your WP config file new webpack.DefinePlugin({ IS_CLIENT: JSON.stringify(true), // will only be true when compiled via WP });
 // in your module if (process.env.IS_CLIENT) { SvgsMap.map1 = () => '1'; }

El patrón anterior permite agregar/eliminar fragmentos de código para su paquete de Cliente, al mismo tiempo que permite su uso en el Servidor.

La otra opción sería escribir un complemento de Babel personalizado (no un complemento de WP). Encontré este artículo útil en el pasado, cuando tuve que escribir algunos complementos. Babel le brinda más control sobre cómo se procesan las partes de un archivo JS, y puede usar ese complemento fuera de WP (como mientras ejecuta pruebas de unidad).

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda