JavaScript代码混淆概述最近呢，由于公司有想法将某些项目外包出去进行二次开发，因此最近一两个月都是在谈论代码加

概述

最近呢，由于公司有想法将某些项目外包出去进行二次开发，因此最近一两个月都是在谈论代码加密的事情，以至于我们这些小开发不断的查询相关的资料。但是以我的目前的理解以及技术来讲，代码加密属实接触嘚少，你说有特别的大的需要吧，也没有，但是你说直接让别人看到核心业务逻辑代码吧，也是非常不好的，所以我带着将就的态度去研究了一下。但是呢，最终我也没研究称代码加密，只是找到了代码混淆方案。因此接下来就说一下JavaScript的代码混淆吧。

使用库

这里先说明一下，目前我找到可以进行代码混淆的库有两个，当然也有很多，只是抽其中的来说

uglify-js
javascript-obfuscator 以上两个库都是可以进行代码混淆，不过我先使用的是javascript-obfuscator，因此这里就直接以javascript-obfuscator为例子进行讲述了。

如何使用

由于本人也是初步了解并使用，对于一些指令参数并没有很熟悉，这里暂时只介绍几个重要的指令，方便使用，具体的话还请查看npm库的使用方法。javascript-obfuscator

引入

npm install --save-dev javascript-obfuscator

使用

javascript-obfuscator input_file_name.js [options]

执行完指令就会立刻进行代码混淆，但是有一点需要注意的是，js文件的全局变量时不会进行混淆的，只会对局部变量进行混淆，因此你执行完文件内容还是显示

    // 编译前
    let test = 'hello';
    // 编译后
    let test = a0_0x337fbb(0x1a7)

代码压缩

    // 指令,默认true，可设置为false不进行代码压缩 
    --compact true

数字表达式的转换

    // 指令,默认为false
    --numbers-to-expressions true
    // 编译前
    const test = 1111;
    // 编译后
    const test = 0x457;
    // 数字表达式的转换后
    const test = 0xb78 + 0xb9e * -0x3 + 0x1bb9;

字符串增加多元素混淆

这个功能会将字符串放入数组，然后对数组进行添加更多的元素混淆。

    // 指令,默认为true
    --string-array false

拓展

经过本人查阅资料webpack5也是可以使用该库进行对应代码混淆，可以进行安装npm库webpack-obfuscator，当然也需要同步安装javascript-obfuscator，因为webpack-obfuscator是依赖于javascript-obfuscator。当你安装完这两个库之后，就可以在webpack.config.js中的plugin中进行配置选项。这样webpack就可以进行打包压缩并且混淆。

plugins: [
    new JavaScriptObfuscator({
        compact: true,
        deadCodeInjection: true
    })
],

结语

对于代码混淆的体验，个人感觉还是非常不错的，使用起来很简单，我们可以根据业务上的需求对核心代码进行单独混淆，以免代码暴露。当然这是简单入门级别，并不能100%说不会被别人破解，就好比加了到屏障去保护你的代码，只能说避免能够直接读懂代码，当然我也看不懂[手动狗头]。最后就希望大家能通过这篇文章学到一丢丢的东西啦，感谢，古德拜。