create-react-app开发页面源码显示问题解决方案

最新推荐文章于 2022-07-21 17:40:48 发布
最新推荐文章于 2022-07-21 17:40:48 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： ReactJS 文章标签： ReactJs Security
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anan890624/article/details/123946174
版权

如上图显示，我们的源码可以在开发者模式下被看到。

当我们把SourceMap文件一同部署的时候，在开发者模式下可以看到我们编译之前的源码文件。

解决方案就是，当我们在部署编译文件的时候，不要将SourceMap部署即可。在编译完之后，可以手动删除，如果我们使用CI/CD时，可以在编译时通过设定不生成SourceMap文件。

在CreateReactApp文档中，我们可以看到有一个选项，是设定是否生成SourceMap文件。CreateReactApp

最低0.47元/天 解锁文章
Mic.Liu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
create-react-app开发页面查看源码解决方案
AppleEngineer
04-04 775
在上一篇章中，我们解决了页面源码显示问题，如果我们页面出现错误时，我们还是希望能定位到具体的出错位置。 《create-react-app开发页面源码显示问题解决方案》https://blog.csdn.net/anan890624/article/details/123946174能够定位到具体位置就需要SourceMap文件，为了解决这个问题，想出了一个解决方案，既可以页面不能查看源码，并且在出现问题时，又可以查看源码。 方案就是，编译时生成SourceMap文件，但是在部署项目时，我们将Sourc
react项目发布后，在开发者模式下能看见源码的解决方案
xianyinsuifeng的博客
03-06 605
react项目发布后，在开发者模式下能看见源码的解决方案
create-react-app build 打包隐藏源码
hahahhahahahha123456的博客
01-14 2348
在使用create-react-app时，打包生产环境npm run build，浏览器打开后仍然是可以看到源码的。 在这里以新建一个默认项目为例： App.js 解决办法一： 项目根目录新建.env文件，内容如下： GENERATE_SOURCEMAP=false package.json: "scripts": { "start": "dotenv -...
React不够“硬”，凭什么给你涨薪
web前端开发
10-19 428
时至今日，React仍然是前端领域流行度最高的框架，毫不夸张的说，对于React的掌握程度，是影响面试结果和薪资水平的重中之重。而很多人虽然学习React多年，能够非常熟练地将其作为工具...
解决react项目生产环境部署，浏览器可以看到源码的问题
wbddds的博客
10-27 1390
React生产环境还有源代码的问题解决 前言 create-react-app创建的react项目，打包生成后仍有源代码，这是因为source-map的问题 解决方案、一 1.在项目根目录下新建文件.env.production，内容: GENERATE_SOURCEMAP=false 2.重新打包即可 解决方案、二 1.寻找配置文件webpack.config.js，代码如下 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'f
create-react-app-read:解析create-react-app源码-源码解析
03-24
解析create-react-app脚手架原始码 配置ts环境 安装@types/react @types/react-dom ， typescript awesome-typescript-loader等插件 在webpack.config.js中配置解析.tsx文件的加载器： { test: /\.tsx?$/, loader: ...
详解使用create-react-app快速构建React开发环境
08-27
`create-react-app`自动创建的项目基于Webpack和ES6，提供了诸如模块热替换、源码映射等开发便利性。 在项目中使用Less样式表，你需要暴露配置文件，因为`create-react-app`默认不支持Less。执行`npm run eject`...
详解开发react应用最好用的脚手架 create-react-app
08-27
"详解开发React应用最好用的脚手架 Create-React-App" Create-React-App是一个非常流行的React应用开发脚手架，由Facebook官方开发，具有简洁、快速、易用的特点。下面是Create-React-App的知识点总结： 1. 什么是...
react以create-react-app为基础创建项目
11-30
`create-react-app` 是由Facebook开发的一个工具，旨在简化React应用的初始设置过程。通过`create-react-app`，开发者可以快速搭建一个符合最佳实践的基础React项目结构，无需手动配置Webpack、Babel或开发服务器等...
create-react-app
03-19
`create-react-app` 是一个由 Facebook 推出的开源工具，用于快速搭建 React 应用程序的脚手架。它简化了初始化过程，免去了配置 Webpack、Babel 等构建工具的繁琐工作，让开发者可以立即开始编写 React 组件，而...
超炫的高仿知乎日报项目源码
08-20
超炫的高仿知乎日报项目源码+apk+github地址 另外我把编写过程记录了下来 教程地址：http://krelve.com/android/130.html
React打包中不想要sourceMap，但是在命令里加‘GENERATE_SOURCEMAP=false‘后windows下报错
duansamve的博客
06-04 2026
react打包发生产时速度有点慢，我不想要sourceMap文件，于是在build改了一下脚本命令： "build": "GENERATE_SOURCEMAP=false react-app-rewired build"
create-react-app之packages/create-react-app核心源码解读（一）
coco723的博客
07-21 295
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYRozzAK-1658396374476)(https//p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/121289cacda143268806988d9e9292f2~tplv-k3u1fbpfcp-watermark.image?为5.0.1,判断最新版本有，获取到的当前版本小于最新版本，给出版提示信息，否则，判断是否使用。判断当前运行node版本，小于V14，抛错，退出；......
react render没更新_React源码解析（上）
weixin_39784263的博客
11-21 84
资源1. React中文网：https://react.docschina.org2. React源码：https://github.com/facebook/react3. Debug React: https://github.com/bubucuo/DebugReact4. 源码指引:https://www.processon.com/view/link/5dd68342e4b00...
create-react-app 使用craco修改webpack编译时输出隐藏日志信息
nihaio25的博客
01-13 1400
前言：create-react-app 项目名，创建出一个项目来，使用yarn start的时候发现输出很多的日志信息，这些日志信息开发的时候像我这种只有做项目优化的时候才想看到，但是进行开发的时候我们并不想看到。 如图： 如何使用 craco修改webpack参考这篇 create-react-app craco进行webpack配置(修 改篇) 不过不能完全安照他的来，安装的时候要使用yarn add来安装使用npm可能装不上。 然后我只说怎么屏蔽这些输出，如果在craco.config.js文件你直接
React项目如何打包发布及遇到的坑
热门推荐
天工开物
06-29 5万+
刚开始学习react，遇到一些小问题。我使用的是create-react-app脚手架生成的项目。这个脚手架一键生成react项目，非常方便。先简单记录一下这个新建项目的过程。一、打包1、安装使用npm install -g create-react-app 122、生成新项目create-react-app my-app 12(生成的项目最好不要用驼峰式命名，否则后面生成文件提示也会让你改)３、...
解决Chrome 本地调试React，Sources下找不到源代码的问题
LYY1448019681的博客
09-12 5894
解决Chrome 本地调试React，Sources下找不到源代码的问题 先看一下，我在Sources下的代码情况，代码都是已经编译过的，导致我本地无法调试，之前一直都是可以调试的状态，忽然一下看不到源代码了，不能调试还是有点心慌。 解决方法： 后来仔细想了一下今天对代码做了哪些修改，想到更改了webpack的配置，将devtool做了修改。 于是找到问题原因。 当webpack的devtool 为 (none) 时，打包后 本地调试 就会没有源代码。 具体可参照 webpack 的
[react] 在React中如果去除生产环境上的sourcemap？
歌谣的博客
11-19 399
[react] 在React中如果去除生产环境上的sourcemap？ GENERATE_SOURCEMAP=false react-scripts build If you use the Create-React-APP 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
执行PHP文件时，页面显示源码的三大原因
吹笛少年的博客
06-21 9043
DW编辑PHP代码运行时，页面显示源码的原因 1、PHP标记的代码段可能标签没弄好，服务器没法解析。 2、服务器站点可能没有配好，若配置本地服务器的话，站点设置对象——服务器要设为测试，配置成远程会出现部分php源码。 3、配置本地站点时，文件夹一定要放在Apache中www文件夹下，否则站点失效eg：C:/Dota/www/kk. 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的
create-react-app 安装vconsole
最新发布
01-13
根据提供的引用内容，可以通过以下步骤来演示如何在create-react-app项目中安装vconsole： 1. 首先，确保你已经在项目中安装了create-react-app。如果没有安装，可以使用以下命令进行全局安装： ```shell $ yarn ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值