Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

392
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda