混淆js

最近有一个需求，需要混淆一下前端页面用到js文件。想到的是使用uglify-js工具。本文简单的记录一下，如何更新镜像里面的js文件。本文的侧重点，并不是如何使用uglify-js，而是如何从工程性的方式，介绍如何升级js混淆代码，既保留源码，又在发布的时候，直接能用上压缩的js。

官方源码

https://github.com/mishoo/UglifyJS

安装

先安装nodejs，然后再全局安装：

npm install uglify-js -g

使用方式：

uglifyjs old.js -o new.js
uglifyjs old.js -m -o new.js

-m, –mangle [options] Mangle names/specify mangler options.

混淆脚本

使用下面的方式，找到需要加密的文件。注意，find命令，如果没有指定目录时，输出结果，则类似于./src/这种的前缀，如果加上目录后呢，则结果类似于src/web这种前缀，区分这两种形式很重要，因为新的文件命令new,是依赖它的。而由于是扫目录下所有的文件，故输出的目录应该不再扫描，故指定了要扫描的文件命令。

其他，使用grep命令排除了若干不想用到文件。

下面脚本的亮点是：先计算文件所对应的文件夹路径，"${new%/*}"，这是常用的需求。用到了shell文件命名处理。

#!/bin/bash
# 2021-12-23 09:32:06
# 描述: 加密混淆、前端所有用到的js文件。

if [ ! -d "js" ];then
    mkdir js
fi
for each in `find src/web -type f -name "*.js" |grep -v "min.js" |grep -v "cked"`;do
    new="js/$each"
    des_dir="${new%/*}"

    if [ ! -d "$des_dir" ];then
        mkdir -p "$des_dir"
    fi
    echo "$each -> $new "
    uglifyjs $each -o $new
done

• 构建镜像

在原有拷贝代码之后，增加一步，拷贝加混淆后的js文件。这样，会覆盖更新。

ADD src /yd
# 拷贝加密的js文件
ADD js/src /yd 
RUN chown -R www:www /yd/*