隆Estamos en directo en Twitch!

隆Entra y participa!

Imagen de la etiqueta react

驴C贸mo eliminar el c贸digo de las PropTypes antes de subir a producci贸n?

4 minutos de lectura 驴Una errata? Edita el art铆culo

驴Qu茅 son las PropTypes?

Las PropTypes de React nos pemiten verificar los tipos de las props de nuestros componentes. De esta forma, en desarollo, podemos saber si estamos pas谩ndole al componente los tipos de datos correctos.

Antiguamente, las PropTypes estaban incluidas en el propio paquete de React pero desde la versi贸n 15.5 de React hay que instalar la biblioteca prop-types a parte:

npm install prop-types

Una vez instalado, podemos importarlo en nuestro componente e indicar para prop que recibe el componente de qu茅 tipo es y si es obligatoria:

import PropTypes from 'prop-types';

const Component = props => { //... }

Component.propTypes = {
  results: PropTypes.array.isRequired,
  isReady: PropTypes.bool,
  onChange: PropTypes.func,
  numOfResults: PropTypes.number,
}

Esto es s贸lo un ejemplo de las diferentes PropTypes que hay. Pod茅is encontrar una lista completa de posibles PropTypes en la documentaci贸n de React.

Una vez tengamos nuestras PropTypes definidas recibiremos en consola una advertencia si no cumplimos con ese contrato. Esta advertencia, sin embargo, s贸lo funciona en desarrollo.

Entonces, 驴qu茅 sentido tiene que este c贸digo llegue a producci贸n? Y, lo m谩s importante, 驴c贸mo evitamos que llegue a producci贸n y as铆 ahorremos un poco en ancho de banda?

C贸mo eliminar el c贸digo de las PropTypes en producci贸n

Para conseguirlo podemos utilizar el plugin de babel babel-plugin-transform-react-remove-prop-types, y lo podemos instalar de esta forma:

npm install --save-dev babel-plugin-transform-react-remove-prop-types

Ahora, s贸lo nos quedar铆a configurar nuestro .babelrc de forma que nos aseguremos que el transpilador utiliza esta transformaci贸n. Adem谩s, nos aseguramos que s贸lo ocurra en producci贸n, ya que queremos que en desarrollo nos siga mostrando en consola los posibles errores al pasarle props a nuestros componentes.

{
  "env": {
    "production": {
      "plugins": ["transform-react-remove-prop-types"]
    }
  }
}

Y, para ver la diferencia, os dejo con el c贸digo antes y despu茅s de utilizar este plugin:

import PropTypes from 'prop-types';
const Component = props => { //... }

Como ves, el import de las prop-types no ha desaparecido y es que, por defecto, este es el comportamiento del plugin que deja el import de la librer铆a. Lo hace porque, es posible, que algunos componentes usen directamente la librer铆a para otro tipo de cosas y que el plugin no lo haya detectado.

Normalmente esto es suficiente pero, si quieres, puedes seguir leyendo para conocer m谩s opciones que tiene el plugin para afinar su funcionamiento.

M谩s opciones de transform-react-remove-prop-types

A veces queremos mantener las PropTypes porque, por ejemplo, en realidad es un componente que vamos a publicar y, por lo tanto, no vamos a consumirlo nada m谩s compilarlo. Piensa en, por ejemplo, un componente que tengas en GitHub y quieras que otra persone use. Si lo publicas sin PropTypes, de alguna forma, est谩s quit谩ndole funcionalidad muy 煤til.

Para arreglar esto, existe una opci贸n llamada mode donde puedes usar el valor wrap. Por defecto el valor es remove, que las elimina, pero usando wrap conseguiremos mantenerlas y que se envuelvan en un condicional que si el NODE_ENV es production no se evaluen.

{
  "env": {
    "production": {
      "plugins": [
        ["transform-react-remove-prop-types", {
          "mode": "wrap"
        }]
      ]
    }
  }
}

Y, al compilar, quedar铆an as铆:

import PropTypes from 'prop-types';

const Component = props => { //... }

if (process.env.NODE_ENV !== "production") {
  Component.propTypes = {
    results: PropTypes.array.isRequired,
    isReady: PropTypes.bool,
    onChange: PropTypes.func,
    numOfResults: PropTypes.number,
  }
}

Seguramente te est茅s preguntando… 驴No estamos en realidad a帽adiendo m谩s c贸digo? S铆 y no. Te explico. Por un lado, esto har谩 que el c贸digo funcione correctamente en entornos que no sean de producci贸n y, por lo tanto, si no usamos las PropTypes que el componente espera, al menos en desarrollo, veremos una advertencia en la consola.

驴Y en producci贸n? Si llevamos este c贸digo tal c煤al el c贸digo no se evalua pero s铆 seguir谩 all铆. Sin embargo si usas ciertas herramientas como Webpack, Rollup o Uglify, este c贸digo ser谩 eliminado ya que mirar谩 est谩ticamente el valor de NODE_ENV y cambiar谩 la condici贸n a su valor. Si la condici贸n nunca se cumple, entonces elimina el c贸digo. 馃憞

// primera pasada con NODE_ENV = 'production'
import PropTypes from 'prop-types';

const Component = props => { //... }

if (false) { // evalua la condici贸n interna y lo cambia por su valor
  Component.propTypes = {
    results: PropTypes.array.isRequired,
    isReady: PropTypes.bool,
    onChange: PropTypes.func,
    numOfResults: PropTypes.number,
  }
}
// segunda pasada
import PropTypes from 'prop-types';
const Component = props => { //... }

// se elimina el c贸digo porque es una "rama muerta"

Esta no es la 煤nica opci贸n interesante que tiene. Por ejemplo, puedes forzar a eliminar el import de la librer铆a prop-types usando la opci贸n removeImport: true.

Conclusiones

Con este art铆culo espero haberte ayudado a conocer una forma de eliminar las PropTypes de tu c贸digo de producci贸n. Esta en concreto nos funciona en producci贸n en mi empresa sin ning煤n problema pero puede existir alg煤n problema si est谩s usando la librer铆a prop-types para algo que no es su uso esperado. S贸lo tenlo en cuenta y pru茅balo en tus aplicaciones antes de llevarlo a producci贸n. Pero eh, 隆Eso no creo que hiciera falta que te lo dijese! 馃槣

Referencias

babel-plugin-transform-react-remove-prop-types

Comparte el art铆culo