전체 스택 Deno 응용 프로그램 만들기 도구 만들기

다음 글은 denopack을 개발하고 유지할 때 정리한 경험과 교훈입니다. denopack은 코드를 Deno와 연결/축소하는 데 사용되는 도구 모음입니다.deno bundle 대부분의 묶음기가 필요한 상황을 포함하고 있지만 나무를 흔들거나 축소하는 등 유행용례가 필수품으로 급부상하고 있다.
이것은 denopack 개발의 기본 동기입니다. Node와 NPM을 사용하고 싶지 않은 개발자에게 묶음 체험을 제공합니다. Node\u 모듈을 관리하는 것은 물론이고 Deno 프로젝트에 종사합니다.

묶음기와 축소기

번들 API는 여러 가지 방법으로 제공됩니다.처음에 두 가지 가장 두드러진 선택은 스스로 작성하거나 deno bundle 을 바탕으로 구축하는 것이다.
그러나 노드 생태계는 믿을 수 없을 정도로 기능이 강한 묶음 프로그램을 가지고 있다. 이것이 바로 우리의 목표가 데노에서 Rollup(내 개인적인 체험에서 가장 즐거운 묶음 프로그램)을 사용하려고 시도하는 이유이다.다음과 같은 몇 가지 방법이 있습니다.

관리자도 Denoify

로 Deno에 게시

패키지를 Deno에 이식하고 자체 유지 관리

패키지를 사용하는 브라우저 버전(있는 경우)

이 모든 선택 중 마지막이 가장 의미가 있다.Rollup의 관리자는 소음 제거 버전을 포함하지 않습니다. 이식 패키지는 수동 유지보수를 의미합니다. 내부 구조에 익숙하지 않으면 그 자체가 골치 아픈 문제입니다.
브라우저 버전을 사용하면 수동으로 CLI와 파일 시스템 액세스 (파일 불러오기 및 쓰기) 를 추가해야 한다는 것을 의미하며, 캐시, 디스크, 원격에서 읽을 수 있도록 denopack CLI와 각종 기본 플러그인을 생성합니다.
주제를 축소하는 것에 대해 이야기할 때, 처음부터 우리가 간결하게 사용할 것이라는 것을 분명히 알 수 있다.여기서도 브라우저를 사용할 수 있습니다.브라우저 버전의 Terser는 내보내기 대신 글로벌 This에 의존 항목을 주입하기 때문에 작은 해커들이 다시 내보내야 합니다.

import "https://unpkg.com/[email protected]/dist/source-map.js";
import "https://unpkg.com/[email protected]/dist/bundle.min.js";

import { AST_Node, MinifyOptions, MinifyOutput } from "./terser.d.ts";

export const minify: (
  files: string | string[] | { [file: string]: string } | AST_Node,
  options?: MinifyOptions
) => MinifyOutput = (globalThis as any).Terser.minify;

경험과 교훈

기존의 묶음기부터 정확한 경로라는 사실이 증명되었다. 왜냐하면 이것은 전투 테스트를 거친 모든 기존 플러그인을 잠재적으로 사용할 수 있기 때문이다.

브라우저 버전은 깔끔한 작은 패키지로 일반적으로 삽입하고 사용하기 쉽지만 확실히 중대한 균형이 있다.많은 경우에 수동으로 가방을 다시 쓰는 것보다 더 좋은 선택이다.
추가적인 평가 및 성능 저하에 대응하기 위해 Dell은 적절한 Deno+ESM 구문을 지원하기 위해 주요 코드 세그먼트를 자동으로 채우거나 다시 작성할 수 있는 솔루션을 제공하기 위해 노력하고 있습니다.

컴파일러 API, 잠금 파일 및 모니터링 모드

