设置环境变量关闭react-scripts的sourceMap生成

最新推荐文章于 2023-07-31 12:09:12 发布
最新推荐文章于 2023-07-31 12:09:12 发布
阅读量1k 收藏
点赞数
分类专栏： 炒冷饭 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/holdsky/article/details/117919765
版权
关于GENERATE_SOURCEMAP的作用原理在这篇文章中介绍过。create-react-app ：不产生source-map来缩减打包文件体积可以通过创建.env环境变量文件影响react-scripts start/build等命令。其实还有另一种更灵活的方式设置环境变量,使用export可以对不同的命令设置不同的环境变量.打开package.json，找到scripts配置项 "scripts": { "start": "react-scripts start", "b
摘要由CSDN通过智能技术生成

关于GENERATE_SOURCEMAP的作用原理在这篇文章中介绍过。
create-react-app ：不产生source-map来缩减打包文件体积

可以通过创建.env环境变量文件影响react-scripts start/build等命令。其实还有另一种更灵活的方式设置环境变量,使用export可以对不同的命令设置不同的环境变量.

打开package.json，找到scripts配置项

  "scripts": {
   
    "start": "react-scripts start",
    "build": "react-scripts build",
最低0.47元/天 解锁文章
缤纷冷泪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用webpack优化项目
szl199107101035的博客
04-13 1052
1、生产环境关闭productionSourceMap、css sourceMap SourceMap是当页面出现某些错误，能够定位到具体的某一行代码，Sourcemap就是帮你建立这个映射关系的，方便代码调试。 判断是否是生产环境 const isProduction = process.env.NODE_ENV === 'production' module.exports = { productionSourceMap: !isProduction, // 关闭生产环境的sou..
Webpack关闭SourceMap
夜雨Gecer的博客
12-07 2711
只需将【productionSourceMap】设置为falsevue.config.js文件 二. 未使用VueCli的Webpack项目 需要将【devtool】设置为 false 三. 其他情况 当完成以上设置后还是出现sourcemap，可以看一下通过【cdn】引入的库，如下图这种则需要将代码下载到本地后删除最后一行，之后用本地文件替换远端文件。
react项目关闭sourcemap
weixin_45894046的博客
02-08 575
方案一：在package.json修改； 方案二：使用eject暴露出配置文件时，修改webpack.config.js
Vue上线打包优化
最新发布
weixin_60895836的博客
07-31 786
在开发Vue项目时，我们通常需要对项目进行打包和优化，以便在生产环境中提供更高性能的应用程序。本篇博客将介绍一些Vue上线打包优化的技巧，帮助您优化应用程序的加载速度和性能。
[react] 在React中如果去除生产环境上的sourcemap？
歌谣的博客
11-19 399
[react] 在React中如果去除生产环境上的sourcemap？ GENERATE_SOURCEMAP=false react-scripts build If you use the Create-React-APP 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
create-react-scripts：轻松地将react-scripts扩展到您自己的react-scripts版本
01-31
不推荐使用很抱歉，该项目尚未积极开发，也没有计划支持react-scripts 2.0。 我创建此项目的主要目的是轻松扩展cra配置以支持服务器端渲染。 最近，我将所有私人项目移到了不再依赖react-scripts的nextJs上。 如果有...
uiw-react-baidu-map-master_react-baidu-map_React_
10-01
在本文中，我们将深入探讨如何使用“uiw-react-baidu-map-master”这个开源项目来在React应用程序中集成百度地图。这个项目是专为React开发者设计的，它提供了一个简洁、高效的API，使得在React应用中添加百度地图...
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native-amap3d react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑...
react-baidu-map:基于 React 封装的百度地图组件，助你轻松的接入百度地图到 React 项目中
04-16
在React开发环境中，有时我们需要将地图服务集成到我们的应用程序中，这时`react-baidu-map`组件就显得尤为重要。这是一个专门针对React框架封装的百度地图组件，使得开发者能够方便快捷地在React项目中接入并使用...
react使用高德地图react-amap：Markers、Circle、ContextMenu、自定义ContextMenu
09-29
1. **react-amap**: `react-amap`是基于React的高德地图组件库，它将高德地图API的功能转化为React组件，使得开发者可以在React应用中直接使用高德地图，实现地图的渲染、事件处理、标记点、覆盖物等地图功能。...
vueCli3中productionSourceMap设置为false，不生效，依然会有map文件生成的解决办法
热门推荐
qq_29456953的博客
10-23 1万+
vueCli3中productionSourceMap设置为false，不生效，依然会有map文件生成的解决办法 1.请首先检查 vue.config.js 文件中 productionSourceMap 配置 module.exports = { productionSourceMap:false, ... } 如果不行，请继续往下看 2.检查configureWebpack配置中的devtool选项 module.exports = { configureWebpack(c
react项目打包时关闭source-map产生的.map文件
Beamon__的博客
01-30 1263
react项目打包时关闭source-map产生的.map文件
react 脚手架打包不生成 sourceMap 的解决方案
纯爱枫若情的博客
09-28 4457
react 脚手架打包不生成 sourceMap 的解决方案 前言 我相信很多前端工程师都跟我一样，用惯了开源的项目脚手架工具以后，都不习惯自己配置 webpack 了。 经常听同行们开玩笑说，某某某个公司要启动一个项目，所有的人员都配置好了，就缺一个首席 webpack 工程师了。 虽然是一句玩笑话，但是从侧面也反映出来了，想把 webpack 配置好，是不多么不容易的事情。自己动手给项目配置 ...
React添加自定义环境变量
grfstc的博客
04-15 1630
在 .env 中添加开发环境变量 注意：此功能适用于react-scripts@0.5.0及更高版本。 要定义永久环境变量，请在项目的根目录中创建名为 .env 的文件： REACT_APP_SECRET_CODE=abcdef 注意：你必须以REACT_APP_开头创建自定义环境变量。除了NODE_ENV之外的任何其他变量都将被忽略，以避免意外地在可能具有相同名称的计算机上公开私钥。更改任何环境变量都需要重新启动正在运行的开发服务器。 .env文件应该检入源代码控制...
React | 关闭sourceMap,减小包体积
u011607490的博客
10-14 3813
  打开文件webpack.config.prod.js，搜索“shouldUseSourceMap”，找到第一个结果，注释掉这一行，另起一行把它的值改为false  const shouldUseSourceMap = false;  
vue如何关闭sourceMap
weixin_30925411的博客
03-21 3478
Vue打包后出现一些map文件的解决办法： 问题： 可能很多人在做vue项目打包，打包之后js中，会自动生成一些map文件，那我们怎么把它去掉不要呢？ 1，运行 cnpm run build 开始打包 2，会在项目目录下自动创建dist目录，打包好的文件都在其中 解决办法：去src/config/index.js中改一个参数： productionSourceMap:false 把...
webpack教程七：source map
不睡觉的怪叔叔的博客
06-03 6344
目录 一、source map简介 二、使用source map 一、source map简介 现在先让我们清理原先的src文件夹，只留下index.js和template.html： 并且修改index.js: index.js: consele.log('hello world!'); 很明显这是一个错误语句，因为console写成了con...
如何把原来的react-scripts修改为react-app-rewired
05-09
如果你使用的是create-react-app创建的React应用程序，想要替换掉默认的react-scripts为react-app-rewired，可以按照以下步骤进行操作： 1. 安装react-app-rewired和customize-cra： ``` npm install react-app-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值