scrat-parser-pagelet
在 scrat pagelet 模式中,对 pagelet 的模板能力进行一些拓展
安装
npm install scrat-parser-pagelet --save-dev
yarn add scrat-parser-pagelet --dev
快速使用
scrat
参数列表
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 'index$': path
在引入 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" %}
模板压缩
压缩前
{% require "~p/navigation" %} {% require "./w-game-list" %} {% require "./w-rank-list" %} {% require "~p/foot" %}
会自动去掉换行,多余的空格,变换并压缩后
{% require "p/widget/navigation" %}{% require "p/page/index/w-game-list" %}{% require "p/page/index/w-rank-list" %}{% require "p/widget/foot" %}
自定义 processor
允许覆盖组件的 processor,做一些自己想干的活。比如组件的压缩功能,就是在 text 这个 processor 中做的
processor: { // compress template eltext = eltext ; }
完全可以自定义个你自己觉得更好的压缩方法,再或者觉得组件对 require 或者 pagelet 的处理不够好,那么就覆盖组件的 require processor
processor: { // do something } { // do something }