2023-09-07のJS: Node.js v20.6.0(.env)、Rspackのアーキテクチャデザイン、 (#1115)

* Update 659 draft

* Update 659 draft

* Update 659 draft

* Update 659 draft

* Update 659 draft

* Update 659 draft

* Update 659 draft

* Update 659 draft

* Update 659 draft

* Update _i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md

* Delete _i18n/ja/_posts/2023/2023-09-07-659draft.md

* Update _i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md

* Update _i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: azu

_i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md

@@ -0,0 +1,160 @@
+---
+title: "2023-09-07のJS: Node.js v20.6.0(.env)、Rspackのアーキテクチャデザイン、"
+author: "azu"
+layout: post
+date : 2023-09-07T06:06:26.726Z
+category: JSer
+tags:
+- nodejs
+- bundler
+- MicroFrontend
+- architecture
+- GraphQL
+
+---
+
+JSer.info #659 - Node.js v20.6.0がリリースされました
+
+- [Node v20.6.0 (Current) | Node.js](https://nodejs.org/ja/blog/release/v20.6.0)
+
+`.env`をビルトインサポート、`import.meta.resolve`をフラグなしで利用できるように、`module.register()` APIの追加などが行われています。
+Loaderの`load` hookがCommonJSをサポートし、非推奨の`require.extensions`を使わなくてもCommonJSを扱うcustom loaderを書けるようになるなどといった変更も含まれています。
+
+しかし、このv20.6.0ではこのloaderの変更によりBabelなどが動かなくなっているため、v20.6.1で修正される予定です。
+
+- [[v20.6] CJS runs repeatedly when there are circular dependencies when loaded by ESM · Issue #49497 · nodejs/node](https://github.com/nodejs/node/issues/49497)
+- [esm: fix loading of (recursive) CJS modules from ESM by aduh95 · Pull Request #49500 · nodejs/node](https://github.com/nodejs/node/pull/49500)
+
+
+---
+
+[Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev/wg · Discussion #1](https://github.com/web-infra-dev/wg/discussions/1)に、Rspackの開発の目的やwebpack/parcel/esbuild/rollupなどのbundlerのアーキテクチャについて書かれています。
+
+それぞれのbundlerには長所と短所がありますが、出発点としてはesbuildとRollupのいいところを取り込んだRustバージョン作るところから始まった点について書かれています。
+その過程でプラグインAPIやJavaScript以外の言語を扱う仕組みの必要性などから、webpackのアーキテクチャと似たものが必要なことが分かり、Rspackはwebpack互換のアーキテクチャを採用することになったことが書かれています。
+
+それぞれのbundlerのアーキテクチャ、Rspackの現在の課題、今後の方向性などについても書かれています。
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## nitrogql 1.0 release | nitrogql blog
+[nitrogql.vercel.app/blog/release-1.0](https://nitrogql.vercel.app/blog/release-1.0 "nitrogql 1.0 release | nitrogql blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">GraphQL</span> <span class="jser-tag">Tools</span> <span class="jser-tag">Rust</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">ReleaseNote</span></p>
+
+GraphQLからクライアントコードの生成とGraphQLのクエリの型チェック行うnitrogql 1.0リリース。
+
+
+----
+
+## Node v20.6.0 (Current) | Node.js
+[nodejs.org/ja/blog/release/v20.6.0](https://nodejs.org/ja/blog/release/v20.6.0 "Node v20.6.0 (Current) | Node.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v20.6.0リリース。
+`.env`をビルトインサポート、`import.meta.resolve`をフラグなしで利用できるように、`module.register()` APIの追加。
+Loaderの`load` hookがCommonJSをサポートし、非推奨の`require.extensions`を使わなくてもCommonJSを扱うcustom loaderを書けるようになるなど
+
+
+----
+
+## Release v4.0.0 · actions/checkout
+[github.com/actions/checkout/releases/tag/v4.0.0](https://github.com/actions/checkout/releases/tag/v4.0.0 "Release v4.0.0 · actions/checkout")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Github</span> <span class="jser-tag">Actions</span> <span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+actions/checkout v4.0.0リリース。
+Node.js 20を利用するように、`show-progress`オプションを追加など
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev/wg · Discussion #1
+[github.com/web-infra-dev/wg/discussions/1](https://github.com/web-infra-dev/wg/discussions/1 "Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev/wg · Discussion #1")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">bundler</span> <span class="jser-tag">article</span> <span class="jser-tag">architecture</span></p>
+
+Rspackの開発の目的やwebpack/parcel/esbuild/rollupなどのbundlerのアーキテクチャについて。
+webpackにはデバッグやパフォーマンスの問題があり、Vite/Rollupも大規模プロジェクトではパフォーマンスにビルド環境の差異の問題があり、esbuildはプラグインの柔軟性に問題がある。
+RollupはESMのみが第一級市民であり、RspackはwebpackとParcelと同じく言語に依存しないことを目的にしている。
+それぞれのbundlerのプラグインAPIの設計と複雑性、ASTの再利用とパフォーマンスの問題、Tree ShakingをASTベースで行った場合の課題について。
+また、今後のRspackが目指す方向して簡単に使えるようにすること、デバッグをしやすくすること、最適化をwebpackと同等以上にすること、リモートキャッシュなどについて触れている。
+
+
+----
+
+## Mofi - Snappy UIs With WebAssembly and Web Workers
+[mofi.loud.red/blog/wasm-and-workers](https://mofi.loud.red/blog/wasm-and-workers "Mofi - Snappy UIs With WebAssembly and Web Workers")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">webworker</span> <span class="jser-tag">article</span> <span class="jser-tag">JavaScript</span></p>
+
+WebAssemblyでの処理をWebWorkerの中で動かし、メインスレッドをブロックせずに処理を行うという話。
+CPUのコア数を超えてWorkerを増やすと問題があるため、ワーカープールを作成しWorker数を制御している。またWorkerから進捗状況をメッセージングする方法についてなど
+
+
+----
+
+## Faster Vue.js Execution in Firefox - Mozilla Hacks - the Web developer blog
+[hacks.mozilla.org/2023/09/faster-vue-js-execution-in-firefox/](https://hacks.mozilla.org/2023/09/faster-vue-js-execution-in-firefox/ "Faster Vue.js Execution in Firefox - Mozilla Hacks - the Web developer blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>
+
+Vueなどが使うProxyの最適化を行うことで、TodoMVC-Vuewのパフォーマンスが40%改善される。
+Firefox 118のリリースにこの変更が含まれる予定。
+
+
+----
+
+## How we reduced the size of our JavaScript bundles by 33% - Dropbox
+[dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent](https://dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent "How we reduced the size of our JavaScript bundles by 33% - Dropbox")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">bundler</span> <span class="jser-tag">article</span></p>
+
+Rollupを使ってCode Splitting/Tree Shakingを行うことでbundleサイズを小さくしたという話。
+一方でRollupはメモリ上に全てのコードを持つためCIのビルドが不安定になった点、細かいchunkだと圧縮効率があまりよくなかった点についてなど
+
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## Modern.js
+[modernjs.dev/en](https://modernjs.dev/en "Modern.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">MicroFrontend</span></p>
+
+ByteDanceのJavaScript向けのウェブアプリケーションフレームワーク。
+Reactをベースにしたクライアントサイド向けのモデルやルーティング、Rspack/ESLint/Jestなどの統合、BFFのサポート、MicroFrontendのサポートなどをしている。
+
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## measuredco/puck: The self-hosted drag and drop editor for React.
+[github.com/measuredco/puck](https://github.com/measuredco/puck "measuredco/puck: The self-hosted drag and drop editor for React.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">editor </span> <span class="jser-tag">library</span></p>
+
+D&Dで編集できるビジュアルエディタのReactコンポーネントライブラリ
+
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## Nuxt 3　フロントエンド開発の教科書：書籍案内｜技術評論社
+[gihyo.jp/book/2023/978-4-297-13685-7](https://gihyo.jp/book/2023/978-4-297-13685-7 "Nuxt 3　フロントエンド開発の教科書：書籍案内｜技術評論社")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">library</span> <span class="jser-tag">book</span></p>
+
+2023年9月22日発売
+Nuxtについての書籍
+
+
+----