11ty에서 웹 구성 요소 사용

이 글은 제 개인 블로그griffa.dev를 구축하는 데 관련된 일을 묘사하고 더 많은 세부 사항과 현장 프레젠테이션을 마음대로 읽을 수 있습니다there.
나는 이 블로그를 통해 일을 기초로 되돌리고 인터넷 기초, 예를 들어 html과 css에 중점을 두고 싶다.이외에도 11ty를 사용하면 Markdown에서 창작을 할 수 있습니다. 이것은 게시물의 어느 곳에서든 HTML을 자유롭게 추가할 수 있다는 것을 의미합니다.
그러나 저는 HTML/CSS에 중점을 두고 있지만 일부 분야에서 자바스크립트를 추가하는 것은 의미가 있습니다. 추가적인 상호작용을 얻기 위해 이것이 바로 웹 구성 요소의 용무지입니다.

어이그가 네트워크 구성 요소를 언급했으니, 그를 잡아라!(주화박은 정말 친구다.)
구글 엔지니어가 나보다 더 잘 말했다.

저스틴 파그나니

Eleventy와 웹 구성 요소는 매우 잘 어울린다.
2020년 1월 2일 오후 21:24
팔.
57
본고에서 저는 웹 구성 요소에 어떻게 개발 환경을 설정하고 간단한 생산 최적화를 하는지 설명하고자 합니다.
우선, 나는 이 사이트에서 웹 구성 요소를 사용하는 방법을 토론하고 싶다.모든 컨텐트는 사용 가능한 JavaScript/Web 구성 요소가 없는 상태에서 사용할 수 있어야 하지만, 사용 가능한 곳에서는 컨텐트가 점차 강화되어야 합니다.

점진적 증강 웹 구성 요소 용례

다음은 JavaScript를 사용하여 점진적으로 컨텐츠를 강화하는 몇 가지 예입니다.

YouTube 내장

점진적인 향상을 통해 YouTube 비디오에 삽입하려면 먼저 콘텐츠의 최소 HTML 구현을 확인해야 합니다. 즉,

비디오로 이동할 수 있는 링크를 클릭합니다.

링크를 포장하는 데 사용되는 이미지 축소판입니다.

비디오의 제목은 접근성에 매우 중요하다.

두 번째 부분은 YouTube 플레이어에 끼워 넣는 부품을 확정하는 것이다. 나는 여기서 바퀴를 재발명할 생각은 없다.
여기의 완벽한 조화입니다.npm install lite-youtube-embed

<lite-youtube class="video" videoid="j8mJrhhdHWc" style="background-image: url('https://i.ytimg.com/vi/j8mJrhhdHWc/hqdefault.jpg');">
      <a onclick="('customElements' in window) && event.preventDefault()" title="Play Video" class="no-js" target="_blank" href="https://youtube.com?w=j8mJrhhdHWc">{% include "img/play.svg" %}</a>
</lite-youtube>

위에는 몇 가지 일이 있다.

Youtube CDN의 배경 이미지 서버입니다.

기본적으로 <a> 이 있습니다. 이것은 새 옵션 카드

에서 유튜브 동영상을 열 수 있습니다.

새 탭이 열리지 않도록 클릭합니다.

여기 무슨 일이 일어났는지 설명해 주세요.

만약에 사이트에 웹 구성 요소/JavaScript가 없다면 onclick을 무시하고 예상 링크를 누르면 브라우저에서 지원되는지 확인customElements을 통해 이 점을 실현합니다.

JS/Web 구성 요소를 활성화하고 링크를 클릭하면 탭이 열리지 않고 lite-youtube 이 클릭을 처리하여 유튜브를 삽입합니다.

실시간 코드 데모

어느 정도에, 나는 내 라이브 프레젠테이션이 11ty의 마크다운을 어떻게 사용하는지 상세하게 소개하는 글을 써야 하지만, 그것들은 결국 웹 구성 요소로 나타난다.
이것은 실시간 웹 구성 요소를 보여주는 것으로 html is와 CSS를 하위 내용으로 받아들인다.
현장 프레젠테이션에 대해headhere를 누르십시오.

  <live-demo id="my-live-demo">
    <div slot="html">
        &lt;div class=&quot;my-div&quot;&gt;styled by the css&lt;/div&gt;
    </div>
      <div slot="css">
        .my-div {
          color: var(--Primary, blue);
        }
    </div>
