zoukankan      html  css  js  c++  java
  • fis3打包中的一些注意事项

    1.在html文件中,如果在标签的style属性内添加路径,fis不会识别改路径并打包,如

    2.fis主要针对静态文件进行打包。对其他文件打包会出现一些问题。

      比如jsp页面。下面的例子script.jsp(这个jsp会在其他页面使用<%@include file="/WEB-INF/include/script.jsp"%>引用,里面有两个变量MOD_NOT_INCLUDED和JQUERY_NOT_INCLUDED,初始值都是true)

      2.1 jsp中引用mod.js

    <%if(MOD_NOT_INCLUDED){%>
    <script type="text/javascript" src="/common/dep/mod.js"></script>
    <%MOD_NOT_INCLUDED=false;}%>
    <%if(JQUERY_NOT_INCLUDED){%>
    <script type="text/javascript" src="/common/dep/jquery.js"></script>
    <%JQUERY_NOT_INCLUDED=false;}%>
    <script src="/js/wording.js" type='text/javascript'></script>

      注意:fis会检查引用的名称为mod.js的引用(mod.js是fis默认模块加载脚本,改成别的名称fis就不会识别了),将mod.js的引用放在<body></body>的最后面;如果本页面没有body标签则导致mod.js无地方放置,最终编译后的结果是

    <%if(MOD_NOT_INCLUDED){%>
    <%MOD_NOT_INCLUDED=false;}%>
    <%if(JQUERY_NOT_INCLUDED){%>
    <script type="text/javascript" src="/static/pc-dev/common/dep/jquery.js"></script>
    <%JQUERY_NOT_INCLUDED=false;}%>

      <script type="text/javascript" src="/common/dep/mod.js"></script>没有了。

      注意续:如果mod.js放置成功(本文件有body标签),然后收集这个文件中的所有外部引用js引用,然后将js的引用放在mod.js引用的后面,css引用然后将css引用放在<head></head>的最后面,。我们将上面的例子更改为

    <link rel="stylesheet" type="text/css" href="/common/css/common.scss" />
    <%if(MOD_NOT_INCLUDED){%>
    <body>
    <script type="text/javascript" src="/common/dep/mod.js"></script>
    </body>
    <%MOD_NOT_INCLUDED=false;}%>
    <%if(JQUERY_NOT_INCLUDED){%>
    <script type="text/javascript" src="/common/dep/jquery.js"></script>
    <%JQUERY_NOT_INCLUDED=false;}%>

      编译结果是

    <link rel="stylesheet" type="text/css" href="/static/pc-dev/common/css/common.css" />
    <%if(MOD_NOT_INCLUDED){%>
    <body>
    
    <script type="text/javascript" src="/static/pc-dev/common/dep/mod.js"></script>
    <script type="text/javascript" src="/static/pc-dev/common/dep/jquery.js"></script>
    </body>
    <%MOD_NOT_INCLUDED=false;}%>
    <%if(JQUERY_NOT_INCLUDED){%>
    <%JQUERY_NOT_INCLUDED=false;}%>

      但是无论如何只要jsp中引用mod.js都可能导致脚本引入位置发生改变,从而导致逻辑混乱(如上面的MOD_NOT_INCLUDED判断根本没有起到任何作用)。

      2.2 jsp的引入脚本中使用data-loader属性

      如下实例

    <%if(JQUERY_NOT_INCLUDED){%>
    <script type="text/javascript" src="/common/dep/jquery.js" data-loader></script>
    <%JQUERY_NOT_INCLUDED=false;}%>

      fis编译结果

    <%if(JQUERY_NOT_INCLUDED){%>
    <%JQUERY_NOT_INCLUDED=false;}%>

      结果是脚本没有了。说明:使用data-loader属性,脚本会被收集,并且放在<body></body>的最后面,如果没有body标签则导致脚本无处放置。

      我们加上body标签

    <%if(JQUERY_NOT_INCLUDED){%>
    <body>
    <script type="text/javascript" src="/common/dep/jquery.js"></script>
    </body>
    <%JQUERY_NOT_INCLUDED=false;}%>
    <script src="/js/wording.js" type='text/javascript'></script>

      编译结果

    <%if(JQUERY_NOT_INCLUDED){%>
    <body>
    
    <script type="text/javascript" src="/static/pc-dev/common/dep/jquery.js"></script>
    <script type='text/javascript' src="/static/pc-dev/js/wording.js"></script>
    </body>
    <%JQUERY_NOT_INCLUDED=false;}%>

      说明:fis检测到页面中有body也会去收集js引用,然后放置在body标签中。

      将data-loader去掉

    <%if(JQUERY_NOT_INCLUDED){%>
    <script type="text/javascript" src="/common/dep/jquery.js"></script>
    <%JQUERY_NOT_INCLUDED=false;}%>
    <script src="/js/wording.js" type='text/javascript'></script>

      编译结果

    <%if(JQUERY_NOT_INCLUDED){%>
    <script type="text/javascript" src="/static/pc-dev/common/dep/jquery.js"></script>
    <%JQUERY_NOT_INCLUDED=false;}%>
    <script src="/static/pc-dev/js/wording.js" type='text/javascript'></script>

      2.3 jsp脚本中有body标签

      刚才在2.2中有body标签的例子说明

      

      2.4 jsp中使用其他需要加载外部文件的情况

      项目中用到imweb-tplv2模板插件。里面的文件一般有.tpl/.js/.css三种.js是入口文件,引用.tpl和.css文件。在jsp中使用的时候fis编译会收集这些js和css,将css文件引用放在head标签纸,js引用放到body中。如果这两个标签没有则会导致这些引用全部没有。

    ===================================

    2019.11.29 后记

    本来不准备把这篇文章发布出来的,因为这是早些时候的文章了,当时想着后面会完善,但是后面没有时间和精力,而且当前使用fis3打包的不多了。但是毕竟写了,留个纪念,纪念我曾经用过fis3,后面这篇文章也不会维护了。

  • 相关阅读:
    Delphi编程 -- 视频捕获avicap32.pas源代码
    Delphi的DataSource事件
    InfoPower4000 wwGrid控件的一些应用技巧
    TwwDBGrid + TwwDBLookupCombo 下拉列表
    Delphi中TwwDBLookupCombo中属性的简单设置
    DevExpress中文说明--TdxCameraControl Object 摄像头组件
    如何Windows分页控件中增加统计功能
    Kibana:运用索引模式的 formatter 来探索 IP 信息
    Alertmanager高可用
    Prometheus高可用部署
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/fis3_pointer.html
Copyright © 2011-2022 走看看