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/

你可能感兴趣的文章

Python 安装程序:“写入文件 C:\Python27\pythonw.exe 时出错“

Python 安装避坑指南：从入门到进阶

Python 安装配置详解

python 实现儿童算术游戏

python 实现字符串转整型

Python 实现定时任务的八种方案！

Python 实现自动化测试 dubbo 协议接口

python 对json数据读取及保存与读取，对dump，dumps，load，loads的理解

Python 对mysql数据库的操作

Python 对象数据库列表

Python 导入requests报错No module named requests

python 将函数加到列表中进行调用

python 将图片与字符串相互转换

Python 嵌套字典全面指南

Python 常见的错误类型和继承关系

python 常量_零基础学Python系列之一：Python的变量与常量

Python 并发编程

python 序列化操作

Python 开发者，这 7 个 VS Code 插件极力推荐

python手把手视频_硬货 | 手把手带你构建视频分类模型（附Python演练））