lib에 문제가 있습니까? 당신의 것을 만드십시오!

9371 단어 nodekoahacktoberfest
Koa을 사용하는 Node.js 프로젝트에서 작업 중입니다. 보기를 렌더링하기 위해 Twig을 템플릿 엔진으로 사용하고 싶었습니다. 몇 가지 문제가 발생했는데 어떻게 처리했는지 이야기하고 싶습니다.

많은 라이브러리와 하나의 문제



Koa로 HTML을 렌더링하는 일반적인 방법은 koa-views을 사용하는 것입니다. consolidate 사용하려는 템플릿 엔진을 수동으로 추가하고 구성해야 합니다.
종속되는 라이브러리가 많이 있습니다( koa-views → consolidate → twig ). 나쁘지는 않지만 각 라이브러리가 다른 라이브러리와 올바르게 통신해야 합니다.

다른 twig 파일을 포함하거나 확장하려고 할 때 문제가 발생했습니다. 다음 코드를 예로 들어 보겠습니다.

{# template.twig #}

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <main>{% block main %}{% endblock %}</main>
  </body>
</html>




{# home.twig #}

{% extends "template.html" %}

{% block main %}
<div>Home</div>
{% endblock %}

이 코드는 다음 오류를 발생시킵니다. consolidate에 설명된 대로 일부 특정 구성을 추가하는 경우에도 마찬가지입니다.

Error parsing twig template undefined: 
TwigException: Cannot extend an inline template.

문제를 읽어보니 이 라이브러리들 사이에 약간의 간섭이 있는 것처럼 보였기 때문에 그 수를 줄이고 Koa와 Twig 사이의 링크를 직접 만들기로 결정했습니다.

이 문제 koa-twig 라이브러리



의 목표는 render 기능으로 Koa 컨텍스트를 향상시키는 것입니다. koa-views 에서 크게 영감을 받았습니다.

코드의 첫 번째 버전을 소개하겠습니다. 나는 그것을 개선했고, Koa(koa-twig , koa-ejs ...)에 대한 다른 템플릿 엔진 바인딩과 동일한 기능을 제공하기 위해 계속 개선하고 있습니다.

const twig = require("twig");
const util = require("util");

// Use Promise instead of callback syntax.
const renderFile = util.promisify(twig.renderFile);

/**
 * Give the ability to use Twig template engine in Koa
 * @param {object} config
 * @param {string} config.views - the views folder path
 * @param {object} config.data - the data to pass to each view
 * @param {object} config.extension - the data to pass to each view
 */
const twigMiddleware = (config) => async (ctx, next) => {
  function render(file, data) {
    return renderFile(`${config.views}/${file}.${config.extension || "twig"}`, {
      ...config.data,
      ...data,
    });
  }

  /* `render` function will be accessible
  on ctx and on ctx.response */
  ctx.response.render = render;
  ctx.render = render;

  await next();
};

module.exports = twigMiddleware;

다음은 기본 사용 사례입니다.

const Koa = require("koa");
const koaTwig = require("koa-twig");

const app = new Koa();

// Configuration of the middleware
app.use(
  koaTwig({
    views: `${__dirname}/views`
  })
);

app.use(async (ctx) => {
  // Calling `render` will render `./views/home.twig`
  ctx.body = await ctx.render("home");
});

app.listen(8080);

따라서 빠른 승리에 도달하는 것은 그리 어렵지 않았습니다. 나는 이제 더 적은 중간으로 개발할 수 있습니다. 이것은 또한 모든 문제에 대해 lib가 필요하지 않다는 것을 기억하게 만든 것입니다!

코아-hbs 보너스



이 작은 라이브러리를 위해 만든 모든 PR은 Hacktoberfest에 반영되었습니다 🎉



당신이 하고 있는 일을 만들고 공유해야 하는 또 다른 이유!

결론



도로에 장애물이 있어 오른쪽으로 갈 수 없다면 왼쪽으로 가십시오. 닫혀 있으면 위로 올라가십시오. 막히면 아래를 파헤쳐라! 누군가가 당신을 위해 도로를 청소할 때까지 기다리지 마십시오.

다른 Koa 템플릿 엔진 바인딩과 동일한 기능을 갖기 위해서는 아직 할 일이 좀 있지만 만족스러운 첫 번째 단계입니다!

짧은 버전: DIY 및 KISS.

읽어 주셔서 감사합니다.

연결


    • elasticsearch 6.xdsl 상용 문법
    elasticsearchcompletion 형식 필드 값이 비어 있습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage