A logo showing the text blog.marcnuri.com
English
Inicio»Front-end»Gatsby: Deshabilitar source maps en producción

Entradas Recientes

  • Fabric8 Kubernetes Client 7.2.0 está disponible!
  • Conectarse a un servidor MCP con JavaScript y AI SDK
  • Conectarse a un servidor MCP con JavaScript y LangChain.js
  • El Futuro de las Herramientas para Desarrolladores en la era de la IA
  • Conectarse a un servidor Model Context Protocol (MCP) con Java y LangChain4j

Categorías

  • Antiguo
  • Front-end
  • Go
  • Herramientas
  • Industria y negocios
  • Inteligencia Artificial
  • Java
  • JavaScript
  • Operaciones
  • Personal
  • Proyectos personales

Archivos

  • mayo 2025
  • abril 2025
  • marzo 2025
  • febrero 2025
  • enero 2025
  • diciembre 2024
  • noviembre 2024
  • agosto 2024
  • junio 2024
  • mayo 2024
  • abril 2024
  • marzo 2024
  • febrero 2024
  • enero 2024
  • diciembre 2023
  • noviembre 2023
  • octubre 2023
  • septiembre 2023
  • agosto 2023
  • julio 2023
  • junio 2023
  • mayo 2023
  • abril 2023
  • marzo 2023
  • febrero 2023
  • enero 2023
  • diciembre 2022
  • noviembre 2022
  • octubre 2022
  • agosto 2022
  • julio 2022
  • mayo 2022
  • marzo 2022
  • febrero 2022
  • enero 2022
  • diciembre 2021
  • noviembre 2021
  • octubre 2021
  • septiembre 2021
  • agosto 2021
  • julio 2021
  • diciembre 2020
  • octubre 2020
  • agosto 2020
  • junio 2020
  • mayo 2020
  • marzo 2020
  • febrero 2020
  • enero 2020
  • noviembre 2019
  • octubre 2019
  • julio 2019
  • diciembre 2018
  • agosto 2018
  • julio 2018
  • junio 2018
  • mayo 2018
  • marzo 2018
  • febrero 2018
  • noviembre 2017
  • octubre 2017
  • agosto 2017
  • julio 2017
  • enero 2017
  • julio 2016
  • enero 2016
  • diciembre 2015
  • noviembre 2015
  • diciembre 2014
  • marzo 2014
  • febrero 2011
  • junio 2008
  • mayo 2008
  • abril 2008
  • enero 2008
  • junio 2007
  • mayo 2007
  • abril 2007
  • marzo 2007

Gatsby: Deshabilitar source maps en producción

2019-07-28 en Front-end etiquetado Frontend / Gatsby / JavaScript / React / Página Estática / Web / Webpack por Marc Nuri | Última actualización: 2021-09-05
English version

Introducción

Gatsby es una plataforma para la generación de webs estáticas basada en ReactJS y alimentada por GraphQL. Llevo bastante tiempo utilizando Gatsby y más recientemente lo he empleado para reconstruir mi página personal por completo.

Una de las características que más me ha llamado la atención es que los source maps correspondientes al código Javascript transpilado se publican en los builds de producción por defecto en la V2. Es bueno ser transparentes y publicar el código fuente para compartir con la comunidad software, pero tal vez este sea un efecto indeseado (especialmente cuando desarrollemos websites comerciales).

En esta publicación veremos como podemos configurar Gatsby para publicar los source maps en función del entorno para el que estemos lanzando el build (generarlos para el entorno de desarrollo y deshabilitar la generación para el entorno de producción).

Customizando la configuración de Webpack en Gatsby

La generación de los source maps se controla a través de la configuración de Webpack, más concretamente mediante la opción devtool. Lo que queremos conseguir es modificar la configuración de Webpack de Gatsby cuando lancemos el script para el build, de modo que la generación de source maps esté desactivada si el entorno para el que se lanza el build es producción.

Gatsby ofrece la posibilidad de modificar la configuración de Webpack tanto para plugins como para el proyecto actual añadiendo configuraciones al fichero gatsby-node.js a través de la acción setWebpackConfig.

En el siguiente fragmento se muestra el código insertado en mi fichero gatsby-node.js:

1exports.onCreateWebpackConfig = ({ getConfig, actions }) => {
2  if (getConfig().mode === 'production') {
3    actions.setWebpackConfig({
4      devtool: false
5    });
6  }
7};

En la línea 2 comprobamos si el modo del build es 'production', para modificar condicionalmente la configuración de Webpack para la opción devtool (hay que recordar que los source maps se generan siempre por defecto en Gatsby). En las líneas 3-5 se sobrescribe únicamente la configuración de devtool dejando su valor false de modo que se deshabilite la generación de source maps.

Es importante remarcar que el directorio public no se limpia cuándo se lanza el comando gatsby build. Si la configuración de Webpack se ha modificado después de haber hecho ya algún build y no se ha vaciado el directorio public todavía habrá source maps procedentes de los builds anteriores. Lo habitual es que haya algún paso dentro de la sección de scripts del fichero package.json para limpiar este directorio.

Webpack ReactJS Gatsby
Webpack ReactJS Gatsby
Twitter iconFacebook iconLinkedIn iconPinterest iconEmail icon

Navegador de artículos
Fedora: Cómo instalar el entorno de escritorio CinnamonIsotope Mail Client: Introducción y funcionalidades
© 2007 - 2025 Marc Nuri