From 5641dd3bc3fe991cb37846b215f8912735a21c25 Mon Sep 17 00:00:00 2001 From: azu Date: Thu, 7 Sep 2023 15:47:22 +0900 Subject: [PATCH] =?UTF-8?q?2023-09-07=E3=81=AEJS:=20Node.js=20v20.6.0(.env?= =?UTF-8?q?)=E3=80=81Rspack=E3=81=AE=E3=82=A2=E3=83=BC=E3=82=AD=E3=83=86?= =?UTF-8?q?=E3=82=AF=E3=83=81=E3=83=A3=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?= =?UTF-8?q?=E3=80=81=20(#1115)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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> --- .../2023-09-07-node.js-v20.6.0.env-rspack-.md | 160 ++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 _i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md diff --git a/_i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md b/_i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md new file mode 100644 index 00000000000..d97232d3a80 --- /dev/null +++ b/_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 %} + +---- + +

ヘッドライン

+ +---- + +## 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") +

GraphQL Tools Rust nodejs TypeScript ReleaseNote

+ +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") +

nodejs ReleaseNote

+ +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") +

Github Actions nodejs ReleaseNote

+ +actions/checkout v4.0.0リリース。 +Node.js 20を利用するように、`show-progress`オプションを追加など + + +---- +

アーティクル

+ +---- + +## 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") +

JavaScript bundler article architecture

+ +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") +

WebAssembly webworker article JavaScript

+ +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") +

Firefox JavaScript performance article

+ +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") +

JavaScript bundler article

+ +Rollupを使ってCode Splitting/Tree Shakingを行うことでbundleサイズを小さくしたという話。 +一方でRollupはメモリ上に全てのコードを持つためCIのビルドが不安定になった点、細かいchunkだと圧縮効率があまりよくなかった点についてなど + + +---- +

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

+ +---- + +## Modern.js +[modernjs.dev/en](https://modernjs.dev/en "Modern.js") +

JavaScript library MicroFrontend

+ +ByteDanceのJavaScript向けのウェブアプリケーションフレームワーク。 +Reactをベースにしたクライアントサイド向けのモデルやルーティング、Rspack/ESLint/Jestなどの統合、BFFのサポート、MicroFrontendのサポートなどをしている。 + + +---- +

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

+ +---- + +## 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.") +

React editor library

+ +D&Dで編集できるビジュアルエディタのReactコンポーネントライブラリ + + +---- +

書籍関係

+ +---- + +## Nuxt 3　フロントエンド開発の教科書：書籍案内｜技術評論社 +[gihyo.jp/book/2023/978-4-297-13685-7](https://gihyo.jp/book/2023/978-4-297-13685-7 "Nuxt 3　フロントエンド開発の教科書：書籍案内｜技術評論社") +

Vue library book

+ +2023年9月22日発売 +Nuxtについての書籍 + + +----