Soy nuevo en el mundo de la automatización/prueba/agrupación con JS y tengo la configuración de paquetes en su mayor parte, pero noté que cuando crea archivos, en realidad no los guarda con la parte .min.js en el archivo. nombre. Me pregunto si hay una manera de hacer esto sin tener que cambiar el nombre del archivo de compilación manualmente.
También estoy tratando de encontrar una manera de que el paquete revise los archivos de origen originales (en los que trabajas) y los limpie y los embellezca para mí.
Así es como se ve mi paquete.json
{ "name": "lpac", "version": "1.3.1", "description": "", "dependencies": {}, "devDependencies": { "parcel": "^2.0.0-rc.0" }, "scripts": { "watch": "parcel watch --no-hmr", "build": "parcel build" }, "targets": { "lite-maps": { "source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"], "distDir": "./path/build/" } }, "browserslist": "> 0.5%, last 2 versions, not dead", "outputFormat" : "global", }Revisé los documentos pero no pude encontrar nada sobre pelusa o embellecimiento con paquete. ¿Cómo puedo hacer eso? Si tiene enlaces de tutoriales para hacerlo, también comparta porque los recursos/tutoriales parecen escasos para cualquier otra cosa que no sea la visualización básica y la creación de archivos.
Desafortunadamente, no hay una configuración lista para usar que pueda hacer que la salida de javascript del paquete se vea como [fileName].[hash].min.js en lugar de [fileName].[hash].js . Sin embargo, la extensión .min.js es solo una convención para mantener los archivos de salida separados de los archivos de origen (no tiene ningún efecto en el tiempo de ejecución) y el hecho de que el paquete hace el hash de contenido automático hace que sea bastante fácil decir esto. Y aunque no tienen una extensión .min.js , estos archivos de salida definitivamente aún están minimizados y optimizados de manera predeterminada .
Sin embargo, si realmente desea esto de todos modos, es relativamente simple escribir un complemento Namer para el paquete que agregue .min.js a todos los resultados de JavaScript:
Aquí está el código:
import { Namer } from "@parcel/plugin"; import path from "path"; export default new Namer({ name({ bundle }) { if (bundle.type === "js") { const filePath = bundle.getMainEntry()?.filePath; if (filePath) { let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath)); // See: https://parceljs.org/plugin-system/namer/#content-hashing if (!bundle.needsStableName) { baseNameWithoutExtension += "." + bundle.hashReference; } return `${baseNameWithoutExtension}.min.js`; } } // Returning null means parcel will keep the name of non-js bundles the same. return null; }, }); Luego, suponiendo que el código anterior se haya publicado en un paquete llamado package parcel-namer-js-min , lo agregaría a su pipeline de paquetes con este .parcelrc :
{ "extends": "@parcel/config-default", "namers": ["parcel-namer-js-min", "..."] }Aquí hay un repositorio de ejemplo donde esto está funcionando .
La respuesta a su segunda pregunta (¿hay "una forma de que el paquete revise los archivos de origen originales (en los que trabaja) y los limpie y embellezca para mí") es, lamentablemente, no.
Sin embargo, la parcela puede funcionar bien junto con otras herramientas de línea de comandos que hacen esto. Por ejemplo, tengo la mayoría de mis proyectos configurados con un comando de format en el package.json , que se ve así:
{ ... "scripts": { ... "format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern" } ... {Puede hacer que ese comando se ejecute automáticamente para git commits y push con husky .