如何为Eleventy拥有有效的JavaScript模板文件

作者 : IT 大叔 本文共856个字,预计阅读时间需要3分钟 发布时间: 2020-10-9

当我开始将Web组件与Eleventy结合使用作为概念证明时,我很快意识到我需要从同一语言模板文件生成JavaScript文件,例如将文件转换为文件。*.js.njk*.js

起初,这似乎是容易的,因为Eleventy可以写入任何文件permalink模板的主要前事

---
permalink: /javascript.js
---
* .js.njk文件的标题

但是,最重要的语法不是有效的JavaScript,因此大多数代码编辑器会将其标记为错误和警告的组合,就像IntelliJ IDEA对我的文件所做的那样:

如何为Eleventy拥有有效的JavaScript模板文件插图
IntelliJ IDEA中的上述相同代码

此外,JavaScript的棉短绒和格式化,像ESLint更漂亮,将既不承认的是特殊的语法......我们可以从我们的文件中删除,但我们希望的代码,而他们呢?就我个人而言,我不能!😟

但是,如果我们能替代--- --- 分隔符与其他人,这将是有效的JavaScript,喜欢评论/*--- ---*/?🧐

对我们来说幸运的是,Eleventy使用灰色问题npm包及其默认选项来解析前件,并且它提供了允许我们覆盖这些选项的功能!为此,我们只需要在Eleventy配置文件添加几行即可:

  eleventyConfig.setFrontMatterParsingOptions({
    delimiters: ['/*---', '---*/'],
  });
.eleventy.js文件除外,该文件会覆盖前端问题解析

通过这种配置,我们现在可以使用新的语法对前端数据进行编码:

/*---
permalink: /javascript.js
---*/

现在,我们的文件包含有效的JavaScript,我们的工具将被正确解析。😌

可悲的是,这种方法给我带来了一些不便,我学会了使用它:您只能指定几个定界符。因此,现在,您需要在所有地方使用我们的新语法,例如在HTML文件中,即使它不是另一种语言的适当语法也是如此。

因此,如果您仍想更改默认的定界符,建议您寻找更多的开发文件,并为这些文件选择正确的定界符。💡

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 如何为Eleventy拥有有效的JavaScript模板文件

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论