create-react-app build 打包隐藏源码-白红宇

create-react-app build 打包隐藏源码

阅读量：160 次

发布时间：2019-02-28

本文共 654 字，大约阅读时间需要 2 分钟。

如何解决在create-react-app中打包后浏览器仍显示源码的问题

在使用create-react-app创建React项目时，可能会遇到打包后浏览器仍显示源码的情况。这通常是因为生成了source map文件，source map的作用是将编译后的代码映射到原始的源代码位置，从而允许浏览器显示源码。以下是解决这个问题的详细步骤：

创建或确认.env文件：

在项目根目录下新建一个名为.env的文件。

在文件中添加如下内容：
```
GENERATE_SOURCEMAP=false
```

安装dotenv-cli：

打开终端，运行以下命令安装dotenv-cli：
```
yarn add dotenv-cli
```

修改打包命令：

打开package.json文件，找到scripts部分，并确保build命令包含加载.env文件的指令。通常build命令应如下所示：
```
"build": "dotenv -e .env.frm -e .env react-app-rewired build",
```

确保在打包命令中使用正确的环境变量加载方式，例如使用-dotenv参数。

重新打包并运行：

在终端中运行以下命令重新打包项目：
```
npm run build
```

打包完成后，启动服务器以查看结果：
```
npm start
```

验证效果：

打包后的页面应不再显示源码，而是显示优化后的生产环境页面。

通过以上步骤，source map的生成将被禁用，浏览器将显示优化后的代码，而不会显示原始的源码。这样可以确保生产环境的代码安全性和性能优化。

转载地址：http://cead.baihongyu.com/

你可能感兴趣的文章

PostgreSQL 备份与还原命令 pg_dump

Postgresql 外部表插件postgres_fdw的安装和使用

PostgreSQL 如何从崩溃状态恢复（上）

PostgreSQL 存储过程基本语法

PostgreSQL 实现批量更新、删除、插入

PostgreSQL 导入 .gz 备份文件

PostgreSQL 批量插入&更新数据时报错（ERROR: ON CONFLICT DO UPDATE command cannot affect row a second time）

PostgreSQL 新增数据返回自增ID

postgresql 更新多列数据

PostgreSQL 服务启动后停止

PostgreSQL 辟谣存在任意代码执行漏洞：消息不实

PostgreSQL+PostGIS实现两坐标点之间最短路径查询算法函数（地图工具篇.12）

Qt开发——简易调色板QPalette

PostgreSQL-解决连接时遇到的乱码问题

PostgreSQL15.2最新版本安装_远程连接_Navicat操作_pgAdmin操作_Windows10上安装---PostgreSQL工作笔记001

PostgreSQL9.1 双机部署配置（主备数据同步）

Qt开发——简易网络浏览器(一)

Qt开发——简易成绩登记系统

Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句

Postgresql中PL/pgSQL的游标、自定义函数、存储过程的使用