scrat-parser-pagelet

    1.6.1 • Public • Published

    scrat-parser-pagelet

    NPM version Build Status Appveyor status Coverage Status

    在 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 + ((|| r) ? '' : ' ') + r
          ));
      },
    }

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

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

    Keywords

    Install

    npm i scrat-parser-pagelet

    DownloadsWeekly Downloads

    0

    Version

    1.6.1

    License

    MIT

    Last publish

    Collaborators

    • wanghx