11月16, 2018

arttemplate的一些坑

之前有提过在项目中使用了arttemplate,然后在改前人的代码时碰到了一些坑。简单在这里说一下。

问题1

import tpl from './index.tpl';
const html = tpl(opts);
this.$dom = $(html);

初看没啥问题,但其实是有问题的。问题就在于我们在tpl里面是怎么写的,它就怎么还原。但像react里面:

render(){
     return (
         <div>
               <ul>
                    <li>123</li>
                    <li>456</li> 
              </ul> 
        </div>
    )
}

上面的HTML是会被压缩成一行的。

问题的出现

视觉给我看了一下在窗口变小的情况下,样式不对的问题,然后我就发现css里面:

.xx {
     float: left;
     display: inline-block;
}

这代码很6吧(还是阿里P8写的)。然后我就删除掉了float: left,未想到引发了另外一个bug,那就是inline-block间会有空格。

但其实我们都知道,现在HTML会压缩,然后js里面像react会处理html的压缩(vue我不确定)。所以我真的差点忘了还有这么一个坑!

当时查了一下art-template-loader的配置项:Options

alt

我天真地以为htmlMinifierOptions和上面一个参数关系不大,结果试了很久,啥反应都没有。(其实是我傻了,当时可能脑子不好使,人家都写了只在node端支持)。

于是跑去翻了一下源码:

alt

欲哭无泪啊!!!不过细想想,tpl提供这种功能也有点怪怪的,毕竟tpl里面不一定非要是html。

那个有没有人好奇detect-node是怎样的代码?反正我比较好奇,它是怎么来判断是浏览器环境还是node环境的,所以又看了一眼:

alt

问题的解决

网上找到一篇:Remove every white space between tags using JavaScript

// 最简单的处理方式,但难保会有一些坑
str.replace(/>\s+</g, "><");

问题2

之前说过,项目中每个页面都有一个统一的入口:

// entry.js.tpl
import Tax from 'Tax';
{{@ componentImport}}

import '{{@ relativePath}}/src/layout/{{@ layoutName}}';

import beforePageMount from '{{@ relativePath}}/src/hook/beforePageMount';
import afterPageMount from '{{@ relativePath}}/src/hook/afterPageMount';

import data from '{{@ relativePath}}/src/page/{{@ pageDir}}/data';
import events from '{{@ relativePath}}/src/page/{{@ pageDir}}/events';
import tpl from '{{@ relativePath}}/src/page/{{@ pageDir}}/index.tpl';

import '{{@ relativePath}}/src/page/{{@ pageDir}}/style.scss';

beforePageMount();

Tax.mount({
  name: 'Page/{{@ pageDir}}',
  data,
  events,
  tpl,
}, false, {}, [{{@ componentsListString}}]);

afterPageMount();

后来这个文件,我这边改了一下。在上面的代码里面加了一些注释://

然后在本地开发环境是OK的,到了npm run build,直接报错了。

这就是由压缩引发的血案!!!

问题的出现

因为一些原因,我不希望hook一定要存在,所以在代码中,我就将之前的import,改为require,代码大概如下:

try {
  const beforePageMount = require('{{@ relativePath}}/src/hook/beforePageMount');
  beforePageMount.default();
  mount();
  const afterPageMount = require('{{@ relativePath}}/src/hook/afterPageMount');
  afterPageMount.default();
} catch(e) {
  // console.log("报错了:", e);
  mount();
};

当模块找不到时,会走catch分支。看上去非常prefect的代码,却在npm run build的时候报错了!!

然后我就一段段地删除,删到最后,让我想明白了,这个会被当成一个文本,压缩成一行后,就有问题了。

即后面的会变成这样的:

// console.log("报错了:", e); mount(); };

问题的解决

当然是删除注释啦,或者将注释的写法改成/**/

结语

无力吐嘈。。。

本文链接:www.my-fe.pub/post/arttemplate-some-note.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。