我们在HMPL.js中为开发者准备了许多新东西！-原创手记-慕课网

从版本 3 发布后的一个半月里，模板语言已经扩展并新增了多种功能和生态系统组件。

这对网页应用开发来说真是太好了，因为有时候人们添加的新功能，你可能根本用不上。虽然这么说不完全准确，但想象一下你有一部手机，他们给你增加了一个功能，你根本不会用，也懒得把它放在主屏幕上。这里却不是这样。

这里的一切都是根据最简单的需要简单准备的。

好了，我们来看看现在有什么吧。

略

🔗 使用 Vite.js 集成

与 Vite.js 的集成

(Note: Given the constraints of a single heading format, the most fluid translation would be "## 🔗 使用 Vite.js 集成". However, considering the output needs to be maintained as per the expert suggestion to add a space after the "#" symbol for common formatting practices in Chinese documentation, the translation is presented with a minor adjustment for clarity, though it slightly deviates from the original format due to space constraints and readability.)

Final translation after balancing all suggestions:

🔗 使用 Vite.js 集成

其中一个主要的创新是将 HMPL 与 Vite.js 整合在一起。现在，你可以通过添加一个插件来处理带有 .hmpl 扩展名的文件。

vite.config.mjs

    import { defineConfig } from "vite";
    import hmplPlugin from "vite-plugin-hmpl";

    export default defineConfig({
      plugins: [
        hmplPlugin({
          memo: true,
          sanitize: true,
        }),
      ],
    });

点击这里切换到全屏或退出全屏

值得注意的是，该模块是为ESM编写的，因为整个Vite环境和Rollup、Vue.js主要支持ESM。

……
星号

星号

嵌套区块

终于，在版本3发布了一个半月以后，我们终于实现了所谓的模板引擎“块助手”功能。我们为此语法的实现努力了一年，现在它已经非常完美，并且在未来多年内都将是相关的。

    <div>
      <button class="getHTML">获取HTML内容!</button>
      {{#request src="/api/test" after="click:.getHTML" repeat=false }} 
        {{#indicator trigger="pending"}}
          <p>加载中，请稍候...</p>
        {{/indicator}} 
      {{/request}}
    </div>

进入全屏退出全屏

最实用的东西竟然如此显而易见，这真是让人惊讶。简单点说，比如说，如果我们有一个带有标签的DOM树，那么它的结构应该和标签的布局相似。这是一个非常重要的变化，因为现在看起来非常舒服。

👉看看新功能，在这里

代码着色 🖍️

另一个不错的改变是，现在 VS Code 的插件会在 .hmpl 和 .html 文件中突出显示查询块语法。

如图所示的语法

这样的修改让代码更易读，更易理解。

👀 还有一些其他改动

这些更改包括添加对 HTTP TRACE 和 OPTION 方法的支持，修复了 bug，改进了文档，更新了示例和启动应用的代码，并增加了其他改进。

🔧 经过全面测试

由于模块实现的100%测试覆盖率，新功能应该会几乎不会出现错误。

已测试

你可以查看测试报告，该报告在 Codecov，而测试本身位于 test 文件夹里。

意见

你可以写下你对新功能的想法在评论区，看看别人的评论也会很有趣！或者，还有一个专门的Discord频道供大家提问和提建议，我会或者其他人会尽量回答大家的问题！

✅ 这个项目是开源的

所以你也可以一起参与！也就是说，你可以将其用于商业用途，

代码库：https://github.com/hmpl-language/hmpl
官网：https://hmpl-lang.dev

感谢您的阅读 ❤️！祝您有美好的一天！

说明：此图显示的是“谢谢”。