Estoy trabajando en un curso de React Redux e instalamos Redux devtools usando npm install --save-dev redux-devtools-extension y lo usamos así:
import { composeWithDevTools } from 'redux-devtools-extension' const store = createStore( reducer, composeWithDevTools() ) Tengo entendido que el --save-dev significa que este paquete no se usará en producción. La siguiente sección del curso presenta Redux Thunk y se instala usando npm install redux-thunk . Si no me equivoco, esto significa que este paquete se usará en producción. Sin embargo, thunk se usa en el curso de esta manera:
import thunk from 'redux-thunk' import { composeWithDevTools } from 'redux-devtools-extension' const store = createStore( reducer, composeWithDevTools( applyMiddleware(thunk) ) ) thunk se usa dentro de una función de paquete que se instaló usando --save-dev . ¿Cómo funcionaría esto en producción ya que esa versión no instalaría redux-devtools-extension ?
--save-dev agrega el paquete de terceros a las dependencias de desarrollo del paquete. No se instalará cuando alguien ejecute npm install directamente para instalar su paquete. Por lo general, solo se instala si alguien clona su repositorio de origen primero y luego ejecuta npm install en él.
Una respuesta corta es no , no debería funcionar en producción. Cuando instaló una dependencia en modo de desarrollo, solo debería tener fines de desarrollo. Como instaló las dependencias a través --save-dev , las dependencias no se incluirán en el código de producción. Dado que ha incluido sus dependencias en su código sin ninguna declaración condicional (si declaración) para determinar si está o no en modo de desarrollo y ha instalado la dependencia solo en modo dev, el código ya se rompe en
import { composeWithDevTools } from 'redux-devtools-extension'Si realmente desea usar las herramientas de desarrollo solo en un entorno de desarrollo, instálelo en modo no desarrollador y use la siguiente declaración de importación:
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';Mientras tanto, si solo quieres usarlo en producción, importa esto.
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';Y si desea utilizar estas herramientas de desarrollo de cualquier manera, puede volver a utilizar la primera declaración de importación, ya que no verificará su entorno.
Si la primera declaración funciona bien para el entorno de producción, no tendrá sentido que el autor/colaborador incluya la variante developmentOnly y logOnlyInProduction en el código fuente de la biblioteca.
La diferencia de cada variante está disponible en el código src:
https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/developmentOnly.js