babelPluginMettle

babelPluginMettle 是一款 babel 插件，将 HTML 模板字符串转化为 Virtual Dom。从之前的运行时转移到编译时，大幅度提高渲染性能。

安装

npm install babel-plugin-mettle

TIP

createMettleApp 项目脚手架工具已默认安装。

用法

在你的 Babel 配置中（.babelrc、babel.config.js、package.json 中的babel字段等），添加插件：

{
  "plugins": [["babel-plugin-mettle"]]
}

选项

tag=html

默认情况下，babelPluginMettle 将处理所有带有名为 html 的标记函数的标记模板。 要使用不同的名称，请在 Babel 配置中使用 tag 选项：

{
  "plugins": [
    [
      "babel-plugin-mettle",
      {
        "tag": "html"
      }
    ]
  ]
}

表达式模式

默认会使用html`` 这种标签模版的模式。如果有其他场景，可以选择调用表达式模式，有两种。

• 函数名称为tem_h，参数是模版字符串。

tem_h(`<p>hello</p>`);

• 函数名称为str_h，参数是普通字符串。

str_h('<p>hello</p>');

TIP

不管是选择默认模式，还是调用表达式模式，它们最终输出结构都是相同的。另外，这些模式我们可以同时使用。