Deno 전단 개발의 동향 [2021년 가을]
반년 동안 또 여러 가지 변화가 생겼으니 다시 한 번 정리해 봅시다.
요약
Fresh,packup,Ultra 등 새로운 프레임워크/도구가 등장
Snel에 따라 Svelte 애플리케이션
npm 패키지와의 상호 운용성
Node.js 호환 모드
Deno v1.5 노드.js 호환 모드를 실현했습니다.
현재express와 koa의 포장도 어느 정도 작동하고 있다.
지금 이 노드는js 호환 모드, Vite 및 Next를 사용합니다.js 등의 대응을 이동하기 위해 시도되고 있습니다.
한편 디노 핵심 팀원Bartek Iwańczuk씨에 따르면 에스린트는 곧 움직일 예정이다.
esm.업데이트
esm.sh는 npm 포장을 보내는 목적의 CDN이다.
이거.sh에서는 매크로 패키지의 별칭 기능을 지원합니다.
https://esm.sh/[email protected]?alias=react:preact/compat
Aleph.js v0.3beta 출시
Aleph.js는 Next입니다.js의 영향을 받는 React 기반 프레임워크
이거 Aleph.js의 v0.삼베타가 발표됐습니다.
큰 변경점은 다음과 같다.
아직 베타 발표 단계입니다. 정식으로 발표할 때 사용 방법에 변화가 생길 수 있으니 주의하세요!
구축 기초를 esbuild+swc로 이동
원래 Aleph였어요.js에서 구축기초
tsc(정확히 말하면 소프트웨어 패키지로 사용한다.v0.3beta에서 구축 기초는esbuild와swc로 옮겨졌다.
이로써 건물의 고속화를 기대할 수 있다.
새 플러그인 시스템
플러그인 시스템, Aleph를 통해js의 운행 시간을 확장하고 코드 변환 과정에 개입하며 사용자 정의 파일 형식 지원을 추가할 수 있습니다.
공식적으로는 다음과 같은 세 가지 플러그인을 제공합니다.
또한, Aleph.js의 작성자미스터에 따라 Windi CSS 플러그인을 제공합니다.
// aleph.config.ts
import windicss from 'https://deno.land/x/[email protected]/plugin.ts'
import type { Config } from 'aleph/types'
export default {
plugins: [windicss]
} as Config
<link> 태그 기반 역할 영역 CSS 지원
이것은 어떻게 된 일인지 말하자면 다음과 같다.
<link> 파일을 읽는 것 *.module.css 은 유한한 범위의 CSS 스타일을 만들어 낸다.이 스타일
$은 접두사를 추가해서 인용할 수 있습니다.import React from 'react'
export default function App() {
return (
<>
<link rel="stylesheet" href="../style/app.module.css" />
<h1 className="$title">Hello world!</h1>
</>
)
}
페이지 구성 요소의 ssr 옵션 지원
페이지 구성 요소 지원
ssr 옵션.Next입니다.js에서
getStaticProps/getStaticPaths의 기능에 해당한다.import React from 'react'
import type { SSROptions } from 'aleph/types'
export const ssr: SSROptions = {
props: async router => ({ date: Date.now() }),
paths: async () => [],
}
export default function Page(props) {
return (
<p>{props.date}</p>
)
}
Oak과의 합병
Oak는 Deno의 웹 응용 프레임워크입니다.
Node.jsKoa의 영향을 받다.
이것3beta버전에서 aleph/server/mod.ts에
oakify()이라는 함수를 추가하여 Aleph 대상을 중간부품화할 수 있습니다.API 중간부품 지원
api/_middlewares.ts 또는 aleph.config.ts에서 중간부품을 정의할 수 있습니다.Logging과 응답 등 다양한 기능을 설정할 수 있습니다.
Fresh
Deno 핵심 팀원Luca Casonato이 개발한 Proeact 기반 웹 프레임워크.
기본적으로 Deno Deploy가 작동할 것이라고 생각하는 것 같습니다.(먼저 Deno CLI도 작동)
설치와 사전 구축 등 없이 서버에서 필요에 따라 구축하고 구현할 수 있다.(FrreshREADME.md에서 JIT 렌더링이라고 함)
또한
<Suspense> 등의 기능도 지원한다./** @jsx h */
import { h, Suspense, useData } from "../deps.ts";
export default function Home() {
return (
<Suspense
fallback={(
<div>
Loading...
</div>
)}
>
<SuspendedComponent />
</Suspense>
);
}
function SuspendedComponent() {
const message = useData("/api/message", fetchMessage);
return <div>{message}</div>;
}
async function fetchMessage(key: string): Promise<string> {
const res = await fetch(key);
return await res.text();
}
향후 GiitHub issue는 다음과 같은 기능 등을 제시했다.
Ultra
React 기반 Ultra 프레임워크가 공개되었습니다.
특징.
ReactDOM.renderToReadableStream 기본 SSRSWR에 실시간 홍보
방금 공개된 프레임이라 본격적으로 사용하려면 오래 걸릴 것 같다.
packup
packup은 Parcel의 영향을 받는 esbuild 기반의 구축 도구입니다.
저자는 디노 핵심 팀의 구성원선생님이다.
Parcel과 마찬가지로 설정 없이 HTML 파일을 packup 명령의 매개 변수로 지정하면 됩니다.
또한 기본적인 Sass 지원 등도 제공합니다.
Snel
Snel은 Svelte 애플리케이션의 구축 툴/프레임워크입니다.
내부는 Bundler와deno-rollup(포크판) 등을 바탕으로 실시된다.
의존 관계의 관리 및 임무 관리Trex로서 Import Maps를 사용하여 의존 모듈을 관리할 수 있다.
또 실험적인 SSG 등도 지원한다.(SSR은 향후 지원될 예정)
버전 업그레이드
vno는 Deno Vue입니다.js 응용 프로그램을 개발하는 구축 도구입니다.
지금 최신 버전 vnov1을 시험해 봤어요.주의5.1 Deno에서는 움직일 수 없을 것 같아요.🙇
최근 반년 동안 실시된 최대 변경 사항은 다음과 같다.
vno ssg build 명령v1.4.1CSS 관련 추세
현재 디노의 공식 문서twind는 사용/소개하는 경향이 있다.
예제)
또 Aleph야.js 제공 CSS Modules 및 Windi CSS 지원 등.
Velociraperv1 출시
Velociraptor는 데노의 미션 주자다.
이 Velociraper의 v1이 발매되었습니다.
이 버전은 추가되었습니다Giit 연계 지원.
scripts.yml
scripts:
format:
cmd: deno fmt
gitHook: pre-commit
vr 명령을 실행할 때 자동으로 Giit 갈고리를 생성합니다.끝말
나는 반년 전과 비교해 선택항목이 증가했다고 생각한다.
그렇긴 하지만 정작 프런트엔드 개발을 하려면 Aleph가 필요하다.js/Fressh/packup의 주류가 발매될 때까지 나는 여전히 좀 심각하다고 생각한다.
하지만, 노드.개인적으로 js 호환성 모델에 따라Vite가 이동할 수 있다면 솔직히 이걸로 하면 된다고 생각합니다.(정식 출시 시 제품을 만들어야 하며, 개발 시 Node.js 호환 모드를 사용하는 비용도 큰 문제가 없다)
관심 있는 물건이 있으면 꼭 써 보세요!
각주
원본, lint.deno.land는Dext였다.ts 및 Tailwind CSS로 작성됨최근에 다시 썼어요.↩︎
Reference
이 문제에 관하여(Deno 전단 개발의 동향 [2021년 가을]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/uki00a/articles/frontend-development-in-deno-2021-autumn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
