React 打包时如何关闭源代码混淆

React 开发中,使用 npm build 命令进行生产代码打包,为了压缩代码并尽量保证代码的安全性,React 打包时会代码进行压缩和混淆,但是有时我们需要 debug 生产环境的源代码,例如当我们调试 SSR 的项目时,需要禁用混淆。本文将介绍一种禁用生产包混淆源代码的方式。

打包源代码需要安装一下两个依赖包

  1. craco Create React App Configuration Override),修改 Webpack 配置文件。
  2. crossenv: 修改配置环境

安装依赖

yarn add cross-env --save-dev
yarn add @craco/craco --save-dev

添加配置文件

在项目根目录下添加 craco.config.js 配置文件,需要排除 react-refresh/babel,否则启动会报错。

module.exports = {webpack: {configure: (webpackConfig, { env }) => {// Enable source maps for both development and productionwebpackConfig.devtool = 'source-map';if (env === 'development') {// No React Refresh Webpack Plugin// Modify Babel loader to exclude React Refresh pluginwebpackConfig.module.rules.forEach(rule => {if (rule.oneOf instanceof Array) {rule.oneOf.forEach(oneOf => {if (oneOf.loader && oneOf.loader.includes('babel-loader')) {// Ensure no React Refresh plugin is addedoneOf.options.plugins = (oneOf.options.plugins || []).filter(plugin => !plugin.includes('react-refresh/babel'));}});}});}if (env === 'production') {// Disable minification for productionwebpackConfig.optimization.minimize = false;webpackConfig.optimization.minimizer = [];}return webpackConfig;}}
};

修改 package.json

将 package.json 配置文件中的脚本启动命令改为 craco 命令。

  "scripts": {"start": "craco start","build": "react-scripts build","test": "craco test","eject": "react-scripts eject","build:dev": "cross-env NODE_ENV=development FAST_REFRESH=true craco build","build:prod": "cross-env NODE_ENV=production craco build"},

启动并查看代码

下图中可以看到代码未混淆。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/38340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

成为画图大师,用图表讲故事

这些问题你是否遇到过: 项目总结会上,如果用数据呈现你做的价值? 完善详尽的数据分析得出了让人信服的结论,如何呈现在BOSS面前? 我们要的不是数据,而是数据告诉我们的事实 数据很重要,但只是原料,所以…

gcc编译过程简介

gcc编译过程简介 文章目录 gcc编译过程简介预编译编译语法分析语法分析语义分析中间语言生成目标代码生成和优化 汇编链接 GCC编译程序的过程可以分为以下四个步骤: 预处理(preprocessing)编译(compilation)汇编&#…

(单机架设教程)凯旋|当年的QQ游戏

前言 今天给大家带来一款单机游戏的架设:凯旋 , 当年的QQ游戏 如今市面上的资源参差不齐,大部分的都不能运行,本人亲自测试,运行视频如下: 凯旋单机 搭建教程 此游戏架设需要安装虚拟机, 没有…

[AIGC] 深入了解标准与异常重定向输出

在操作系统和编程环境下,有时我们需要更加精细地控制程序的输入或输出过程,这就涉及到了标准输入输出流,以及重定向的概念。接下来,我们将详细介绍标准输出、标准错误输出,以及如何进行输出重定向。 文章目录 1. 标准输…

Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载)

场景 Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件): Leaflet中加载离线OSM瓦片地图(使用OfflineMapMaker切割下载离线png地图文件)_offline map maker-CSDN博客 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与…

Golang-slice理解

slice golang-slice语雀笔记整理 slicego为何设计slice?引用传递实现扩容机制 go为何设计slice? 切片对标其他语言的动态数组,底层通过数组实现,可以说是对数组的抽象,底层的内存是连续分配的所以效率高,可…

Proxmox VE(PVE)上手配置指南

Proxmox VE(PVE)是一款开源虚拟化管理平台,集成了KVM和LXC技术,支持虚拟机和容器管理。它提供了一个基于Web的用户界面,支持高可用性集群、备份和恢复、实时迁移等功能,适用于企业级虚拟化环境。. 以下为安…

博客都在使用的打字机效果,居然这么简单?

效果展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>body …

C语言 | Leetcode C++题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; #define MAX_NODE_NUM 100 int* rightSideView(struct TreeNode* root, int* returnSize){if (root NULL) {*returnSize 0;return NULL;}int *res (int *)malloc(sizeof(int) * MAX_NODE_NUM);int cnt 0;struct TreeNode **record (st…

