【知识整理】vue-cli脚手架开发项目如何进行js高级加密

一。最近收到一个对js源码进行加密，以防止关键js源代码泄露的需求！由于我们的项目是基于vue-cli脚手架开发的，因此首先想到的是其中的webpack插件UglifyJsPlugin是否提供js代码加密的配置。查询UglifyJsPlugin官方手册后发现该插件提供代码压缩及混淆功能，可以对代码进行压缩，变量、函数名替换为简单字母，降低了源码的可读性，一定程度上达到了加密的目的，但是加密级别没有达到我们的要求。因此只能亲自动手找找是否有现成的开源加密算法，拿过来借用一下。

二。在网上找到了一个名为'jjencode'的js加密算法，这里贴出他的网站：https://www.sojson.com/jjencode.html，通过此算法对js加密后台代码如下图：

可以看到加密后已经根本看不出任何js语言的痕迹，更不可能看出其中的具体算法是什么，这种的加密级别基本已经符合我们的需求了。问题来了，加密算法虽然有了，但是我们不能每次重新打包后都手动加密代码后覆盖原文件，这使得加密流程变得繁琐，如果在每次打包后能够自动加密就好了。怎么样才能实现自动加密呢，这就需要我们手写一个自动加密的插件了。

三。如果对webpack的插件机制不了解的，可以参考这篇文章：https://juejin.im/entry/5a4cb7906fb9a04500037399。我将插件命名为'JsEncodePlugin',源码如下：

// 1、js-encode-plugin.js 文件（webpack的js加密插件）
const fs = require('fs');//node的文件系统模块，用于读写及操作文件
const path = require('path');//node提供的一些用于处理文件路径的小工具
var chalk = require('chalk')//用于向控制台输出带颜色的问题提示
// 2、模块对外暴露的 js 函数
function JsEncodePlugin(pluginOptions) {