npm 包 handlebars-source-locators 使用教程

在前端开发中，我们经常会使用到 Handlebars 来进行页面渲染，而 handlebars-source-locators 就是一款可以帮助我们更方便地定位 Handlebars 模板错误位置的工具。本篇文章将会详细介绍 handlebars-source-locators 的使用方法。

handlebars-source-locators 是什么？

handlebars-source-locators 是一个 Handlebars 扩展包，它可以在编译过程中为 Handlebars 模板添加位置信息。这样一来，当模板解析时发生错误的时候，我们就可以更快速地定位到错误发生的位置。

安装

你可以使用 npm 安装 handlebars-source-locators 包：

npm install handlebars-source-locators

使用

使用 handlebars-source-locators 非常简单，只需要在 Handlebars 编译时指定 helpers 就行了：

const Handlebars = require('handlebars');
const sourceLocators = require('handlebars-source-locators');

Handlebars.registerHelper(sourceLocators.helpers);

// compile and use Handlebars templates as usual

现在，每个已编译的模板都会带上一些额外的信息，这些信息会在解析模板时用到。

定位错误

假设你有以下的 Handlebars 模板：

<div class="entry">
  <h1>{{title_name}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

当模板解析时发生了一个错误：

Handlebars.compile('<div class="entry"><h1> {{title}}</h1><div class="body">{{body}}');

你会看到如下的错误信息：

Error: Parse error on line 1:
...<div class="body">{{body}}
-----------------------^
Expecting 'CLOSE', 'CLOSE_UNESCAPED', 'STRING', 'INTEGER', 'BOOLEAN', 'ID', 'DATA', 'SEP', 'EQUALS', 'EOF', 'PROGRAM', 'IF', 'UNLESS', 'ELSE', 'ELSEIF', 'ENDIF', 'EACH', 'IN', 'PARTIAL', 'COMMENT', '{', 'START_PARTIAL', 'ARROW', 'AT', got 'UNDEFINED'

现在，我们可以使用 handlebars-source-locators 提供的模板位置信息来定位错误位置。只需要取出错误信息的行号和列号，再使用 sourceLocators.findOriginalLocation() 函数即可找到错误在原始模板中的位置。

const errorLine = 1;
const errorColumn = 22;

const originalLocation = sourceLocators.findOriginalLocation(compiledTemplate, errorLine, errorColumn);

console.log(originalLocation);

在上面的例子中，输出的结果将会是：

{ source: { line: 2, column: 4 }, generated: { line: 1, column: 22 } }

这个结果告诉我们，错误在原始模板的第 2 行第 4 列，而在编译后的模板中是第 1 行第 22 列。

结语

通过使用 handlebars-source-locators，我们可以更方便地定位 Handlebars 模板中的错误。同样的，我们也可以使用这个工具快速地跳转到原始模板中的某一位置进行编辑。请尽快尝试并掌握这项技能，它会让你的前端开发工作变得更加高效。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67474