2022-02-14のJS: Parcel 2.3.0、Vite 2.8.0、Angular Compilerがどのように動いているか、JavaScriptでDDD

_i18n/ja/_posts/2022/2022-02-14-parcel-2.3.0-vite-2.8.0-angular-compiler-javascriptddd.md

@@ -0,0 +1,273 @@
+---
+title: "2022-02-14のJS: Parcel 2.3.0、Vite 2.8.0、Angular Compilerがどのように動いているか、JavaScriptでDDD"
+author: "azu"
+layout: post
+date : 2022-02-14T13:44:43.741Z
+category: JSer
+tags:
+- TypeScript
+- node.js
+- vite
+- ShellScript
+- bundler
+
+---
+
+JSer.info #579 - Parcel 2.3.0がリリースされました。
+
+- [Release v2.3.0 · parcel-bundler/parcel](https://github.com/parcel-bundler/parcel/releases/tag/v2.3.0)
+
+ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。
+
+- [Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel](https://github.com/parcel-bundler/parcel/pull/7576)
+
+Vite 2.8.0がリリースされています。
+
+- [vite/CHANGELOG.md at main · vitejs/vite](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#280-2022-02-09)
+
+[macOS Montereyで`5000` portが利用されている](https://developer.apple.com/forums/thread/682332)ため、`vite preview`のデフォルトportが`4173`へと変更されています。
+
+また、Workerとしてbundleする対象をURL使ったものへと変更して、これを推奨として扱うように変更されています。
+
+```diff
+- import MyWorker from './worker.js?worker'
+- const worker = new MyWorker()
++ const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }) 
+```
+
+Parcel 2.3.0の変更もそうですが、Vite 2.8.0でもパッケージのインストールサイズの削減が含まれています。
+依存関係を含めたパッケージのインストールサイズの測定には、[Package Phobia](https://packagephobia.com/)というサイトが使われることが多いですが、それぞれのパッケージのサイズは次のページで見られます。
+
+- [parcel - Package Phobia](https://packagephobia.com/result?p=parcel)
+- [vite - Package Phobia](https://packagephobia.com/result?p=vite)
+
+Parcelのインストールサイズが大きくなっているのは、実行する端末とは別のアーキテクチャのネイティブバイナリも含まれているためです。
+Vite(esbuild)では`optionalDependencies`を使って、実行する端末のアーキテクチャのバイナリだけをダウンロードしようとしています。
+
+- [Different strategy for installing platform-specific binaries · Issue #789 · evanw/esbuild](https://github.com/evanw/esbuild/issues/789#issuecomment-903037112)
+
+ただし、この`optionalDependencies`でアーキテクチャ別のパッケージ(バイナリ)を配布した時の挙動は、npm/yarn/pnpmで統一されているわけではありません。
+
+現在[SWC](https://github.com/swc-project/swc)や[esbuild](https://esbuild.github.io/)、[napi-rs](https://github.com/napi-rs/napi-rs)を使ったnative moduleの需要が高まってきたため、この挙動を定義する方法について議論がされています。
+
+- [[RRFC] Add libc fields to select optionalDependencies should be installed or skipped · Issue #438 · npm/rfcs](https://github.com/npm/rfcs/issues/438)
+- [RFC: Package Distributions by darcyclarke · Pull Request #519 · npm/rfcs](https://github.com/npm/rfcs/pull/519)
+
+---
+
+[How the Angular Compiler Works. The Angular Compiler (which we call… | by Alex Rickabaugh | Feb, 2022 | Angular Blog](https://blog.angular.io/how-the-angular-compiler-works-42111f9d2549)という記事では、AngularのコンパイラーであるAngular Compilerがどのようにコンポーネントをコンパイルしてるかについて解説されています。
+
+どのようにコンポーネントの型チェックをしているかや、Transpileしているかについて解説されています。
+
+---
+
+[Implementing DDD, CQRS and Event Sourcing](https://leanpub.com/implementing-ddd-cqrs-and-event-sourcing)という書籍は、コードにJavaScript/Node.jsを使ってDDD(ドメイン駆動開発)について解説しています。
+
+書籍では、DDDの概念とその実装について書かれていて、特定のフレームワークを使わずに理論と実装を進めながらアーキテクチャについて解説しています。
+
+なぜ、DDDの解説にJavaScriptを使ったかやサードパーティのライブラリを使わずに解説したのかについてなどのFAQは次の記事で解説されています。
+
+- [Why my book uses Node.js and JavaScript - Alex Lawrence](https://www.alex-lawrence.com/posts/why-my-book-uses-nodejs-and-javascript/)
+- [Using the filesystem for illustration purposes - Alex Lawrence](https://www.alex-lawrence.com/posts/using-the-filesystem-for-illustration-purposes/)
+
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## Release 5.0.0 · google/zx
+[github.com/google/zx/releases/tag/5.0.0](https://github.com/google/zx/releases/tag/5.0.0 "Release 5.0.0 · google/zx")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ShellScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">node.js</span> <span class="jser-tag">library</span></p>
+
+zx 5.0.0リリース。
+YAMLのサポート、
+`.ts`のビルトインサポートを削除、Node.js 16未満のサポート終了など
+
+
+----
+
+## Release v2.3.0 · parcel-bundler/parcel
+[github.com/parcel-bundler/parcel/releases/tag/v2.3.0](https://github.com/parcel-bundler/parcel/releases/tag/v2.3.0 "Release v2.3.0 · parcel-bundler/parcel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">bundler</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Parcel 2.3.0リリース。
+ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。
+Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更など
+
+- [Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel](https://github.com/parcel-bundler/parcel/pull/7576 "Reduce the number of npm dependencies needed by parcel by devongovett · Pull Request #7576 · parcel-bundler/parcel")
+
+----
+
+## Release v8.5.0 · npm/cli
+[github.com/npm/cli/releases/tag/v8.5.0](https://github.com/npm/cli/releases/tag/v8.5.0 "Release v8.5.0 · npm/cli")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+npm 8.5.0リリース。
+workspace内でのnpm installなどのコマンドがコンテキストに基づいて実行されるように変更など
+
+- [RFC: npm workspaces: auto switch context based on cwd by ruyadorno · Pull Request #343 · npm/rfcs](https://github.com/npm/rfcs/pull/343 "RFC: npm workspaces: auto switch context based on cwd by ruyadorno · Pull Request #343 · npm/rfcs")
+
+----
+
+## Release Notes for Safari Technology Preview 140 | WebKit
+[webkit.org/blog/12255/release-notes-for-safari-technology-preview-140/](https://webkit.org/blog/12255/release-notes-for-safari-technology-preview-140/ "Release Notes for Safari Technology Preview 140 | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Safari Technology Preview 140リリース。
+CSSの`:has()`擬似クラスのサポート、`FetchEvent.handled`のサポート、`form.requestSubmit()`の有効化。
+script要素がサポートしているtypeを判定する
+`HTMLScriptElement.supports(type)`の実装など
+
+- [Add FetchEvent.handled (#1397) by tingshao · Pull Request #1496 · w3c/ServiceWorker](https://github.com/w3c/ServiceWorker/pull/1496 "Add FetchEvent.handled (#1397) by tingshao · Pull Request #1496 · w3c/ServiceWorker")
+- [HTMLScriptElement.supports() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/supports "HTMLScriptElement.supports() - Web APIs | MDN")
+
+----
+
+## Announcing TypeScript 4.6 RC - TypeScript
+[devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/ "Announcing TypeScript 4.6 RC - TypeScript")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">ReleaseNote</span></p>
+
+TypeScript 4.6 RCリリース。
+再帰型、インターフェースへのインデックスアクセス、関数の引数における型推論の改善。
+`--target es2022`のサポート、`checkJs`が有効時のJavaScriptの構文エラーのチェックを改善。
+`--generateTrace`で出力できるビルドのトレースデータを分析するための`@typescript/analyze-trace`パッケージの公開など
+
+
+----
+
+## vite/CHANGELOG.md at main · vitejs/vite
+[github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#280-2022-02-09](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#280-2022-02-09 "vite/CHANGELOG.md at main · vitejs/vite")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">vite</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Vite 2.8.0リリース。
+`vite preview`のデフォルトportの変更、Workerとしてbundleする対象を`URL`使ったものへと変更、設定に`worker`オプションを追加など。
+また、パッケージのファイルサイズの削減など
+
+
+----
+
+## Release v28.0.0-alpha.0 · facebook/jest
+[github.com/facebook/jest/releases/tag/v28.0.0-alpha.0](https://github.com/facebook/jest/releases/tag/v28.0.0-alpha.0 "Release v28.0.0-alpha.0 · facebook/jest")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">testing</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Jest 28αリリース。
+27で`jest-circus`がデフォルトとなったため、JSDOMとjasmin2のenviromentをデフォルトでは含めないように変更。
+`package.json`の`exports`フィールドに対応など
+
+
+----
+
+## ESLint v8.9.0 released - ESLint - Pluggable JavaScript linter
+[eslint.org/blog/2022/02/eslint-v8.9.0-released](https://eslint.org/blog/2022/02/eslint-v8.9.0-released "ESLint v8.9.0 released - ESLint - Pluggable JavaScript linter")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">ReleaseNote</span></p>
+
+ESLint 8.9.0リリース。
+`env`に`es2016`/`es2018`/`es2019`/`es2022`オプションの追加、ES3のコードでは`"use strict"`を無視するように変更など
+
+
+----
+
+## Firefox 97.0, See All New Features, Updates and Fixes
+[www.mozilla.org/en-US/firefox/97.0/releasenotes/](https://www.mozilla.org/en-US/firefox/97.0/releasenotes/ "Firefox 97.0, See All New Features, Updates and Fixes")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Firefox 97リリース。
+CSSの`cap`と`ic` unitをサポート、`@scroll-timeline`と`animation-timeline`のサポート、CSS cascade layersをデフォルトで有効化。
+`AbortController.abort()`/`AbortSignal.throwIfAborted()`/`AbortSignal.reason`プロパティのサポートなど
+
+- [Firefox 97 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/97 "Firefox 97 for developers - Mozilla | MDN")
+
+----
+
+## Node v17.5.0 (Current) | Node.js
+[nodejs.org/en/blog/release/v17.5.0/](https://nodejs.org/en/blog/release/v17.5.0/ "Node v17.5.0 (Current) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js 17.5.0リリース。
+`--experimental-fetch`フラグ付きでundiciベースのFetch APIの実装を追加、Streamにiterator-helper proposalの実装など
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## How the Angular Compiler Works. The Angular Compiler (which we call… | by Alex Rickabaugh | Feb, 2022 | Angular Blog
+[blog.angular.io/how-the-angular-compiler-works-42111f9d2549](https://blog.angular.io/how-the-angular-compiler-works-42111f9d2549 "How the Angular Compiler Works. The Angular Compiler (which we call… | by Alex Rickabaugh | Feb, 2022 | Angular Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Angular</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p>
+
+Angular Compilerがどのように動いているかについての解説記事。
+どのようにAngular componentのテンプレートの型チェックをして変換しているのかについて。
+
+
+----
+
+## Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog
+[blog.drsprime.com/entry/2022/02/10/170000](https://blog.drsprime.com/entry/2022/02/10/170000 "Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">performance</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">Chrome</span> <span class="jser-tag">article</span></p>
+
+Web VitalsのメトリクスをGoogle Analyticsに送信し、Google データポータルで可視化する方法について
+
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## checkly/puppeteer-to-playwright: Puppeteer to Playwright conversion script
+[github.com/checkly/puppeteer-to-playwright](https://github.com/checkly/puppeteer-to-playwright "checkly/puppeteer-to-playwright: Puppeteer to Playwright conversion script")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">puppeteer</span> <span class="jser-tag">Tools</span> <span class="jser-tag">refactoring</span></p>
+
+Puppeter向けのスクリプトをPlaywright向けに変換するツール
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## papyrs/stylo: Another kind of rich text editor
+[github.com/papyrs/stylo](https://github.com/papyrs/stylo "papyrs/stylo: Another kind of rich text editor")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebComponents</span> <span class="jser-tag">library</span> <span class="jser-tag">JavaScript</span></p>
+
+ContentEditableベースのWYSIWYGなWeb Components
+
+
+----
+
+## hikerpig/pintora: An extensible text-to-diagrams library that works in both browser and node.js
+[github.com/hikerpig/pintora](https://github.com/hikerpig/pintora "hikerpig/pintora: An extensible text-to-diagrams library that works in both browser and node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">graphic</span></p>
+
+Mermaid.jsやPlantUMLのようにテキストでダイアグラムを書くライブラリ。
+Sequence Diagram、Component Diagram、Activity Diagram、Mind Mapなどの形式に対応していて、プラグインでカスタマイズできる
+
+
+----
+
+## Aslemammad/react-worker-components-plugin: ⚡ Something like react server components, but web workers instead of a server
+[github.com/Aslemammad/react-worker-components-plugin](https://github.com/Aslemammad/react-worker-components-plugin "Aslemammad/react-worker-components-plugin: ⚡ Something like react server components, but web workers instead of a server")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">vite</span> <span class="jser-tag">plugin</span></p>
+
+importしたReactコンポーネントをreact-worker-componentsを使ってWebWorkerで動かすように変換するViteプラグイン
+
+- [dai-shi/react-worker-components: React Worker Components simplify using Web Workers](https://github.com/dai-shi/react-worker-components "dai-shi/react-worker-components: React Worker Components simplify using Web Workers")
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## Implementing DDD, CQRS and… by Alex Lawrence \[PDF/iPad/Kindle\]
+[leanpub.com/implementing-ddd-cqrs-and-event-sourcing](https://leanpub.com/implementing-ddd-cqrs-and-event-sourcing "Implementing DDD, CQRS and… by Alex Lawrence \[PDF/iPad/Kindle\]")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">DDD</span> <span class="jser-tag">book</span></p>
+
+JavaScriptで書かれたDDD/CQRS/Event Sourcingについての書籍。
+ドメイン駆動設計の理論的な話から、JavaScript/Node.jsを使った実装について。
+Event Sourcingでは、ブラウザ上のUIと`EventSource`を使ったRead Modelについても扱っている
+
+- [Why my book uses Node.js and JavaScript - Alex Lawrence](https://www.alex-lawrence.com/posts/why-my-book-uses-nodejs-and-javascript/ "Why my book uses Node.js and JavaScript - Alex Lawrence")
+
+----