私はなぜAstro(新しい静的サイトジェネレータ)について超興奮しているか

わかったAstro 読書中CSS Trick's newsletter . クリスとロビンが興奮していたので、チェックしなければならなかった.そして、少年は、私は興奮してもGithub Readme !.
私はなぜ私は今日アストロに興奮して共有したい.

アストロでは、任意のフレームワークを使用する能力を与える

アストロは、我々はフレームワーク(反応、Vue、svelte、およびpreact、いくつかの名前に)を使用することを約束します.これは私のためにエキサイティングなので、私はNunjucksの外に移動しようとするとVueにしばらくの間.私は、単に私の生態系全体をあきらめたくなかったし、Vueベースの静的サイト発電機に切り替えた.私が将来スイッチを入れたいならば、どうですか?
アストロの柔軟性はいつでもスイッチできるという希望を与えてくれた.
文脈のために、このブログはEleventy それは私に任意のテンプレートエンジンを使用する自由を与えるので.使用して知っているNunjucks , これは私がカスタムスタティックサイトジェネレータから構築するに切り替えるにはインセンティブを与えた.
しかし、第三に、フロントエンドフレームワークを統合することは気にしない.
私はここでフレームワークを少し振りかけることができました、しかし、どんなフレームワークでも働くことは難しいです.
例えば、私はスクリプトのクライアントバージョンを使用してNunjucksにvueを追加しようとしたものを簡単にするが、それはうまくいかなかった.VueとNunjucksの両方が挿入するためにダブルカーリーブレースを使用して以来、彼らは紛争があった{{variables}} .
私は、Nunjucksを加えることによってそれをうまくやってみました{% raw %} タグ.それはコードへの大きい手間でした、そして、私がこの点でかなりunnjucksを悩ましたけれども、私はVueが適切にロードするのを得ることができませんでした.そして、私は、私が必要とされたdev - opsをまねることを準備していなかったので、あきらめることに決めました.
それで、VUEコンポーネントや他のフレームワークのコンポーネントをHTMLで書くことができることはとても興奮しています.アストロは私に新しい技術を試して遊び場を与える.

複雑なワークフローでwrangleする必要はありません

私はエレベーターを使用しているときに、私自身のビルドスクリプトを作らなければなりませんでした.This makes the scripts pretty complex そして、私はそれを変えるのを躊躇しています.
アストロは、Aを持つことによってプロセスを簡素化しますdev スクリプトとbuild ほとんどすべての私の箱をチェックするスクリプト.

Jackをコンパイルするには

それを設定せずにsassを使用することができます

それは私が私が見たいくつかのジェネレータとは異なり、JSファイルでCSSを書くことを強制しません.それは新しいパラダイムを提供します.

スノーパック

スノーパックは2020年6月に目を閉じた.私は数時間かかったgave it a whirl . それは驚くべきことでした.

それは自動書き込みモジュールリロード(HMR)の設定を書くことなく必要があります.( HMR is superior compared to live reload ).

それは私たちをuse ES6 modules and Dynamic imports . 動的なインポートは、複雑なビルドパッケージファイル(バグの巨大なソースになることができます)をかき立てる時間を費やさない限り、以前には不可能でした.

私は雪だるまがとても好きだったので、私はそれをconfigureで試してみました.しかし、私はSASSとEULETHENTESで働くいくつかの問題に遭遇しました.Eleventy + Snowpack + PostCSS + Sass

アストロはデフォルトでsassを許可する

Astro lets us use Sass out of the box だから私にとってエキサイティングです.

また、デフォルトでautoprefixerを設定します(これは私が依存する唯一のPostcssプラグインです).
さらに、AstroはTailwindを使用するように設定することができます.私はTrewindと遊びたいと思っていました、しかし、それが私の現在のワークフローでそれを合併しようとしているそのような面倒であったので、私はそれに決してまわりにありませんでした.

それで、アストロはCSSで遊ぶことに関して私のためにすべての箱を刻みます!

開発の容易さ、生産のための容易さ

アストロは既に開発のためのすべての箱をめちゃくちゃにした.

ES 6モジュールでjsを書くことができます

それは私が任意のフレームワークを使用することができます

それは私をsass

それは私の周りの新しいCSSの開発を楽しむことができます

ライブリロードよりマシだ

しかし、アストロも生産のための建物についての箱を刻みます.私がここで心配しているのは、自動化されたミニ化とキャッシュバスティンです.

私が今現在確信していない唯一のものは、どのようにAstroがイメージ、SVGSと束を必要としない他のファイルで扱う方法です.これを探さなければならない.
それがうまく機能するならば、私は完全に私のガップワークフローを捨てることができるかもしれませんbook を参照).

部分的な水和音驚くべき

部分的な水和はJavaScriptを必要とする部分だけのためにJavaScriptを活性化することに言及します.
これは、次のようなカスタムコンポーネントの構文を使用します.

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

つの可能なバリアントがあります.

<MyComponent /> — JSがないので、HTMLのみのバージョンをレンダリングします

<MyComponent:load /> — コンポーネントをページロードにレンダリングする

<MyComponent:idle /> — 用途requestIdleCallback() メインスレッドが無料ですぐにMyComponentをレンダリングするには

<MyComponent:visible /> — 用途IntersectionObserver 要素がビューポートに入るときにMyComponentをレンダリングするには

JavaScriptを使用してこの種の実装を実行します.私は、私がトリガーにJavaScriptコードを書く必要がないのがうれしいですload or idle or visible . 私は、それを代わりに私のためにそれを気にかけることができます.

マークダウン

私は、私が直接Markdownを書くので、私がマークダウンカスタムタグを加えるNunjucksでこのユニークなハックを持ちます.njk ファイル.

私は、私がそのような奇妙な習慣を持つ唯一の狂ったものであると思いました.私がそうでないとわかる!アストロが含むとき、私の喜びを想像してください<Markdown> 同じことをするコンポーネント!

これを甘くするには、マークダウンのようなコンポーネントを書くことができますMDX 私のNunjucks + Markdownハックで達成するのは不可能でした.
これにより、私はスーパーを試して興奮している記事にコンポーネントを追加することがはるかに容易になります.

スコープのCSS ?

もう一つ興奮する可能性があるのは、スコープのあるCSSです.私はここの可能性を好みます.なぜなら、ネーミングは難しいので、私のCSSの時間をあまりにも使いたくないのです.
私はこれについてはあまり話をしない.しかし、それはあなたを興奮させるかもしれませんstyling docs これの詳細については.

全体的思考

私が言ったように、私は興奮しています.私は、本当にさらにAstroを調査したいです.私は、私がとにかく再設計に取り組んでいる時から、このウェブサイトを再建するために、アストロを使うかもしれません.
興味があれば、チェックアウトreadme より詳細な手順については.チームは本当に良い仕事を一緒に読みやすいと理解できるドキュメントを入れている.
読書ありがとう.この記事はもともと投稿されたmy blog . サインアップするmy newsletter あなたがより良いフロントエンド開発者になるために、より多くの記事が欲しいならば.