Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

403
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!