目录
背景
最近做项目,有这么一个需求,前端有一部分纯es6代码(注意不是vue,不带任何html页面),不想将代码交付给客户,但项目中又得用。所以临时想到了一个解决办法。
将此部分代码抽出,代码混淆后,将混淆的代码,发布至nexus中,然后开发工程中在package.json中引用该包。不耽误开发调用,点进源码全是混淆后的代码,基本也都看不明白了。
核心思想就两点:1.代码混淆javascript-obfuscator; 2.npm publish 白名单过滤
新建npm工程
mkdir test-npm
cd test-npm
yarn init 或 npm init
添加测试代码
为了测试,随便写个es6的类并导出。
添加依赖包
yarn add javascript-obfuscator -d
这里注意,依赖的包尽量放在package.json中的devDependencies里,因为我们publish到私服的包中是不包含依赖包的,如果这些依赖包是必要的,那么调用工程需要添加这些依赖包,如果不必要,那么调用工程不添加也不会报错,反之放在dependencies里,不管是不是必要的,调用工程都要添加相关依赖。
这里的javascript-obfuscator包,就是为我们代码混淆用的,不是代码必要的依赖包,所以调用工程也不会引用这个包。
混淆配置
新建一个config.json,文件名可自定,位置也可自定。然后添加一些混淆的配置。具体配置和含义可以百度,这里就不详细说明了。这个配置文件甚至都可以不用,如果不指定,它会走默认的配置。
配置如下:
{
"compact": true,
"controlFlowFlattening": false,
"deadCodeInjection": false,
"debugProtection": false,
"disableConsoleOutput": true,
"identifierNamesGenerator": "hexadecimal",
"log": false,
"renameGlobals": false,
"rotateStringArray": true,
"selfDefending": true,
"unicodeEscapeSequence": false
}
混淆命令配置:
在package.json中添加
"scripts": {
"obf": "javascript-obfuscator ./src --config config.json --output ./publish []"
},
意思就是,将src目录下的代码根据config.json的配置进行混淆,输入到publish目录下。
最终package.sjon
执行混淆
输入yarn pbf
PS D:\Work\demo\test-npm> yarn obf
yarn run v1.22.5
$ javascript-obfuscator ./src --config config.json --output ./publish []
[javascript-obfuscator-cli] Obfuscating file: src\Test.js...
Done in 0.53s.
PS D:\Work\demo\test-npm>
项目中会多出一个publish文件夹,里边放的就是混淆后的代码。
我们将代码格式化一下,已经面目全非了。
配置与发布
在package.json添加如下代码,表示json后缀的文件和publish文件下的代码会被发布到nexus中。
"files": [
"publish",
"*.json"
],
然后控制台配置nexus后发布,工程中直接add我们发布的包即可。
配置镜像
npm config set registry=https://nexus私服仓库地址
登录
npm login -registry=https://nexus私服仓库地址
发布
npm publish -registry=https://nexus私服仓库地址