scrat-parser-pagelet

在 scrat pagelet 模式中，对 pagelet 的模板能力进行一些拓展

安装

npm install scrat-parser-pagelet --save-dev

yarn add scrat-parser-pagelet --dev

快速使用

scrat.match('{widget, page, app/view}/**.tpl', {
  parser: [
    scrat.plugin('pagelet', {
      compress: true,
      attrAlias: {
        _id: '$id',
      },
      alias: {
        '~': 'widget',
      },
    }, 'append'),
  ]
})

参数列表

|Name|Type|Describe|Default| |----|----|--------|-------| | root | String | 项目根目录 | process.cwd() | | compress | Boolean | 是否压缩模板 | false | | attrAlias | PlainObject | 属性映射 | - | | alias | PlainObject | 别名 | - | | split | String | 属性的分隔符，默认为空格，如果是使用 egg-view-nunjucks-pagelet 并且把 useCustomParser 置为了 false，请把该值改为逗号 | 空格 | | blockStart | String | - | {% | | blockEnd | String | - | %} | | variableStart | String | - | {{ | | variableEnd | String | - | }} | | processor | PlainObject | 自定义处理器 | {} |

支持功能：

相对路径

此前在使用 require 标签引入模块的时候，都只能用绝对路径，比如页面 A 要引入其下的模块 B

{% require 'page/xxx/A/B' %}

就可以改成这种写法

{% require './B' %}

别名

定义别名，跟 webpack 中的 alias 类似

alias: {
  '~': 'widget',
  '~m': path.resolve(__dirname, './app/component/widget/mobile'),
  'index$': path.resolve(__dirname, './app/component/page/index'),
}

在引入 widget 下的模块的时候，就可以：

{% require '~/B' %}
{% require '~m/B' %}
{% require 'index' %}

上面的代码则会转为

{% require 'widget/B' %}
{% require 'widget/mobile/B' %}
{% require 'page/index' %}

属性名映射

使用 webstorm + twig 写模板的都会遇到这种情况，require 标签还有 pagelet 标签中的 id ，是用 $ 符号，会导致 twig 模板解析报错。从而导致 webstorm 的一键格式化会出错。

所以提供属性名映射：

attrAlias: {
  '_id': '$id'
}

写模板的时候就可以：

{% pagelet _id="gameList" test="123" %}
{% require _id="~/B" %}

模板压缩

压缩前

<div id="app">
  {% require "~p/navigation" %}

  <div class="content">
    <div class="left-side">
      {% require "./w-game-list" %}
    </div>

    <div class="right-side">
      {% require "./w-rank-list" %}
    </div>
  </div>

  {% require "~p/foot" %}
</div>

会自动去掉换行，多余的空格，变换并压缩后

<div id="app">{% require "p/widget/navigation" %}<div class="content"><div class="left-side">{% require "p/page/index/w-game-list" %}</div><div class="right-side">{% require "p/page/index/w-rank-list" %}</div></div>{% require "p/widget/foot" %}</div>

自定义 processor

允许覆盖组件的 processor，做一些自己想干的活。比如组件的压缩功能，就是在 text 这个 processor 中做的

processor: {
  text(el) {
    // compress template
    el.text = el.text
      .replace(spaceReg, (_, l = '', r = '') => (
        l + ((l || r) ? '' : ' ') + r
      ));
  },
}

完全可以自定义个你自己觉得更好的压缩方法，再或者觉得组件对 require 或者 pagelet 的处理不够好，那么就覆盖组件的 require processor

processor: {
  pagelet(el) {
    // do something
  },
  require(el) {
    // do something
  }
}