详解 HTTP 中间人攻击

什么是中间人攻击&#xff1f; 攻击者将自己插入通信过程中&#xff0c;以窃取&#xff0c;篡改数据。通信的两端不知道中间人的存在&#xff0c;他们以为在与对方直接通信&#xff0c;实际上他们的通信已经被监听或干扰。WIFI 路由器被破解之后就能进行中间人攻击。 中间人攻…

50-4 内网信息收集 - 本机信息收集

一、内网信息收集 内网信息收集可以从以下几个方面进行:本机信息收集、域内信息收集、内网资源探测等。通过这些步骤,我们可以全面了解当前主机的角色和所处内网的拓扑结构,从而选择更合适、更精准的渗透方案。 二、本机基础信息收集 在本机基础信息收集阶段,可以执行以下…

EasyExcel数据导入

前言&#xff1a; 我先讲一种网上信息的获取方式把&#xff0c;虽然我感觉和后面的EasyExcel没有什么关系&#xff0c;可能是因为这个项目这个操作很难实现&#xff0c;不过也可以在此记录一下&#xff0c;如果需要再拆出来也行。 看上了网页信息&#xff0c;怎么抓到&#x…

周记-2024第26周-6.25~6.30

现在是周日晚上21:58&#xff0c;我开始做本周总结。 工作 .1 开始接手量产模型的训练&#xff0c;新工作有新的小组长&#xff0c;我还是有些羞怯&#xff0c;不是很好意思频繁找他。要自信一点&#xff0c;大方一点&#xff0c;一个堂堂男子汉&#xff0c;怎么感觉工作中娘…

SpringBoot + mkcert ,解决本地及局域网(内网)HTTPS访问

本文主要解决访问SpringBoot开发的Web程序,本地及内网系统,需要HTTPS证书的问题。 我测试的版本是,其他版本不确定是否也正常,测试过没问题的小伙伴,可以在评论区将测试过的版本号留下,方便他人参考: <spring-boot.version>2.3.12.RELEASE</spring-boot.vers…

朋友问我Java中“::”是什么意思?我汗流浃背了......

目录 一&#xff1a;什么是&#xff1a;&#xff1a;&#xff1f; 二&#xff1a;方法引用的几种类型 1.引用静态方法 2.引用特定对象的实例方法 3.引用特定类型的任意对象的实例方法 4.引用构造方法 三&#xff1a;方法引用的适用场景 四&#xff1a;总结 一&#xff1…

ssh转发功能入门

端口转发概述 端口转发&#xff0c;能够将其他TCP端口的网络数据通过SSH链路转发&#xff0c;并且提供了ssh的加密和解密的服务。 ssh端口转发有如下这些优点&#xff1a; 提供了ssh的加密传输&#xff0c;利于安全能够突破防火墙限制 目前ssh端口转发有如下几种方式&#x…

spring模块(二)SpringBean(2)BeanWrapperImpl

一、介绍 1、简介 BeanWrapper是Spring中一个很重要的接口&#xff0c;Spring在通过配信息创建对象时&#xff0c;第一步首先就是创建一个BeanWrapper。 Spring低级JavaBeans基础设施的中央接口。通常来说并不直接使用BeanWrapper&#xff0c;而是借助BeanFactory或者DataBi…

eFuse基本概念

From&#xff1a;GTP-4o eFuse&#xff08;电子熔丝&#xff09;是一种在集成电路&#xff08;IC&#xff09;设计中常用的可编程熔丝技术。它在芯片中起着至关重要的作用&#xff0c;主要用于配置、调整、修复和安全相关的功能。以下是关于 eFuse 在芯片中的用途和相关技术的…

学习一下宏的##和...

##&#xff1a;如果参数不存在则忽略逗号和参数 ...&#xff1a;可变参数 栗子&#xff1a; #define Debug(fmt, args...) LOG("DEBUG", fmt, ##args) ...: ... 是C和C预处理器中的一个特殊标记&#xff0c;用于表示一个可变数量的参数。在宏定义中&#xff0c;可…

【课程总结】Day13(上):使用YOLO进行目标检测

前言 在上一章《【课程总结】Day11&#xff08;下&#xff09;&#xff1a;YOLO的入门使用》的学习中&#xff0c;我们通过YOLO实现了对图片的分类任务。本章的学习内容&#xff0c;将以目标检测为切入口&#xff0c;了解目标检测流程&#xff0c;包括&#xff1a;数据标准、模…