アップグレード経験

12632 ワード
ssg astro javascript テキストリンク
日がやっと着いた!Astro has released 0.21 publicly , そして、それは大きな変化です.すべての最も重要な、彼らはSnowpackVite , これは、アストロエコシステムに新しい機能とプラグインの全体のスルーを開きます.他にもいくつかの変更があり、これはアナウンスに記載されているand migration guide . あなたのサイトをアップグレードするために探しているなら、私は非常にあなたがそれらのリソースを最初にチェックアウトすることをお勧め!
アップグレード・プロセスを通してあなたを案内するのではなく(彼らの移行Docはそれにかなり良いです)、私は私の経験を文書化したいです.私は道に沿っていくつかの面白い衝突に遭遇しました、そして、私はそれが私の経験を彼らのアップグレードを行うことに興味がある他の誰とでも共有することに有益であると思います.
私のサイトの文脈のために、私はほとんど.astro 2つの小さなVueコンポーネントでファイル拡張子.私が出会った問題のほとんどは、Astroコンポーネントと変更されたAPIに関連していました.私は、ファイル輸入、反応、またはTSX/JSXに関連する何もする必要はありませんでした.
また、興味があれば.here's the PR 私はアップグレードを実行した私の変更を追跡するために使用.
それの方法で、それはアストロ0.21にupggradeしましょう!

依存性の更新
私が最初にしたことはpackage.json 新しい依存関係を使用するには.これは簡単な変更を使用してnpm outdated そして、未使用のパッケージを手動で更新/削除する.AstroとVue Rendererを最新版に更新する以外に、私は削除しました@snowpack/plugin-dotenv アストロは現在サポート.env デフォルトでファイル!
また、Astroはもはやビルドツールのためのスノーパックを使用していないので、私は同様に私の環境変数を更新しなければならなかったSNOWPACK 変数名から.
しかし、私が走ったときnpm run dev , 私はエラーを提示された!
Error: Build failed with 12 errors:
node_modules/fetch-blob/from.js:1:59: error: Could not resolve "node:fs" (mark it as external to exclude it from the bundle)
node_modules/fetch-blob/from.js:2:25: error: Could not resolve "node:path" (mark it as external to exclude it from the bundle)
node_modules/fetch-blob/from.js:3:31: error: Could not resolve "node:worker_threads" (mark it as external to exclude it from the bundle)
node_modules/node-fetch/src/body.js:8:34: error: Could not resolve "node:stream" (mark it as external to exclude it from the bundle)
node_modules/node-fetch/src/body.js:9:31: error: Could not resolve "node:util" (mark it as external to exclude it from the bundle)
私が輸入していたので、このエラーは投げられましたnode-fetch カップルJSファイルで.アストロ0.21で fetch is now globally available , の内外.astro コンポーネント.インポートの削除node-fetch その問題を解決した.
しかし、私は異なったエラーで示されました!
panic: Export statements must be placed at the top of .astro files!
panic: Export statements must be placed at the top of .astro files!
2:14:52 PM [vite] Error when evaluating SSR module /src/layouts/BlogPost.astro:
    at /src/layouts/BaseLayout.astro
2:14:52 PM [vite] Error when evaluating SSR module /src/pages/blog/a-song-unsung.md:
    at /src/layouts/BaseLayout.astro
2:14:52 PM [vite] Error when evaluating SSR module /src/pages/index.astro:
    at /src/layouts/BaseLayout.astro
02:14 PM [astro] 500 /                                        1753ms
アストロは現在、ファイルの上部にすべてのエクスポート(小道具インターフェイスなど)が必要です.これは単純な変更であったが、移行ガイドで文書化されたものではない.エクスポートされた小道具のインターフェイスを削除または移動することで、dev環境がロードできました.しかし、何か欠けていた.
内容!

行方不明者
時localhost:3000 私は完全に空白の画面が表示されました.私は、頭のタグが適切に充填されたが、体ではないことに気づいた.クロムdevtoolsでは、何も<body> タグ.
<!DOCTYPE html>
<html>
  <head>
    <!-- meta tags, script, etc -->
  </head>
  <body></body>
</html>
何が起こっているのですか.正直なところ、まだ確かではない.更新したらindex.astro 呼び出す前にいくつかの余分なテキストを持つファイル<BaseLayout> , テキストがロードされ、メタタグが<body> タグ.解決策はBaseHead コンポーネントのみ利用されましたBaseLayout ), 実際のHTMLタグをレイアウトコンポーネントに配置します.
しかし、私はこの解決に来る前に少しの迂回を取りました、そして、私のtailwind構成がもはや働かないことに気付きました.これはありがたいことに簡単な修正であったが、ドキュメントは2ページにわたって広がっているようだった.
まず、Postcssとautoprefixerを手動でインストールしました.そして、更新しましたpostcss.config.cjs Postcss Nested , Tailwind , AutoPrefixerを含むファイル(以前はpostcssを入れ子にする必要がありました).これは私のサイトのために、私は私が不足しているボディの問題を修正した後に検証することができたための風を楽しませた.
しかし、何かが全く見えなかった

行方不明
サイトがロードされていて(適切に初期化された仕上がり)、カスタムスタイルの数が不足していた.

