arttemplate在webpack中的配置与用法

1.artTemplate在webpack中的配置

首先，npm下载，cnpm install --save-dev art-template art-template-loader;

下载完成后在webpack的的配置文件中配置loader

module.exports = ｛

    module：｛

        rules:[

            。。。。

                {

                  test: /\.art$/,

                   loader: 'art-template-loader'

                  }

        ]

    ｝

｝

配置完成后就可以在文件中使用了

2.artTemplate在文件中的使用

创建index.art文件与heard.art文件

这是index.art并引入header.art文件

这个header.art文件

在入口文件中引入index.art

index.js

这样就完成了页面的渲染！

页面渲染后的样子

图中有一些没必要的样式与数据，请自行忽略！

3.artTemplate的一些语法

①. 对内容的编码输出与不编码

不编码输出

编码输出

编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

②. 遍历表达式，条件表达式，上图中有！！

③. 模板包含表达式，如上图中引入header.art文件一样，用于嵌入子模板，子模板默认共享当前数据，亦可以指定数据：

                {{include 'header.art' list}}

④. 很难受，使用template.helper(name, callback)注册公用辅助方法在webpack中 一直报错！

template找不到，import引入后 又报fs什么的错误，我引入的是artTemplate ！

因此，我还是在js中过滤完数据以后再渲染数据吧！