Fork me on GitHub

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

Edit on GitHub 編集履歴を見る

JSer.info #579 - Parcel 2.3.0がリリースされました。

ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。 Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更などの変更が含まれています。

Vite 2.8.0がリリースされています。

macOS Montereyで5000 portが利用されているため、vite previewのデフォルトportが4173へと変更されています。

また、Workerとしてbundleする対象をURL使ったものへと変更して、これを推奨として扱うように変更されています。

- 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というサイトが使われることが多いですが、それぞれのパッケージのサイズは次のページで見られます。

Parcelのインストールサイズが大きくなっているのは、実行する端末とは別のアーキテクチャのネイティブバイナリも含まれているためです。
Vite(esbuild)ではoptionalDependenciesを使って、実行する端末のアーキテクチャのバイナリだけをダウンロードしようとしています。

ただし、このoptionalDependenciesでアーキテクチャ別のパッケージ(バイナリ)を配布した時の挙動は、npm/yarn/pnpmで統一されているわけではありません。

現在SWCesbuildnapi-rsを使ったnative moduleの需要が高まってきたため、この挙動を定義する方法について議論がされています。


How the Angular Compiler Works. The Angular Compiler (which we call… | by Alex Rickabaugh | Feb, 2022 | Angular Blogという記事では、AngularのコンパイラーであるAngular Compilerがどのようにコンポーネントをコンパイルしてるかについて解説されています。

どのようにコンポーネントの型チェックをしているかや、Transpileしているかについて解説されています。


Implementing DDD, CQRS and Event Sourcingという書籍は、コードにJavaScript/Node.jsを使ってDDD(ドメイン駆動開発)について解説しています。

書籍では、DDDの概念とその実装について書かれていて、特定のフレームワークを使わずに理論と実装を進めながらアーキテクチャについて解説しています。

なぜ、DDDの解説にJavaScriptを使ったかやサードパーティのライブラリを使わずに解説したのかについてなどのFAQは次の記事で解説されています。


ヘッドライン


Release 5.0.0 · google/zx

github.com/google/zx/releases/tag/5.0.0

ShellScript JavaScript node.js library

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

JavaScript bundler ReleaseNote

Parcel 2.3.0リリース。
ParcelでParcel自体のいくつかの依存関係を事前にbundleするように変更。
Node Core ModulesのpolyfillやBabel/PostCSSの依存関係をオンデマンドでインストールするように変更など


Release v8.5.0 · npm/cli

github.com/npm/cli/releases/tag/v8.5.0

npm ReleaseNote

npm 8.5.0リリース。
workspace内でのnpm installなどのコマンドがコンテキストに基づいて実行されるように変更など


Release Notes for Safari Technology Preview 140 | WebKit

webkit.org/blog/12255/release-notes-for-safari-technology-preview-140/

safari ReleaseNote

Safari Technology Preview 140リリース。
CSSの:has()擬似クラスのサポート、FetchEvent.handledのサポート、form.requestSubmit()の有効化。
script要素がサポートしているtypeを判定する
HTMLScriptElement.supports(type)の実装など


Announcing TypeScript 4.6 RC - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/

TypeScript ReleaseNote

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

vite ReleaseNote

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

JavaScript testing library ReleaseNote

Jest 28αリリース。
27でjest-circusがデフォルトとなったため、JSDOMとjasmin2のenviromentをデフォルトでは含めないように変更。
package.jsonexportsフィールドに対応など


ESLint v8.9.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2022/02/eslint-v8.9.0-released

ESLint ReleaseNote

ESLint 8.9.0リリース。
enves2016/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/

Firefox ReleaseNote

Firefox 97リリース。
CSSのcapic unitをサポート、CSS cascade layersをデフォルトで有効化。
AbortController.abort()/AbortSignal.throwIfAborted()/AbortSignal.reasonプロパティのサポートなど


Node v17.5.0 (Current) | Node.js

nodejs.org/en/blog/release/v17.5.0/

node.js ReleaseNote

Node.js 17.5.0リリース。
--experimental-fetchフラグ付きでundiciベースのFetch APIの実装を追加、Streamにiterator-helper proposalの実装など


アーティクル


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

Angular TypeScript article

Angular Compilerがどのように動いているかについての解説記事。
どのようにAngular componentのテンプレートの型チェックをして変換しているのかについて。


Web パフォーマンスとプロダクト KPI の相関を可視化する話 2022ver - ドクターズプライム Official Blog

blog.drsprime.com/entry/2022/02/10/170000

performance JavaScript Chrome article

Web VitalsのメトリクスをGoogle Analyticsに送信し、Google データポータルで可視化する方法について


サイト、サービス、ドキュメント


checkly/puppeteer-to-playwright: Puppeteer to Playwright conversion script

github.com/checkly/puppeteer-to-playwright

puppeteer Tools refactoring

Puppeter向けのスクリプトをPlaywright向けに変換するツール


ソフトウェア、ツール、ライブラリ関係


papyrs/stylo: Another kind of rich text editor

github.com/papyrs/stylo

WebComponents library JavaScript

ContentEditableベースのWYSIWYGなWeb Components


hikerpig/pintora: An extensible text-to-diagrams library that works in both browser and node.js

github.com/hikerpig/pintora

JavaScript library graphic

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

React vite plugin

importしたReactコンポーネントをreact-worker-componentsを使ってWebWorkerで動かすように変換するViteプラグイン


書籍関係


Implementing DDD, CQRS and… by Alex Lawrence [PDF/iPad/Kindle]

leanpub.com/implementing-ddd-cqrs-and-event-sourcing

JavaScript TypeScript DDD book

JavaScriptで書かれたDDD/CQRS/Event Sourcingについての書籍。
ドメイン駆動設計の理論的な話から、JavaScript/Node.jsを使った実装について。
Event Sourcingでは、ブラウザ上のUIとEventSourceを使ったRead Modelについても扱っている


この記事へ修正リクエストをする
JSer.info Slackに参加する