私にとっては、ダークモードは完全に機能しませんでした.いくつかの要素はスタイルを切り替えるでしょうが、大多数(ルート背景とどんなテキストも含む)は変化しませんでした.Chrome DevToolsに相談すると、私のスタイル(Postcssを使っている)はDOMに入る前に適切に処理されていなかった.例えば、これはAstroがサイトに入れたものです(私によって追加されたフォーマット).
.blog-item.astro-EDZCIZOF {@apply shadow-md rounded-lg relative overflow-hidden flex justify-center;animation:0.3s ease-out 0s 1 shift;.}.blog-image-wrapper.astro-EDZCIZOF{height:300px;width:100%;overflow:hidden;}@keyframes shift{0%{transform:translateY(30%);opacity:0;}100%{transform:translateY(0);opacity:1;}}
明らかに、アストロはここで適切にPostcssを適用していませんでした.テイウインド@apply ルールは無視され、コンパイルされたCSSに直接送られました.ここで解決策は、これらのグローバルスタイルをglobal.css ファイルの代わりにインラインBaseLayout.astro コンポーネント.それは良いです、それはとにかくとにかくこの方法より良いです.
サイトの周りを移動すると、他のスタイルも失敗していることに気づいた


解決策は、以前と同様に、インラインCSSを外部ファイルに取り出すことでした.私はこの解決策の大ファンではありませんでした.スタイルは彼らが想定されていたように見え、人生は良かった.
サイトを除いてはまだビルドされません.

悪いCSS!
すべてがそうであるように見えるので、私はNetlifyに配備しようとしました.しかし、まだエラーが発生しました

不明な言葉?それはSEを作りません.ああ.ああ.セミコロンの後に余分な期間があります.それは変です、私はそのような何も書きませんでした.それに加えて、about.css , これは私が作成したファイルではありません.何が起こっているのか
少しの検索をして、私は私が前のクリーンアップで逃した別のスタイルブロックを見つけました、しかし、これはコンポーネントにスコープをつけられました.私はコンポーネントの範囲内のスコープのCSSの全体のポイント(VUEのファンとして、私はこのアプローチの支持者である)を考慮して、それはむしろアストロコンポーネントからそれを抽出しない.
私はあなたがAstroを使っているならば、私は非常に推薦します、そして、問題を報告しました.

我々はすぐに問題の原因は、私はスタイルブロックの言語を設定していたことを発見したpostcss , これはAstroコンパイラで問題を引き起こしていました.スイッチングpcss 問題を解決し、Postccssを正しく使用するために、残りのスコープのCSSブロックを見つけて更新することができました.(興味があったら、here's the link をクリックします.私も、彼らの構成要素にスタイルの数を戻しましたglobal.css .

成功?
それで、私は現在サイトの最新バージョンを配備することができました.私のテストは通過していました、ビジュアルは正しく見えました、そして、ビルドはエラーなしでローカルに走りました.展開のためにNetlifyにそれを送りましょう!
7:58:22 AM: > astro build
7:58:23 AM: 03:58 PM [config] Set "buildOptions.site" to generate correct canonical URLs and sitemap
7:58:26 AM: warn - You have enabled the JIT engine which is currently in preview.
7:58:26 AM: warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
7:58:31 AM: [object Object]
7:58:31 AM: Error: [object Object]
7:58:31 AM: npm ERR! code ELIFECYCLE
7:58:31 AM: npm ERR! errno 1
7:58:31 AM: npm ERR! [email protected] generate: `astro build`
7:58:31 AM: npm ERR! Exit status 1
なんて素敵な間違いだろう.ありがたいことに、これは私の欠点であった.私はNetLifyの上で私の環境変数を更新するのを忘れていました.簡単に修正し、行くのは良かった.ビルドは上がり、展開は成功しました.私のjsは積載されていなかった.

Having some trouble with and 0.21. For some reason, I'm unable to fetch my JS files for partial hydration because they're blocked by CORS. It looks like files are being stored on Cloudfront instead of my domain.

Anyone run into something like this before?

— Lindsay Wardell 🏳️‍⚧️ ( )

これはもう少し複雑であったが、簡単な解決策があった.ビルドはローカルに予想通りに動作していました.JSファイルが存在しているのを見ることができました(そして明らかにCloudfrontでNetlifyでキャッシュされています).私はビルドプラグインを有効にしていませんでした、そして、(ほとんど混乱します)AJO 0.20の上で予想通りに働いたすべてのJSを修正しました.
いくつかの笑いをした後、私はNetlify support thread .

Yup - that is saying that cloudfront doesn’t have your custom header which is true! I think you’re using asset optimization on the site, and that will clash with custom headers - we can’t set them on those resources. So, you could turn off that feature in your build and deploy settings and that would remove the problem.


どのようなカスタムヘッダがAstro/Netlify/どこで設定されているかはわかりませんが、0.20と0.21の間にカスタムヘッダーが適用されていました.これはドメイン間でのJSフェッチを壊しました.私は私の設定に入って、NetLifyによって提供されたJS minificationと束を無効にしました.最後に、実際にすべて、本当に働いた.

結論
アップグレードが行くにつれて、これは正直にかなり簡単だった.私は金曜日の夜遅くそれに取り組んで、土曜日の朝を終えることができました.いいえ大きな書き換えは、いくつかの更新された構文といくつかのCSSの周りに移動する必要がありました.そして、すべてのベストは、アストロは現在、VITEによって供給されているので、私は私がより多くの私のサイト(雪パック生態系に深く見えるよりも)に精通しているプラグインを試し始めることができます.
あなた自身のサイトを移行するために探しているなら、私は強くチェックアウトMigration Guide , and the blog post スノーパックからアストロへの移行を行うためのアストロチームの推論を説明する.
あなたがまだAstroを試みなかったならば、.I wrote about my experience Nuxt静的サイトからAstroに移行し、パフォーマンスの利点はすぐに移行によって見た.あなたが静的サイト生成に興味があるならば、私は確実にAstroをチェックすることを勧めます.
次回まで!
CordovaのAndroidシステムでのファイル操作のポイント
portconfig