왜 나는 Astro(새로운 정적 사이트 생성기)에 대해 매우 흥분하는가

나는 Astro를 읽을 때 발견했다CSS Trick's newsletter.크리스와 로빈이 모두 흥분했기 때문에 나는 반드시 가서 보아야 한다는 것을 안다.나도 흥분했어, 비록 나는 단지 보았지만Github Readme!
제가 오늘 왜 Astro에 흥분했는지 공유하고 싶어요.

Astro를 통해 모든 프레임 사용 가능

Astro는 우리가 어떤 프레임워크(React, Vue, Svelte와Preact 등)를 사용할 수 있다고 약속했다.이것은 나에게 있어서 흥분된다. 왜냐하면 나는 Nunjucks를 떠나 Vue에서 한동안 머무르려고 하기 때문이다.나는 단지 나의 전체 생태계를 포기하고 Vue 기반의 정적 사이트 생성기를 사용하고 싶지 않다. 왜냐하면...제가 나중에 직장을 바꾸고 싶다면요?
Astro의 유연성은 나에게 희망을 주었다. 나는 언제든지 전환할 수 있다.
상하문에서 볼 때, 이 블로그는 Eleventy로 구축되었는데, 왜냐하면 나는 어떠한 템플릿 엔진도 자유롭게 사용할 수 있기 때문이다.내가 만든 사용자 정의 정적 사이트 생성기에서 Eleventy로 전환할 수 있도록 사용하고 알고 있습니다.
그러나 Eleventy는 전단 프레임워크 통합에 관심이 없다.
나는 여기에서 몇 가지 틀을 소개할 수 있지만, 어떤 틀도 Eleventy와 함께 일하게 하기는 매우 어렵다. (왜냐하면 나는 devops 부분을 대량으로 조정해야 하기 때문이다.)
예를 들어 클라이언트 버전의 스크립트를 사용하여 Nunjucks에 Vue를 추가하여 작업을 간단하게 하려고 했지만 성공하지 못했습니다.Vue와 Nunjucks 모두 쌍괄호 삽입{{variables}}을 사용했기 때문에 충돌이 발생했다.
나는 Nunjucks {% raw %} 라벨을 추가해서 이 문제를 해결하려고 한다.코드를 작성하는 것은 매우 큰 번거로움이다. 비록 내가 이 점에서 Nunjuck에 대해 상당히 많은 해커 공격을 했지만, 나는 Vue를 정확하게 불러올 수 없다.나는 아직 필요한 개발 조작 논쟁을 진행할 준비가 되지 않았기 때문에 포기하기로 결정했다.
그래서 나는 HTML로 Vue 구성 요소, 심지어 다른 프레임의 구성 요소를 작성할 수도 있다는 것에 매우 감격했다.Astro는 나에게 신기술을 시험해 볼 수 있는 플랫폼을 제공했다.

수녀원 복잡한 워크플로우와 다툴 필요 없음

Eleventy를 사용할 때, 나는 자신의 구축 스크립트를 만들어야 한다. 왜냐하면 Eleventy는 정적 사이트 부분만 처리하기 때문이다. 나는 그것을 바꿀까 말까 망설였다.
Astro는 하나의 dev 스크립트와 하나의 build 스크립트를 사용하여 거의 모든 상자를 검사함으로써 이 과정을 간소화시켰다.

Snowpack을 사용하여 JS 컴파일

구성 없이 Sass

를 사용할 수 있습니다.

내가 본 몇몇 생성기와 달리 JS 파일에서 CSS를 작성하도록 강요하지 않는다.이것은 새로운 범례 (역할 영역 css) 를 제공합니다. 시도해도 괜찮습니다.

이 때문에 스크립트가 복잡해졌어요. 눈이 쌓이다

2020년 6월, 쌓인 눈이 나의 눈길을 끌었다.몇 시간 걸렸어요 .대박이다.

구성에 기록할 필요 없이 자동 핫 모듈 재로드(HMR)를 제공합니다.( gave it a whirl ).

그것은 우리로 하여금복잡한 패키지 파일을 시작하는 데 몇 시간이 걸리지 않는 한 동적 가져오기는 불가능하다. (이것은 커다란 버그 원본일 수도 있다.)나는 Snowpack을 매우 좋아하기 때문에 Eleventy로 그것을 설정하려고 한다.그러나 저는 Sass와 Eleventy를 사용할 때 몇 가지 문제에 부딪혔습니다. 다른 글에서 이 문제들을 상세하게 소개했습니다.HMR is superior compared to live reload

동적 ES6 모듈 가져오기 및 사용 Astro 기본 허용 Sass

Eleventy + Snowpack + PostCSS + Sass 이것은 나에게 매우 자극적이다.

