-
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
1 parent
0c2944f
commit 5641dd3
Showing
1 changed file
with
160 additions
and
0 deletions.
There are no files selected for viewing
160 changes: 160 additions & 0 deletions
160
_i18n/ja/_posts/2023/2023-09-07-node.js-v20.6.0.env-rspack-.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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についての書籍 | ||
|
|
||
|
|
||
| ---- |