</div>

내가 여기서 사용하는 방법은 웹 구성 요소를 사용할 수 없을 때 코드만 렌더링하고 문법만 돋보이게 하는 것이지만, JS가 사용할 수 있을 때 실시간 프레젠테이션 구성 요소가 나타날 것이다.브라우저에서 JavaScript를 비활성화하려면 코드 세션만 보여야 합니다.
슬롯을 사용했습니다. 하나는 js, 하나는 html, 하나는 css 입니다.그리고 웹 구성 요소는 텍스트 내용을 가져와 적당한 렌더링을 합니다.
이런 방법은 a lot와 유사하다. 나는 장래에 나의 블로그에서 그것을 사용하고 싶지만, 내가 어떻게 그것을 구축하는지 보면 매우 재미있다.

11ty 및 웹 구성 요소에 대한 개발 환경 설정

11ty와 웹 구성 요소를 위한 개발 환경을 설정하는 것은 매우 간단합니다. 특히 순수한 자바스크립트를 사용하고 구축 과정이 필요하지 않습니다.나는 구축 과정이 없는 것이 신선한 느낌이라는 것을 발견했다. 개발 도구는 당신의 길을 비켜서 코드를 작성하도록 해야 한다.

If you are just working with vanilla web components and don't want to use any dependencies from NPM, then good news, you don't need to do anything special, just use the default 11ty dev server, and move on to create great content!

NPM의 일부 구성 요소나 라이브러리, 예를 들어lithtml/lit 요소를 사용하려면 bare imports 를 브라우저에서 작업하는 상대적인 URL로 변환해야 합니다. 예를 들어.

import { LitElement } from "lit-element";

이렇게 됩니다.

import { LitElement } from "./../node_modules/lit-element/lit-element.js";

이 작업을 수행하는 데 가장 적합한 도구는 https://www.npmjs.com/package/es-dev-server 입니다.

At the time of writing this tool is in the process of getting moved over to @web/dev-server. For this example, i'll use @web/dev-server but es-dev-server would work too.

npm i --save-dev @web/dev-server

우선, 당신이 11세의 사이트를 위해 서비스를 제공할 때, 당신은 통상적으로 npx eleventy --serve 을 사용하지만, 우리는 npx eleventy --watch 을 사용할 것이다.
이것은 11ty 사이트의 모든 실시간 건물을 제공하지만 서버가 없습니다.
이 기능은 우리 서버에서 다음과 같이 실행할 수 있는 @web/dev-server 기능입니다.

web-dev-server --node-resolve --open

이 두 가지 임무를 결합시키기 위해 우리는 사용할 수 있다concurrently

npm i concurrently --save-dev

npm 스크립트로 조합:

    "start": "concurrently \"npx eleventy --watch\" \"web-dev-server  --node-resolve\"",

상기 내용과 결합하면 우리에게 개발 서버를 제공할 것이지만, 우리는 11ty_site 폴더를 어떻게 찾는지, 그리고 우리의 노드 모듈을 어떻게 해석하는지 알려주지 않았다.
이를 위해서는 작은 구성 파일을 도입하고 간단한 중간부품을 통해 다음과 같은 작업을 수행해야 합니다.

요청이 11ty 자산이면 _siteurl에 추가하여 _site로부터 서비스를 제공합니다.

요청이 html 페이지라면 _site에서 보내주십시오

그렇지 않으면 next()로 이동하여 JS 파일을 논리적으로 처리하여 ESM 가져오기를 확인할 수 있습니다.

파일 호출 만들기web-dev-server.config.js

module.exports = {
  port: 8000,
  watch: true,
  rootDir: ".",
  middleware: [
      serve11tyAssets({dist: "_site_"})
    ],
  nodeResolve: true
};

이것은 매우 직접적인 이해일 것이다. 희망:

포트: 서버의 로컬 포트

손목시계: 변화가 있을 때마다 브라우저가 다시 불러온다

rootDir: node_modules 및 11ty_site 폴더를 포함하는 루트 디렉터리일 것입니다.

중간부품: 요청에서 실행되는 함수입니다. 곧 Serve11tyasset을 설명하겠습니다.

