如何隐藏源代码，而我运行react-app-rewired构建和react-app-rewired启动

Question

我的浏览器是这样的(https://i.stack.imgur.com/5qCnT.png)cross-env set GENERATE_SOURCEMAP=false无法在浏览器中隐藏源代码

任何事情都可以解决这个问题

Answer 1

要隐藏源代码，可以使用混淆技术，使代码难以阅读和理解。如果你使用react-app-rewired，你可以在Webpack配置中添加一个混淆插件。

下面是如何使用React -app-rewired和javascript-obfuscator包混淆React应用程序的源代码:

安装必要的软件包:javascript-obfuscator webpack-obfuscator如果你还没有在你的项目的根目录下创建一个config- rides.js文件的话。该文件将用于自定义Webpack配置。

在config- rides.js中添加以下代码:

const WebpackObfuscator = require('webpack-obfuscator');
module.exports = function override(config, env) {
if (env === 'production') {
config.plugins.push(
new WebpackObfuscator(
{
// Add your obfuscation options here
rotateStringArray: true,
stringArray: true,
stringArrayEncoding: 'base64',
},
// Add files you want to exclude from obfuscation
[]
)
);
}
return config;
};

当在生产环境中构建应用程序时，这段代码将把WebpackObfuscator插件添加到Webpack配置中。您可以根据需要自定义混淆选项。查看javascript-obfuscator文档获取更多选项:https://github.com/javascript-obfuscator/javascript-obfuscator

更新你的包。Json脚本使用react-app-rewired:

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}

现在，当你运行npm run build时，你的源代码将在生产构建中被混淆。注意:请记住，混淆将使您的代码更难阅读，但它不会使其完全安全。顽固的攻击者仍然可以对您的源代码进行逆向工程。混淆应该作为更大的安全策略的一部分来使用。