4
votes

Commande npm run-script build (production build), affiche le code source dans le navigateur dans React JS

Je suis nouveau dans le développement de React JS et j'ai créé mon application React à l'aide de la commande npm create-react-app . Lorsque j'ai terminé mon développement et construit mon code d'application, avec un npm run script , cela a créé un nouveau dossier de construction que j'ai ensuite déployé avec mon serveur.

Le problème ici est le suivant: après le déploiement, si j'ouvre mon site Web dans Chrome et exécute des outils de développement, je peux voir tout mon code source au lieu du code minifié dans Chrome, voir l'image ci-dessous:  entrez la description de l'image ici .


0 commentaires

3 Réponses :


2
votes

React est une bibliothèque pour faciliter le développement de votre interface utilisateur pour votre site Web. Il est écrit en JavaScript et JavaScript s'exécute côté client par défaut. c'est-à-dire dans votre navigateur . Le code qui est exécuté côté client peut être visualisé sur votre navigateur par défaut . Ceci est vrai quel que soit le framework côté client que vous choisissez que ce soit React, Backbone, etc ... Si vous ne voulez pas que les autres voient votre code dans le navigateur, j'envisagerais de développer votre interface utilisateur avec un moteur de création de modèles côté serveur. Cela étant dit, vous pouvez masquer votre JavaScript si cela vous préoccupe, il est donc plus difficile pour les autres de voir ce que vous faites. Voici un lien vers un outil de masquage JavaScript que vous pouvez utiliser.

J'espère que cela vous aidera!


2 commentaires

Non, vous pouvez voir n'importe quel code JavaScript: minifié / non minifié puisqu'il s'agit de code côté client. C'est à vous de réduire vous-même le code. La plupart des utilisateurs réduisent leur code JavaScript avant de le lancer en production afin de réduire le nombre d'octets à télécharger par le navigateur pour exécuter leur application Web. C'est pourquoi lorsque vous inspectez le code la plupart du temps, il s'agit de code minifié: (fichiers .min.js)


Veuillez envisager d'accepter ma réponse si vous l'avez trouvée utile :)



0
votes

vous utilisez le devtool: 'source-map' dans votre pack web donc veuillez supprimer le devtool: 'source-map' de votre fichier. vous pouvez prendre une référence sur https://webpack.js.org/guides/production/


1 commentaires

Je crée mon application react en utilisant la commande cli --- npm create-react-app, pas avec webpack



2
votes

pour éviter d'afficher le code source dans la fenêtre de l'inspecteur du navigateur, vous devez désactiver l'indicateur GENERATE_SOURCEMAP, pour ce faire, mettez simplement à jour votre commande package.json build script comme suit

scripts: {
  "build": "GENERATE_SOURCEMAP=false react-scripts build"
}

Ref: github - > https://github.com/facebook/create-react -app / issues / 4162 # issuecomment-373658997


0 commentaires