Eta 템플릿 엔진에 Deno 지원 추가

Denoify를 사용하여 모듈 Eta에 Deno 지원을 추가하는 방법

출신 배경

몇 달 전, 나는 내가 만든 Eta에 관한 글을 썼는데, 이것은 삽입식 자바스크립트 템플릿 엔진이다.

EJS보다 3배 빠른 JS 템플릿 엔진 구축

벤 고블러・ 4월 11일・ 3분 읽기

#javascript #typescript #showdev #node

그때부터 에타는 상당한 성공을 거두었고 (지금 페이스북에서 유행하는 Docusaurus 라이브러리에서 SSR 페이지를 만드는 데 사용되고 있다) 많은 업데이트를 보았다.
나는 특히 흥분해서 Deno 지원을 추가했다.Deno가 비교적 새롭기 때문에 그와 호환되는 템플릿 엔진은 많지 않고 Eta처럼 기능이 완비된 것도 없다.이 밖에 Eta는 TypeScript로 작성되었는데 이것은 Deno 모듈에 매우 이상적이다. 왜냐하면 Deno는 TypeScript에 대한 지원을 내장했기 때문이다.
EJS나 lodash 같은 라이브러리.노드에 대해 템플릿은 여전히 Eta보다 많이 유행합니다.js 사용자는 비록 무게가 비교적 가볍고 신뢰성이 낮으며 속도가 비교적 느리다.나는 Eta에 Deno 지원을 추가하면 그것의 인기를 높일 수 있기를 바란다. 왜냐하면 낡은 라이브러리는 선택할 수 없기 때문이다.

도전하다

실제로 데노의 문법을 사용하기 위해 모듈을 이식하는 것은 매우 쉽다는 것을 나는 안다.내가 해야 할 일은 .ts 끝을 imports에 추가하고 fs 같은 내장 노드가 아니라 Deno의 standard library 를 사용하는 것이다.
하지만 나는 약간의 도전을 볼 수 있다.우선 Eta는 Node와 계속 협력해야 합니다.js.Deno를 사용하여 URL 가져오기 모듈을 사용할 수 있습니다.

import  *  as  fs  from  "https://deno.land/[email protected]/fs/mod.ts"

이것은 Node에서 틀림없이 작용하지 않을 것이다.js와 오류가 발생할 수 있습니다.
그 다음으로 Deno가 파일 경로를 해석하는 방식은 노드와 다릅니다.TypeScript가 있는 js.가져오기에서 파일 확장자 .ts 를 사용합니다. 예를 들어 import someMod from './some-mod.ts' 를 사용하면 노드 버퍼 오류가 발생하지만 확장자를 지정하지 않으면 Deno 버퍼 오류가 발생합니다.
마지막으로 저는 Deno의 제3자 모듈 등록표https://deno.land/x에 Eta를 위탁 관리할 계획입니다.다음과 같이 짧은 URL을 사용하여 모듈을 가져올 수 있기를 바랍니다.

import * as eta from "https://deno.land/x/eta/mod.ts";

다음과 같은 긴 중첩 디렉토리 경로를 지정할 필요가 없습니다.

import * as eta from "https://deno.land/x/eta/dist/deno/mod.ts";

솔루션

인터넷 연구를 통해 나는 도서관 이름Denoify을 발견했다.Denoify는 TypeScript 원본 파일을 받아들여 Deno 구축 파일로 출력하는 구축 도구입니다.
Denoify는 다음과 같이 가져오기 경로를 Deno와 함께 자동으로 변환합니다.

import { myFunc } from './my-func'

다음을 수행합니다.

import { myFunc } from './my-func.ts'