이 절차의 다음 단계는 Typescript 지원을 처리하는 것입니다.다행히도 Deno는 현재 --unstable 로고 뒤에 숨겨져 있지만 Deno 객체 내부의 API로 컴파일, 전송 및 바인딩됩니다.
두 개Deno.compile와 Deno.transpile 모두 이를 단독 플러그인으로 만들었다.사후에 보면 이것은 필요한 선택이다. 왜냐하면 어떤 장면은 서로 다른 방법을 필요로 하기 때문이다.

현재 가장 큰 문제는 Deno.compiledenopack이나 사용자가 제어할 수 없는 실행 시 캐시를 사용했다는 것이다...그러나이것은 현재 직접 컴파일이 감시 모드 (Rollup의 캐시 기능을 사용) 와 잘 융합되지 않지만 수동 파일 해석과 캐시 불러오는 추상적인 측면에서 뛰어나다는 것을 의미한다.
한편 Deno.transpile는 효율적인 단일 파일 처리 분야에서 1위를 차지했다.Compile은 CSS 자산을 식별할 수 없습니다. 왜냐하면 이것은 실제로 이를 JS/TS 코드로 해석하려고 하기 때문입니다. Transbile은 본질적으로 유형이 박리된 코드만 보내기 때문입니다.Transfile은 React를 사용하지 않도록 JSX 구문도 전송할 수 있습니다.
자물쇠 파일 지원과 증량 컴파일/감시 모드의 추가는denopack 제1장의 끝을 상징합니다.감시 모드는 여전히 베타 버전으로 여겨진다. 상술한 Compile과의 호환성이 낮을 뿐만 아니라 Rollup의 본체 감시 프로그램 API에 접근할 수 없기 때문에 외부 자산(예를 들어 CSS와 HTML)을 사용하는 상황에서 더욱 신뢰할 수 없다.

경험과 교훈

tl;dr forDeno.compilevsDeno.transpile:

외부 자산이 없는 백엔드 응용 프로그램이나 SPA에서 작업하고 시계 지원이 필요하지 않을 때 Compile를 사용하십시오.만약 React SPA를 쓰고 있다면, 외부 스타일이나 JS 솔루션의 CSS에 귀속될 것입니다. (Otion을 보러 가는 것을 강력히 권장합니다.)

아이디어를 신속하게 교체하거나 CSS, SVG 등 자산에 접근해야 하는 프런트엔드 응용 프로그램을 구축하고 있을 때 Transbile을 사용하십시오...JS/TS 컨텍스트에서

denopack의 미래 장절에 대해 말하자면, 접근 집합의 비브라우저 기능은 현재 이미 필수적인 것이 되었다.번들 작업과 적절한 모니터링/변동분 지원을 허용하는 가장 효과적인 방법일 수 있습니다.

다음 장: 앞부분에 주목하기

다음 단계에서 denopack을 어디서 사용할지 결정하기 전에, 나는 그것을 documentation site 정적 사이트 생성기로 사용하려고 도전했다.
자산을 적재/발표하는 데 주력한 것은 이번이 처음이어서 순조롭다.결과는 Github의/docs 섹션에서 찾을 수 있습니다(아래 링크).
결국 이것은 우리가 개인적으로 가장 만족스러운 분야인 전단으로 중점을 옮길 것이라는 것을 의미한다.HTML, CSS, dev 서버 플러그인의 추가는 웹 개발자의 옵션과 DX를 크게 증가시켰고,denopackwhich can be found here을 사용하여createreact 앱 starter를 다시 실현하는 것을 쉽게 했다.
우리는 현재 PostCs, Babel, Vue, Svelte 등을 추가하는 것을 탐색하고 있다.메뉴의 다음 단계: 다양한 프런트엔드 (및 백엔드!)Deno용 프레임워크와 Next와 유사한 SSR 지원.js와 개츠비.
우리의 목표는 가능한 한 포용하고 denopack을 사용자의 원스톱 상점으로 만드는 것이다.

denopack 찾기

💻 https://denopack.mod.land
🐙 https://github.com/denofn/denopack
🦕 https://deno.land/x/denopack
🥚 https://nest.land/package/denopack