是否有任何库可以帮助混淆react构建的生产环境？类似于：
const MyComp = () = > { const {propa, propb} = useMyfunc() return(...)}
const MyComp = () = > {
const {propa, propb} = useMyfunc()
return(...)
}
字符串到
const xyz = () = > { const {yxz, zyx} = zzz() return(...)}
const xyz = () = > {
const {yxz, zyx} = zzz()
型
ewm0tg9j1#
正确的选择将是Terser。它是可用的沿着与webpack太（terser-webpack-plugin）为ES6+。uglify-es不再维护，uglify-js不支持ES6+。您可以参考本文中不同包的基准测试。
ES6+
uglify-es
uglify-js
pexxcrt22#
this library是你要找的吗？
nbewdwxp3#
如前所述，Terser是一个很好的选择。React使用某种形式的UglifyJS来缩小构建时的代码，但为了混淆变量和函数名，我做了以下操作：
说明：
1° -安装Terser第一个月2° -修改package.json：
"terser": "terser ./build/static/js/*.js -c -m --mangle-props regex=/_$/", "build": "react-scripts build && npm run terser"
"terser": "terser ./build/static/js/*.js -c -m --mangle-props regex=/_$/",
"build": "react-scripts build && npm run terser"
字符串这似乎对我很有效，希望对你也一样！
uplii1fm4#
你有没有试过this包？这是一个非常专业的包，用于混淆js代码，转换你的代码：
字符串对此：
const MyComp=()=>{const {propa:_0xa95d6e,propb:_0xfaabf6}=useMyfunc();return _0xa95d6e+_0xfaabf6;};
gev0vcfq5#
UglifyJS有选项来mangle（obscurify）名称：
输入示例：
const MyComp = function() {const {propa, propb} = useMyfunc() return(1)}
const MyComp = function() {
return(1)
字符串
输出示例：
const n=function(){const{propa:n,propb:o}=useMyfunc();return 1};
型自己试试：https://www.uglifyjs.net/除非包含函数定义，否则useMyfunc不能被mangled（否则函数调用将失败）。类似地，mangled顶级全局变量（如MyComp）可能会破坏使用该组件的任何内容。如果在mangling之前将所有React代码捆绑到一个文件中，它应该可以工作，因为所有引用都将被mangled为正确匹配的名称。React已经使用了像UglifyJS这样的minifier，所以你可以只修改一些配置文件。注意source maps will undermine any mangling, so they should be disabled。（我认为React对更小的JS文件更感兴趣，而不是隐藏代码。）
useMyfunc
MyComp
0qx6xfy66#
react-obfuscate
有一个npm仓库负责react代码混淆。下面是相同的链接-https://www.npmjs.com/package/react-obfuscate基本步骤都写在repo文档中。
Jscrambler
另一个我觉得有趣的工具是Jscrambler。https://blog.jscrambler.com/protecting-your-react-js-source-code-with-jscrambler/的
6条答案
按热度按时间ewm0tg9j1#
正确的选择将是Terser。它是可用的沿着与webpack太（terser-webpack-plugin）为
ES6+。uglify-es不再维护，uglify-js不支持ES6+。您可以参考本文中不同包的基准测试。
pexxcrt22#
this library是你要找的吗？
nbewdwxp3#
如前所述，Terser是一个很好的选择。
React使用某种形式的UglifyJS来缩小构建时的代码，但为了混淆变量和函数名，我做了以下操作：
说明：
1° -安装Terser
第一个月
2° -修改package.json：
字符串
这似乎对我很有效，希望对你也一样！
uplii1fm4#
你有没有试过this包？这是一个非常专业的包，用于混淆js代码，转换你的代码：
字符串
对此：
型
gev0vcfq5#
UglifyJS有选项来mangle（obscurify）名称：
输入示例：
字符串
输出示例：
型
自己试试：https://www.uglifyjs.net/
除非包含函数定义，否则
useMyfunc不能被mangled（否则函数调用将失败）。类似地，mangled顶级全局变量（如MyComp）可能会破坏使用该组件的任何内容。如果在mangling之前将所有React代码捆绑到一个文件中，它应该可以工作，因为所有引用都将被mangled为正确匹配的名称。
React已经使用了像UglifyJS这样的minifier，所以你可以只修改一些配置文件。注意source maps will undermine any mangling, so they should be disabled。（我认为React对更小的JS文件更感兴趣，而不是隐藏代码。）
0qx6xfy66#
react-obfuscate
有一个npm仓库负责react代码混淆。下面是相同的链接-https://www.npmjs.com/package/react-obfuscate
基本步骤都写在repo文档中。
Jscrambler
另一个我觉得有趣的工具是Jscrambler。
https://blog.jscrambler.com/protecting-your-react-js-source-code-with-jscrambler/的