Comment supprimer console.log dans la version de production d'une application React créée à l'aide de create-react-app?
3 Réponses :
La solution simple à la question est d'aider d'autres personnes confrontées au même problème.
Réf: https://stackoverflow.com/a/41041580/3574669
La suggestion dans la référence, il faut faire un changement dans le fichier "webpack.config.js". L'application create-react-app utilise le webpack et le fichier de configuration en interne mais il n'est pas possible d'ajouter webpack.config.js dans la racine de mon application pour appliquer le changement. Cela nécessiterait de quitter la configuration create-react-app et de créer sa propre configuration pour le webpack et la configuration. Cela ne me trouve pas facile après avoir beaucoup exploré et écrit un exemple de code.
Puisque je suis très satisfait de create-react-app, je ne veux pas non plus oublier ses avantages.
Enfin, j'ai fait un simple changement dans les node_modules/react-scripts/config/webpack.config.js en ajoutant une ligne drop_console: true, comme mentionné dans la référence. Le code suggéré dans la référence est comme ci-dessous,
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
compress: {
drop_console: true, // << this needs only to remove console.log //
},
},
}),
],
},
};
Cela fonctionne bien pour moi et il n'y a pas de journal de console dans mon application de génération de production par simple changement.
J'utilise "react-scripts": "3.0.1",
Remarque: Cette nouvelle ligne sera nettoyée chaque fois que vous réinstallez "react-scripts" plus tard. Il lui faudrait donc refaire le même changement dans un tel événement.
Comment cela a obtenu 2 votes positifs me dépasse. Vous ne devriez jamais modifier le code dans node_modules comme le mentionne Ajay lui-même, un simple npm je le remplacerai simplement, si vous voulez changer le code dans l'un des dépôts que vous utilisez tant, il suffit de le fourcher et de l'utiliser localement.
@ naor.z J'ai suggéré un seul changement et une simple précaution. Il est également facile à mettre en œuvre et à maintenir pour les développeurs novices. Bifurquer et changer ne sont pas si simples. De plus, cela ne nécessite aucun effort supplémentaire pour faire de l'aide comme suggéré par "hello world" et remplacer le "console.log" dans les codes entiers. Veuillez suggérer toute autre solution plus simple que ce que j'ai suggéré.
-1 pour une approche vraiment dangereuse. Simple - oui, faux - OUI. Un projet avec peu de ces approches est impossible à maintenir pour un travail sérieux. Il y a deux options: # 1 Éjecter la configuration # 2 Utilisez github.com/timarney/react-app-rewired pour modifier les options WebPack Je préfère l'option 2
@zveljkovic La solution n'est pas la meilleure mais simple et maintenable dans le but précis puisqu'une seule ligne à maintenir. Pour un très gros projet et de multiples changements dans la config, je peux être d'accord avec vos 2 options. Mais je ne comprends pas pourquoi l'approche spécifique à des fins spécifiques est dangereuse car elle ne cassera pas le code?
Les gens utilisent SO pour trouver des réponses et ils sont également utilisés dans le code de production / live. La modification des dépendances node_module ne fonctionnera pas dans les environnements CD / CI où le npm i est utilisé pour initialiser les deps. Le n ° 2 ci-dessus est simple et généralement sûr. Regardez-le comme ceci: "Vous pouvez utiliser le couteau comme tournevis mais ce n'est pas la façon de faire le travail".
D'accord. Vérifiera # 2. Merci
c'est ce que j'ai fait. créer un dossier d' helper avec un fichier appelé ConsoleHelper.js
const ConsoleHelper = (data) => {
if (process.env.NODE_ENV === 'production') return;
console.log(data);
}
export default ConsoleHelper;
au lieu de console.log(data) faites ConsoleHelper(data) ;
J'espère que cela t'aides. je consomme beaucoup :)
Si simple mais si efficace, pas besoin de jouer avec Webpack! J'ai ajouté une option pour passer un 2ème paramètre car je déconnecte généralement également un objet quelconque. Merci beaucoup d'avoir publié cela.
@SpencerBigum à tout moment :)
Le moyen le plus simple est de créer un nouveau fichier à la racine nommé logger.js
Dans logger.js
import React from 'react';
var logger = require('../logger.js').logger;
class Demo extends React.Component{
constructor(props){
}
render(){
return(
<p>Hello i am demo component</p>
);
}
componentDidMount(){
logger('I am printing only in developmet')
}
}
export default Demo;
Importez maintenant ce fichier logger.js dans vos composants. Par exemple mon fichier composant est demo.jsx
var logger = function logger(...messages){
if(process.env.NODE_ENV === 'development'){
console.log(messages);
}
}
exports.logger = logger;
C'est bien lorsque vous commencez à coder. Mais que sera-t-il avec des milliers de lignes de code déjà écrites.
@Ajay vous pouvez simplement renommer par lots tous les "console.log" en "logger" et ensuite les importer manuellement dans tous vos fichiers. Je n'aime pas vraiment cette approche, je pense qu'elle ajoute une importation facilement évitable dans presque tous vos fichiers. Je pense que la réponse bonjour le monde est la bonne solution. Vous pouvez simplement créer un script qui change le paramètre drop_console lorsque vous faites quelque chose comme installer toutes vos dépendances
Les questions auto-répondues doivent toujours être publiées sous forme de questions et réponses, et les deux doivent répondre aux exigences de qualité pour tout message. Aussi, pourquoi cela a-t-il besoin d'une autre paire de questions-réponses étant donné qu'elle fait déjà partie de celle à laquelle vous êtes lié?
Depuis que j'ai rencontré un problème lors de l'application de la solution dans mon application créée à l'aide de l'application create-react-app, je l'écris pour aider les autres
Néanmoins, veuillez au moins le diviser en questions et réponses.
Merci, @jonrsharpe pour la suggestion. J'espère que c'est la bonne division maintenant.