또한 Autoprefixer를 기본적으로 구성합니다(내가 유일하게 의존하는 PostCSS 플러그인).
또한 Astro는 순풍을 사용하도록 구성할 수도 있습니다.나는 줄곧 그것을 나의 업무 프로세스와 융합시키고 싶었지만, 나는 지금까지 그것을 나의 업무 프로세스와 융합시킬 생각을 한 적이 없다.
Astro lets us use Sass out of the box
그래서 Astro는 저에게 CSS에 대한 모든 옵션을 제공했습니다!

개발이 쉽고 생산이 쉽다

Astro에서 모든 개발 상자가 선택되었습니다.

ES6 모듈로 JS

작성 가능

이것은 내가 원하는 프레임(Vue 포함)을 사용할 수 있도록 허락하지만, 나는 한 프레임만 사용하는 것을 제한할 필요가 없다

Sass

를 사용할 수 있습니다.

이것은 나로 하여금 새로운 CSS 개발(예를 들어Tailwind)을 할 수 있게 한다

실시간 재로드

보다 뛰어난 HMR 성능
그러나 아스트로도 생산을 위해 집을 짓는 데 입장을 밝혔다.나의 유일한 관심사는 축소와 캐시 파괴이다. 이것은 자동으로 처리된다.

현재 내가 유일하게 확실하지 않은 것은 Astro가 묶을 필요가 없는 이미지, SVG, 기타 파일을 어떻게 처리하는지 하는 것이다.나는 반드시 탐색해야 한다.
만약 그것이 잘 작동한다면, 나는 나의 Gulp 작업 흐름을 완전히 포기할 수 있을 것이다. (Gulp가 너무 복잡하기 때문에, 나는 그 위에 를 써야 한다.

부분 수합이 신기하게 들려요.

부분 수화 작용은 JavaScript가 필요한 부분에만 JavaScript를 활성화하는 것입니다.
다음과 같이 사용자 정의 어셈블리 구문을 사용하여 이 작업을 수행할 수 있습니다.

<MyComponent /> ... </MyComponent>
<MyComponent:load /> ... </MyComponent>
<MyComponent:idle /> ... </MyComponent>
<MyComponent:visible /> ... </MyComponent>

다음과 같은 네 가지 변형이 있습니다.

<MyComponent /> - HTML 버전만 제공되므로 JS가 없음

<MyComponent:load /> - 페이지를 로드할 때 구성 요소 렌더링

<MyComponent:idle /> - book를 사용하여 메인 라인이 비어 있음

즉시 MyComponent 렌더링

<MyComponent:visible /> - 요소가 뷰포트

에 들어갈 때 를 사용하여 MyComponent 렌더링
JavaScript로 이러한 기능을 구현하려면 많은 노력이 필요합니다.나는 자바스크립트 코드를 직접 작성해서 터치하지 않아도 된다. load 또는 idle.아스트로가 대신 처리해 줄 수 있어.

requestIdleCallback（） 값을 내리다

나는 Nunjucks에 독특한 hack을 가지고 있다. 나는 Markdown 사용자 정의 태그를 추가했다. 왜냐하면 나는 visible 파일에 Markdown을 직접 쓰기 때문이다.
IntersectionObserver
나는 내가 유일하게 이런 이상한 습관을 가진 미치광이인 줄 알았다.사실은 내가 아니라는 것을 증명한다!Astro가 .njk 구성 요소를 포함할 때 나의 기쁨도 이와 같다고 상상해 보세요!

이것을 더욱 재미있게 하기 위해서, 이것은 markdown에서 구성 요소를 작성할 수 있도록 합니다. 예를 들어 . 이것은 내가 Nunjucks +markdown hack으로 실현할 수 없는 것입니다.
이것은 문장에 구성 요소를 추가하는 것을 더욱 쉽게 한다. 나는 매우 기꺼이 시도한다.

역할 도메인 CSS?

또 다른 흥분할 수 있는 일은 범위가 있는 CSS다.나는 이곳의 가능성을 좋아한다. 왜냐하면 물건을 명명하는 것은 매우 어렵기 때문이다. 나는 물건을 명명하는 데 너무 많은 시간을 들이고 싶지 않다.
나는 이 일에 대해 매우 모순되기 때문에 너무 많이 이야기하고 싶지 않다.그러나 그것은 당신을 흥분시킬 수 있으므로 MDX를 보십시오 .

설계 문서 총체적 사고방식

내가 말한 대로 나는 매우 흥분했다.나는 정말 Astro를 더욱 탐색하고 싶다.나는 심지어 Astro를 사용하여 이 사이트를 재건할 수도 있다. 왜냐하면 나는 새로 설계하고 있기 때문이다.
궁금하시면 을 확인해 보시면 더 자세한 설명을 얻을 수 있을 것 같습니다.팀은 읽을 수 있고 이해할 수 있는 문서를 정리하는 데 매우 잘했다.
읽어주셔서 감사합니다.본문은 최초로 readme에 발표되었다.더 많은 글을 원하시면 더 좋은 전단 개발자가 되도록 도와주십시오. my blog