我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

fis3前端构建过程中,离不开js文件的混淆处理。这里就不得不提一下uglifyjs,这款nodejs类库。uglifyjs这款代码,在苏南大叔以前的文章中,有过比较详细的描述。fis3也是支持uglifyjs这款代码,来混淆加密.js文件的。在本文中,苏南大叔,将要示范相关用法。

demo中的app.js

fis3的官方demo中,app.js文件过于简单,只有一句alert。所以无法体现出uglifyjs的效果。所以,大家如果是使用官方的demo做实践的话。请注意把app.js换成较为复杂,平时正常编写使用的代码,以便观察效果。

苏南大叔:fis3配置之使用uglifyjs处理js文件 - fis3-config-appjs
fis3配置之使用uglifyjs处理js文件(图6-1)

那么苏南大叔继续配置fis-config.js这个配置文件。新增配置如下:

fis.match('*.js', {
   optimizer: fis.plugin('uglify-js')
});

苏南大叔:fis3配置之使用uglifyjs处理js文件 - fis3-config-js-optimizer
fis3配置之使用uglifyjs处理js文件(图6-2)

命令行及效果展示

fis3 release -d <path>

苏南大叔:fis3配置之使用uglifyjs处理js文件 - fis3-config-js-optimizer2
fis3配置之使用uglifyjs处理js文件(图6-3)

*.min.js禁用压缩

对于已经被压缩过的*.min.js文件,可以禁用相关uglifyjs压缩功能。配置如下:

fis.match('*.min.js', {
  optimizer: null
});

苏南大叔:fis3配置之使用uglifyjs处理js文件 - fis3-config-min-js
fis3配置之使用uglifyjs处理js文件(图6-4)

fis3uglifyjs插件进阶参数

这款插件在github上的地址是:

通过苏南大叔以前的文章,我们可以知道:uglifyjs是有很多参数的。那么这些参数在fis3uglifyjs插件里面,是应该如何配置呢?

var uglifyJSConf = {};
fis.match('*.js', {
  optimizer: fis.plugin('uglifyjs', uglifyJSConf)
});

这里的uglifyJSConf的相关可用选项,可以点击这里查看。

下面苏南大叔演示:如何去除相关.js文件中的console.log()相关语句调用的设置。

fis.match('*.js', {
  optimizer: fis.plugin('uglify-js',{
    compress : {
        drop_console: true
    }
  })
});

苏南大叔:fis3配置之使用uglifyjs处理js文件 - fis3-config-min-js2
fis3配置之使用uglifyjs处理js文件(图6-5)

这些'uglifyjs'的参数设置,也可以改成全局的设定,比如下面的代码,效果是一样一样的:

fis.config.set('settings.optimizer.uglify-js', {
    compress : {
        drop_console: true
    }
});
fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

苏南大叔:fis3配置之使用uglifyjs处理js文件 - fis3-config-min-js3
fis3配置之使用uglifyjs处理js文件(图6-6)

小结

本文中,苏南大叔还说了在fis3中,如何使用uglifyjs.js文件进行处理,处理的效果,还是不错的。在以前的文章中,苏南大叔也说过,uglifyjs单独使用的方法。大家可以点击下面的链接,查看uglifyjs的很多使用场景。

读者朋友,您可以点击下面的链接,查看更多苏南大叔提供的fis3相关内容。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   uglifyjs    百度