그러나 Denoify의 주요 장점은 파일의 특정한 Deno 구현을 제공하는 것입니다.
파일 file-handlers.ts 이 있다면 노드 fs 모듈이 필요합니다.Denoify를 사용하면 Deno의 표준 라이브러리file-handlers.deno.ts를 사용하는 파일fs을 만들 수 있습니다.
Denoify는 구축할 때 덮어쓰기 파일을 자동으로 바꿉니다(React Native의 사용자는 익숙하게 들리지만 하나입니다feature this was based on.사실이 증명하듯이 이것은 매우 유용한 기능이다.
내 예에서, 나는 모든 파일 처리 논리를 file-methods.ts 라는 파일에서 추출할 수 있고, file-methods.deno.ts 에서 Deno에 특정한 실현을 만들 수 있다.다른 스크립트는 일반 스크립트와 같을 수 있지만 import ... from './file-methods' 자체는 Deno 구축에서 다른 파일입니다.

테스트

발표하기 전에 내가 해야 할 마지막 일은 데노 구축에 테스트를 추가하는 것이다.다행히도 데노는 하나built-in assertions module가 있다.그것의 문법은 내가 사용한 다른 단언 라이브러리와 매우 비슷하다. 예를 들어 이것은 내가 작성한 간단한 테스트이다.

import { assertEquals } from 'https://deno.land/[email protected]/testing/asserts.ts'
import { render } from '../../deno_dist/mod.ts'

Deno.test('simple render', () => {
  const template = `Hi <%=it.name%>`
  assertEquals(eta.render(template, { name: 'Ben' }), 'Hi Ben')
})

마지막으로 나는 주 테스트 폴더에 file-methods.ts 라는 하위 디렉터리를 만들었다.그곳에서 나는 몇 가지 테스트를 했는데 주로 일반적인 기능(구축에 문제가 생기지 않도록 모든 것이 고장났다)과 파일 처리(위에서 말한 바와 같이 Eta는 유일한 Deno 파일 처리 코드가 있다)에 집중되었다.

마지막 단계

사실이 증명하듯이linter, 테스트 파일, 문서 생성기는 그들이 입력 디렉터리에서 본 모든 파일을 직접 테스트 경로에 있지 않아도 조작하려고 한다.
나는 어떻게 해야 할지 생각하는데 많은 시간을 썼다.

ESLint 무시deno/ 파일

Deno 파일 포맷을 시도하지 않고 더 예쁘게 만들기

Jest 무시*.deno.ts 하위 디렉토리

작업복 무시test/deno 하위 디렉토리

TypeDoc에서 Deno 파일 무시

등

마지막으로, 나는 나의 모든 Deno 파일을 정확하게 무시했다.구축 스크립트에 test/deno 명령을 추가한 다음...봐라!Eta는 Deno를 지원합니다!

발표하다

https://deno.land/x의 특징 중 하나는 Git 저장소 하위 디렉토리에 모듈을 추가할 수 있다는 것입니다.내 예에서, 나는 denoify 라는 출력 폴더를 만들기 위해 denoify 를 설정했다.이 폴더에는 Eta의 모든 소스 파일 및 deno_dist 및 README.md 이 포함되어 있습니다.
Eta를 https://deno.land/x에 추가하여 https://deno.land/x/eta 에서 확인하고 가져올 수 있습니다.웹 hooks 덕분에 새로운 태그 버전을 만들 때마다 등록표는 자동으로 모듈을 업데이트합니다.

결론

이제 npm 패키지 데노를 지원하는 계정이 생겼습니다!나는 이것이 그들의 패키지와 라이브러리에 데노 지원을 제공하는 모든 사람들에게 도움이 되기를 바란다.만약 당신에게 어떤 문제가 있다면, 평론에서 질문하세요!
⚡ 강제 파렴치 플러그⚡
다음 Deno 프로젝트에 대한 템플릿 엔진을 찾고 있는 경우 Eta!그것은 무게가 가볍고 성능이 탁월하며 매우 구성할 수 있다.
보기Eta's documentation, 또는 Opine 및 Alosaur와 함께 사용되는 Eta 예제를 보십시오!