目录

背景      

新建npm工程

添加测试代码

添加依赖包

混淆配置

执行混淆

配置与发布

---

背景      

        最近做项目，有这么一个需求，前端有一部分纯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私服仓库地址