npm publish上传过滤、混淆加密js

继npm组件上传后，公司有部分“机密”代码不想开源分享，于是要求我将其混淆加密！！！

一、npm上传过滤
常见的过滤方法有创建黑名单（.npmignore）与白名单（ package.json/files ）两种；.npmignore与.gitignore类似，但优先级更高，且含有弊端（本地运行时经常会出现忽略的文件资源不存在），使用时注意事项过多，不推荐使用，这里主要讲讲白名单方式：

在package.json中添加files字段

  "main": "./src/index.js",
  "files": [
	"dist/*",
    "src/*",
    "*.json",
    "babel.config.js"
  ],
  "scripts": {...}

只有在files中指定的文件在publish时才会上传。

二、js混淆加密
js混淆有许多工具，这里介绍其中一种“javascript-obfuscator”，javascript-obfuscator安装后通过命令行执行经行加密，也可使用“webpack-obfuscator”在config.js类配置文件中配置，二则配置项参数一致，针对publish场景，这里主要讲使用命令行模式：
1、安装javascript-obfuscator

npm i javascript-obfuscator -g -s

2、配置script命令（javascript-obfuscator混淆命令方式有多种，详情可自行百度）

"scripts": {
    "build": "vue-cli-service build",
    "obf": "javascript-obfuscator ./src --config config.json --output ./src []"
  },

执行npm run obf命令，该命令是将src下的所有js源文件通过config.json配置加密，不生成新文件，其中config.json文件为混淆配置文件，混淆代码时无法避免会影响源代码运行性能，混淆度越高，影响越大，这里我提供一份轻微影响的配置

config.json内容：

{
    "compact": true,
    "controlFlowFlattening": false,
    "deadCodeInjection": false,
    "debugProtection": false,
    "debugProtectionInterval": false,
    "disableConsoleOutput": true,
    "identifierNamesGenerator": "hexadecimal",
    "log": false,
    "renameGlobals": false,
    "rotateStringArray": true,
    "selfDefending": true,
    "unicodeEscapeSequence": false
}

参数配置详情解析：

{
	 // 压缩代码
	 compact: true,
	 // 是否启用控制流扁平化(降低1.5倍的运行速度)
	 controlFlowFlattening: true,
	 // 应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。
	 controlFlowFlatteningThreshold: 1,
	 // 随机的死代码块(增加了混淆代码的大小)
	 deadCodeInjection: true,
	 // 死代码块的影响概率
	 deadCodeInjectionThreshold: 1,
	 // 此选项几乎不可能使用开发者工具的控制台选项卡
	 debugProtection: true,
	 // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
	 debugProtectionInterval: true,
	 // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
	 disableConsoleOutput: true,
	 // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
	 identifierNamesGenerator: 'hexadecimal',
	 log: false,
	 // 是否启用全局变量和函数名称的混淆
	 renameGlobals: false,
	 // 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
	 rotateStringArray: true,
	 // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
	 selfDefending: true,
	 // 删除字符串文字并将它们放在一个特殊的数组中
	 stringArray: true,
	 stringArrayEncoding: 'rc4',
	 stringArrayThreshold: 1,
	 // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
	 transformObjectKeys: true,
	 unicodeEscapeSequence: false
}

至此，方法讲完了，那我们就来聊聊项目具体操作吧！！！

First、混淆只能混淆js代码，html代码是无保密性的，那么我们在写组件时就必须将html与js代码分离

在.vue文件中

<script src="./my-view.js"></script>

如此，就将html代码与页面js代码分离了。

second、混淆过程中我们至少要保留源码吧！！！不会有人直接把源码混淆不备份吧！！！

如图所示，srcCode文件夹就是我组件代码的源文件，src文件夹是混淆过并会上传的文件，srcCode文件内容是不会配置到白名单files并上传的。这里我是在build的时候将srcCode通过命令拷贝为src:

 "scripts": {
    "build": "xcopy srcCode src /e && vue-cli-service build",
    "obf": "javascript-obfuscator ./src --config config.json --output ./src []"
  },

xcopy为windows系统拷贝命令，srcCode ：需要拷贝的文件地址，src：拷贝文件存放地址，/e：复制目录和子目录，包括空的，防止文件拷贝遗漏。
拷贝过程中，若是第一次拷贝（即src目录不存在）会提示：

这里必须选d，生成目录。
若已有src目录，会提示：

这里选a:全覆盖 即可

third、javascript-obfuscator混淆并上传
如上文所示直接执行npm run obf命令，再执行npm publish命令上传即可。