nodeResolve: 변환할 플래그import foo from 'bar'

serve11tyAssets이렇게 보인다.

const path = require("path");
const fs = require("fs").promises;
const URL = require("url").URL;
/**
 *
 * Check if asset lives in 11ty _site folder, if not serve from root folder.
 */
const serve11tyAssets = ({dist = "_site"} = {}) => {
    return async (context, next) => {
        // Node URL requires a full url so... whatever.com (url isnot important)
        const pathName = new URL(`https://whatever.com${context.url}`).pathname;
        // is the request for a html file?
        const url = pathName.endsWith("/") ? `${pathName}index.html` : pathName;
        try {
            // check if the file exists, if so, modify the url to come from `_site` folder.
            const stats = await fs.stat(path.join(dist, url));
            if (stats.isFile()) {
                context.url = `/${dist}${pathName}`
            }
            return next();
        } catch  {
            return next();
        }
    }
}

이 예시가 의미가 있기를 바라며, vanilla JavaScript 모듈을 11ty 개발 서버에 추가하는 것이 얼마나 간단한지 보여 줍니다.
만약 필요하다면, 이 체인에 새로운 도구를 쉽게 추가할 수 있습니다. 예를 들어gulp

    "start": "npx gulp && concurrently \"npx gulp watch\" \"npx eleventy --watch\" \"web-dev-server\""

JavaScript 운영 최적화

11살짜리 프로젝트를 위해 자바스크립트를 최적화하는 도구를 선택하는 것에 대해 이야기할 때, 선택은 전적으로 당신에게 달려 있다. 만약 나처럼 복잡한 구축을 설정하고 싶지 않다면, 당신은 Open WC rollup config 다른 사람의 위대한 일을 이용할 수 있다.
이것은 나의 배치다.

npm i rollup deepmerge rollup-plugin-output-manifest @open-wc/building-rollup -D

import merge from "deepmerge";
import { createBasicConfig } from "@open-wc/building-rollup";
import outputManifest from "rollup-plugin-output-manifest";

const entrypoints = {
  index: "src/assets/index.js"
};

const baseConfig = createBasicConfig({
  outputDir: "dist/assets"
});

export default merge(baseConfig, {
  input: entrypoints,
  plugins: [outputManifest({
      // ../ to go outside of dist and into include
      fileName: '../../src/_includes/manifest.json',
      // assets is my folder of choice for js files
      publicPath: 'assets/'
  })]
});

일부 페이지에만 구성 요소를 로드하려면 추가 입구점을 추가하면 도움이 됩니다.
이것을 다시 연결하기 위해서 11ty 사용했습니다.이것은 rollup-plugin-output-manifest 파일을 출력합니다.
원한다면 data file 로 출력할 수 있지만, 스크립트에 더 많은 논리를 추가하여 manifest.json 모드에 있는지 여부에 따라 다른 작업을 수행하고 싶습니다.production라는 파일을 만듭니다. 이 파일은 Global Data File 로 읽힙니다.

module.exports = {
    getPath: (assetName) => {
        if (process.env.NODE_ENV === "production") {
            const assets = require("../_includes/manifest.json");
            const modulePath = assets[assetName];
            if(!modulePath) {
              throw new Error(`error with getAsset, ${assetName} does not exist in manifest.json`);
            }
            return `/${modulePath}`;
        } else {
            return `/src/assets/${assetName}`;
        }
    }
}

그리고 11ty 템플릿에서:

    <script src="{{ assets.getPath("index.js")}}" type="module"></script>

이렇게 하면 내가 개발할 때 수정되지 않은 src 코드만 제공할 수 있지만, 생산 자산에 삽입되어 있으며, 이 자산의 명칭에는 캐시를 파괴하는 데 사용되는 해시가 있다.
NODE\u ENV 로고를 설정하는 방법을 알고 싶다면, 이것은 제 구축 스크립트입니다.

    "build": "rm -rf dist && NODE_ENV=production rollup -c rollup.config.js && NODE_ENV=production npx eleventy"

이것이 바로 나의 설정이다. 나는 이 점을 할 수 있는 더 좋은 방법이 있다고 믿지만, 그것은 나를 위해 일을 완성했고, 이것이 유용하길 바란다.