Deno 프레임 Aleph.마이크로CMOS로 js 테스트(beta)
이전 Nextjs Instar의 Deno 프레임워크인 Aleph.제가 js를 소개하는 것을 허락해 주십시오.
이 보도는 후속 내용이다.
Aleph.요 몇 달 동안 js는 알파 버전에서 베타로 업그레이드되었다.
Next.js Instar, Next이기 때문입니다.js의 기능을 따라가면서도 혼자서 진화하여 개인적으로 매우 관심을 가지는 틀 중 하나입니다.
업그레이드 시도
지난번 보도 때의 판본은
v0.3.0-alpha.33의 알파였다.나는 우선 잡지로 승급해 보고 싶다.
최근 디노의 버전도 상승했고, 최신 버전을 설치해 보려고 합니다.
버전을 지정하여 모든 버전을 설치할 수도 있습니다.
deno upgrade
deno 1.16.4 (release, aarch64-apple-darwin)
v8 9.7.106.15
typescript 4.4.2
최신 버전을 설치합니다.
deno run -A https://deno.land/x/aleph/install.ts
Aleph.js v0.3.0-beta.19
import_map.json에서 버전 관리를 할 수 있기 때문에 다음 버전을 향상시킬 수 있습니다.기본적으로 URL + 버전 이름만 기입하면 OK.
{
"imports": {
"~/": "./",
"aleph/": "https://deno.land/x/[email protected]/",
"aleph/type": "https://deno.land/x/[email protected]/types.d.ts",
"framework": "https://deno.land/x/[email protected]/framework/core/mod.ts",
"framework/react": "https://deno.land/x/[email protected]/framework/react/mod.ts",
"react": "https://esm.sh/[email protected]",
"react-dom": "https://esm.sh/[email protected]",
"microcms": "https://esm.sh/v58/[email protected]"
},
"scopes": {}
}
aleph dev
나는 Versel에 대한 디자인이 가장 시도하기 쉽고 간단하다고 생각한다.
설정 방법 아래 보세요.
다음과 같이 설정합니다.
Build Command: deno run -A https://deno.land/x/aleph/cli.ts build
Output Directory: dist (you can override it in aleph.config.ts)
Install Command: curl -fsSL https://deno.land/x/install/install.sh | DENO_INSTALL=/usr/local sh
문제 없이 설계를 진행했다.알파에서 베타로의 이동은 순조롭게 진행될 것 같습니다.
새로운 기능 시도
아래의 보도를 참고하게 해 주세요.Aleph.js 이외에 Deno의 전단에 대해서도 참고 가치가 있다.
그중에서 신경 쓰는 기능을 시험해 보자.
esbuild+swc로 이동
빌드가
tsc에서 마이그레이션되었습니다.39s(보도 수 30건)에서 33s(보도 수 35건)로 조금 줄였다.구축 요소 자체가 적고 오차가 있지만 구축 시간 단축을 기대할 수 있다.Scoped CSS
이전 글에서 CSS의 컴파일링이 역할 영역인지 여부는 모든 구성 요소에 대한 CSS 모듈 지원과
link 탭을 읽고 Scoped의 CSS를 사용하기 시작하는 과제입니다.구체적으로 각 어셈블리에 대한 CSS modules 파일을 준비합니다.
.card {
margin: 20px;
}
.card:hover {
opacity: 0.7;
}
.cardLink {
text-decoration: none;
color: black;
}
import React from "react";
export const Card: React.VFC<Props> = (
{ url, title },
) => {
return (
<article className="$card">
<link rel="stylesheet" href="./card.module.css" />
<a
href={url}
className="$cardLink"
target="_blank"
rel="noopener noreferrer"
>
<h3>{title}</h3>
</a>
</article>
);
};
Plugin
기타(시도되지 않음) Next.js에도 실장 후 화제가 된 미들웨어 등의 기능이 추가됐다고 한다.
그 중에서 저는 개인적으로 Plugin의 기능이 더 좋다고 생각합니다.
이것은 설정 파일
aleph.config.ts에 Plugin을 써서 페이지를 읽을 때 처리하는 기능입니다.같은 구조.js 프레임의 Nuxt입니다.js를 실행 중입니다.
페이지를 불러오기 전에 처리를 실행하기 때문에 인증 등 페이지를 읽기 전에 실행해야 하는 처리가 편리합니다.
Google Tag Maneger를 읽는 프로세스 등에 대해 공식적으로 설명합니다.
import type { Plugin } from 'aleph/type'
export default <Plugin> {
name: 'google-analytics-plugin',
setup: aleph => {
const id = Deno.env.get('GTAID')
if (id && aleph.mode === 'production') {
aleph.onRender(({ html }) => {
html.scripts.push(
{
src: `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(id)}`,
async: true
},
`
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', ${JSON.stringify(id)});
`
)
})
}
}
}
Framework API
Aleph 내 리액트에도 API가 추가됐다.
dynamic import
dynamic import은 개별적으로 구성 요소를 가져와서 성능을 향상시킬 수 있습니다.
Fallback를 사용하면 구성 요소가 읽을 때의 처리를 추가할 수 있습니다.React
Suspence와 유사한 기능import { useDeno } from "framework/react";
import React from "react";
import { dynamic, Fallback } from 'framework/react';
import "../style/home.css";
import { microcmsClient } from "../lib/microcmsClient.ts";
import type { Post } from "../types/post.ts";
const Card = dynamic(() => import("../components/Card/card.tsx"))
export default function Home() {
const articles = useDeno<Post>(async () => {
return await microcmsClient.get({
endpoint: "articles",
queries: { limit: 99 },
});
});
return (
<div className="page">
<head>
<title>Ryusou Profile</title>
</head>
<section>
{articles.contents.map((content) => {
const categorys = content.category.map((category) => category.id);
const categoryId = categorys[0];
return (
<React.Fragment key={content.id}>
<Fallback to={<p>Loading....</p>}>
<Card
url={content.url}
title={content.title}
publish_article={content.publish_article}
category={categoryId}
/>
</Fallback>
</React.Fragment>
);
})}
</section>
</div>
);
}
microCMS
마이크로cms-js-sdk의 변화도 소개합니다.
현재 버전은
v2.0.0 유형 재정의
이전에는 스스로 준비
offsettotalCount 등 유형 정의가 필요했다.type Contents = {
contents: Contents[];
//以下のようなクエリを自前で用意する必要があった
totalCount: number;
limit: number;
offset: number;
};
API-KEY의 이동
새 API 키가 업데이트되었습니다.
각 키를 눌러 사용 권한 등을 설정할 수 있습니다.
사용법 등은 이전과 거의 달라지지 않았다.
다음과 같이 설정합니다.Deno는 다음과 같은 수치
.env를 얻을 수 있습니다.import { createClient } from "microcms";
export const microcmsClient = createClient({
serviceDomain: "your-subDomain",
apiKey: `${Deno.env.get("X_MICROCMS_API_KEY")}`,
});
useDeno는 훅을 통해 호출된다.이 Hooks는 서버에서 실행되기 때문에 API 키가 누설되지 않았습니다. const articles = useDeno<Post>(async () => {
return await microcmsClient.get({
endpoint: "articles",
queries: { limit: 99 },
});
}, { revalidate: true });
POST, PATCH 등 WRITE 시스템의 API는 서버 측에서 수행해야 합니다.
Next.js에 해당하는 API Routes의 기능도 Aleph입니다.js에 존재하기 때문에 API를 정의하고 사용하려고 합니다.
이 일대는 넥스트와 비슷하다.나는 js와 비슷한 느낌으로 실현할 수 있다고 생각한다.
최후
Next.일전에 v12에서 js
URL imports라는 상당히 데노의식적인 기능을 발표했다.여기서 Aleph는js는 어떻게 발전할까요?
관심 있습니다.
여러분도 연말에 꼭 새로운 기술에 도전해보는 게 어떨까요?
Reference
이 문제에 관하여(Deno 프레임 Aleph.마이크로CMOS로 js 테스트(beta)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ryusou/articles/alephjs-microcms-2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
