11ty-fast-dev 中文文档教程

Question

这使得 11ty 在开发服务器后面使用时效率更高，使其仅在您真正想要查看页面时才编译您的页面。

这取决于您运行自己的开发服务器。 （这可以内置到 eleventy --serve 中，我不知道。）

⚠️ 这是一个疯狂的想法，可能目前还不打算用于生产。 不客气！

Usage

应该更新如下：

的.eleventy.js

const eleventyFastDev = require('11ty-fast-dev/patch');

module.exports = eleventyConfig => {
  // We can't set up 11ty-fast-dev here, but instead need to do it later in
  // 11ty's lifecycle. Its calculation of collections is a great place, as this
  // is before any files are written.
  // TODO(samthor): We only want to do this when flagged or in watch mode and
  // so on.
  const config = eleventyFastDev.buildConfig(eleventyConfig);
  eleventyConfig.addCollection('_11ty-fast-dev', config);

  // ... the rest of your config
};

你 （这里使用 Express）：

const {buildEleventyFastDevHandler} = require('11ty-fast-dev/handler');

const staticPaths = ['dist'];  // 11ty writes here by default
const eleventyFastDevHandler = buildEleventyFastDevHandler(staticPaths);

// Insert this _before_ your static handlers, so old dist files don't "win".
app.use(eleventyFastDevHandler);

利润！

Implementation

eleventy 端做了两件事：

• monkeypatches TemplateWriter._writeTemplate so that instead of writing a template, we store this ability into a closure
• opens a web server on "localhost:9999", and when the right page is requested, renders the file

在服务器端，它是一个非常基本的处理程序，然后它会向“localhost:9999”请求正确的页面。

Downsides

如前所述，这将仅在您请求文件时执行您的模板并运行转换。 如果你在这些地方有副作用，那么这对你不起作用。 （这通常被认为是一个坏主意无论如何）。