在使用 React 和 Yarn 打包后，生成的文件通常是静态文件（HTML、CSS、JS等），并且这些文件会被放置到一个指定的构建目录。默认情况下，这些文件是可公开访问的，因此用户可以查看源代码（特别是 JavaScript 文件）。但是，有几种方法可以增加源代码的保护：
1. 使用代码混淆
通过使用 JavaScript 混淆工具来混淆您的代码，可以使其更加难以阅读和理解。您可以在构建过程中集成这种混淆工具。例如，您可以使用 javascript-obfuscator 或类似的工具。
示例：
yarn add javascript-obfuscator --dev
然后，在构建脚本中加入混淆步骤。
2. Webpack配置
如果您对 Webpack 配置有控制权，可以在其中启用代码压缩和混淆功能。在 webpack.config.js 中，你可以选择合适的插件来压缩和混淆你的 JavaScript 代码。
示例配置：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// ...其他配置
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
3. .htaccess / 防止直接访问
如果你在 Apache Tomcat 上托管项目，可以使用 .htaccess 文件来阻止直接访问某些类型的文件，例如 .js 文件。确保 .htaccess 文件位于项目根目录，并包含以下内容：
<FilesMatch "\.(js)$">
Order Allow,Deny
Deny from all
</FilesMatch>
不过请注意，此方法将导致所有人无法访问这些 JS 文件，包括正常用户，可能不太合适。
4. 环境变量和配置管理
敏感信息（例如 API 密钥）应通过环境变量或其他安全方式进行管理，而不是硬编码在前端代码中。这不仅是一种良好的实践，也是为了避免泄漏重要信息。
5. 禁用 Source Maps (可选)
React 默认会生成 source maps，使得开发者更容易调试。如果不希望用户看到这些 source maps，可以在构建时禁用它们。在 package.json 的 build 脚本中添加如下命令：
"scripts": {
"build": "react-scripts build && rm -rf build/static/js/*.map"
}
这样做可以删除生成的 source map 文件，使得源码难以追溯。
总结：
尽管上述方法能增加源代码被阅读和理解的难度，但需要注意的是，没有任何一种方法能做到绝对安全。如果项目包含极为敏感的信息，请考虑将逻辑转移到后端服务器进行处理，而不是完全依赖前端实现。
内容由零声教学AI助手提供，问题来源于学员提问
![ylclick(index) {
this.typeobj = this.list[index]
if (this.typeobj.type == 'pdf' || this.typeobj.type == 'docx' || this.typeobj.type == 'xlsx') {
uni.setStorage({
key: 'pdfurl',
data: this.typeobj.url
})
uni.getS...](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162213596632252.png)
