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

继续fis3前端构建的学习旅程,苏南大叔在本文中继续实践的参数是media参数。这个参数不知道是哪位大神命名的。在传统的node程序里面,这个名字明显应该是env嘛,这里叫做media,苏南大叔觉得还是蛮有歧义的了。

苏南大叔:fis3教程,如何修改配置以分环境(media)构建? - fis-media
fis3教程,如何修改配置以分环境(media)构建?(图2-1)

本着先学习这分环境构建的中心思想的目的,就暂时接受使用官方提供的media这个名字好了。

media的作用

fis3官方的描述上看,苏南大叔觉得这个media就是就是用于区分环境变量使用的。不同的env/media环境下,使用不同的配置。比如:发布出去的.js文件,都必须要经过uglify-js混淆加密处理。这种场景,都是很常见的应用场景,对吧?

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

fis.media('dev').match('*.js', {
  useHash: true
});

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

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

这里定义了三个media

  • testprod都对.js文件都使用了uglifyjs进行处理,区别在于,是否使用hash重命名。
  • dev模式下,就仅仅重命名,不uglifyjs
为了看到uglifyjs的效果,请把默认的app.js里面的内容,换成稍稍复杂的js代码。默认的app.js看不出来效果。

命令行及效果展示

相关命令如下:

fis3 release <media> -d <path>
fis3 release -d ../dist
fis3 release aaa -d ../dist_aaa
fis3 release test -d ../dist_test
fis3 release prod -d ../dist_prod
  • media使用了aaa这个未定义环境的时候,提示如下:
[WARNI] You don't have any configurations under the media aaa, are you sure?

苏南大叔:fis3教程,如何修改配置以分环境(media)构建? - media1
fis3教程,如何修改配置以分环境(media)构建?(图2-2)

  • media位置没有传递任何值的时候,默认使用的值是dev

推荐的debug配置

fis.media('debug').match('*.{js,css,png}', {
  useHash: false,
  useSprite: false,
  optimizer: null
})

对于debug模式,推荐的设置就是:啥都不做,所以关闭了所有目前提及的各种设置...

小结

本文中,苏南大叔利用fis3media参数,在不同的构建环境下,执行了不同的fis3动作。这个参数,还是可以继续配置其它的fis3项目的。相关的使用场景,请参见苏南大叔的后续文章。

读者朋友,您可以点击下面的链接,查看更多苏南大叔带来的更多经验文章内容:

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

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

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

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