Fork me on GitHub

2021-01-26のJS: webpack 5.17.0(lazyCompilation)、Deno 1.7、Open Web Docs

Edit on GitHub 編集履歴を見る

JSer.info #524 - webpack 5.17.0がリリースされました。

webpack 5.17.0では experiments.lazyCompilation オプションが試験的に追加されています。
experiments.lazyCompilationは、webpack dev serverなどのローカルサーバと組み合わせて動作します。
experiments.lazyCompilationは、Dynamic Importしているモジュール(chunk)を起動時にはビルドせずに、そのモジュールがロードされた際にビルドする遅延コンパイルの仕組みです。

仕組み的には、初回のビルド時にDynamic Importしているモジュールは、lazyCompilationをするためのProxy的なモジュールとしてビルドされます。このモジュールはlazyCompilationのclientとなり読み込まれた際に、lazyCompilationのbackend側にServer Sent Eventを使って読み込まれたことを通知します。
lazyCompilationのbackendclientからの通知を受け取ったら、実際のモジュールをビルドして返す仕組みになっています。
このclientbackendもそれぞれexperiments.lazyCompilationオプションで独自のものが定義できるようになっていて、デフォルトではwebpack dev serverで動くコードになっています。

初回の起動時のコンパイル範囲を抑えることで、開発サーバの立ち上げ速度を改善することが主な目的となっています。


Deno 1.7がリリースされました。

Deno 1.6でサポートされたdeno compileのサイズ改善とクロスコンパイルの対応が行われています。
Data URLのimportをサポート、deno fmtのMarkdownサポートが追加されています。
また、Steram APIをWHATWGに準拠するように修正、Web WorkerにpermissionsオプションでDeno独自のパーミッションを指定できるようになっています。
その他には、--locationフラグを使って相対URLのFetchに対応、FetchのリクエストbodyにStreamを指定可能になるといった変更も含まれています。

破壊的な変更としてunstableなDeno APIsの変更やUnstable APIとしてDeno.resolveDnsのサポートが含まれています。


Open Web DocsというMDNなどのウェブプラットフォームのドキュメントを改善していくためのプロジェクトが立ち上げられています。

2020年8月のMozillaにおけるレイオフの影響でMDNのWriterなどのチームが縮小されました。

Open Web Docsでは、MDNなどのウェブプラットフォームに関するドキュメントへのコントリビューションをしていく組織です。Open Web DocsのメンバーにはMozilla、Google、Microsoft、W3Cなどがいます。

当面の目標は、MDNの新しいアーキテクチャへの移行のサポート、ブラウザの互換データの改善、JavaScriptのドキュメントの改善などを行っていくようです。


ヘッドライン


IPFS Support in Brave

brave.com/ipfs-support/

browser news IPFS p2p

BraveがP2PプロトコルであるIPFS(InterPlanetary File System)をサポート。
Brave 1.19.x以降では、ゲートウェイとローカルノードを使ったIPFSURIの解決ができるようになる。


Release v5.17.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v5.17.0

webpack ReleaseNote

webpack 5.17.0リリース。
実験的な機能として、Dynamic Importしているモジュールをアクセスした時にビルドできるexperiments.lazyCompilationオプションを追加。
起動時にすべてをビルドしないことで、利用してないエントリポイントがビルドパフォーマンスに影響を与えないようにする目的。


The Node.js Runtime  |  Cloud Functions Documentation  |  Google Cloud

cloud.google.com/functions/docs/concepts/nodejs-runtime#nodejs_14_public_preview

GCP node.js news

Cloud FunctionがNode.js 14をpublic previewとしてサポート


Deno 1.7 Release Notes

deno.land/posts/v1.7

deno ReleaseNote

Deno 1.7リリース。
deno compileのサイズ改善とクロスコンパイルの対応、Data URLのimportをサポート、deno fmtのMarkdownサポート。
Steram APIをWHATWGに準拠するように修正、Web WorkerにpermissionsでDeno独自のパーミッションを指定可能に。
--locationフラグを使って相対URLのFetchに対応、FetchのリクエストbodyにStreamを指定可能になるなど。
破壊的な変更としてDeno APIsの変更やUnstable APIとしてDeno.resolveDnsのサポートが含まれる。


Open Web Docs - Open Collective

opencollective.com/open-web-docs/updates/introducing-open-web-docs

document news mdn

MDNのようなウェブプラットフォームのドキュメントに対して長期的に取り組んでいくためのプロジェクト。MozillaなどのブラウザベンダーやW3Cなどがメンバーにいる。
当面はMDNへのコントリビューションをしていく。


アーティクル


How to Solve the Infinite Loop of React.useEffect()

dmitripavlutin.com/react-useeffect-infinite-loop/

React JavaScript article

ReactのuseEffectの中でStateを更新した場合になぜ無限ループが起きるのか、またその修正方法について


Migrating Puppeteer to TypeScript  |  Web  |  Google Developers

developers.google.com/web/updates/2021/01/puppeteer-typescript

JavaScript TypeScript article

PuppeteerのコードベースをJavaScriptからTypeScriptの移行するどのように取り組んでいるかについて


The Secret Parameter, LFR, and Potential RCE in NodeJS Apps

blog.shoebpatel.com/2021/01/23/The-Secret-Parameter-LFR-and-Potential-RCE-in-NodeJS-Apps/

JavaScript node.js security express article

Expressでhbs(handlebars)を使っている際にres.renderの第2引数にユーザー入力をそのまま渡してしまうと、layoutプロパティによって任意のファイルを読める問題について。
また、Handlerbars 4.0.14未満にあった脆弱性と組み合わせることでRCEにつながるという話


スライド、動画関係


ブラウザの作り方 - Speaker Deck

speakerdeck.com/keiya01/burauzafalsezuo-rifang

browser Rust slide

Let's build a browser engine!を参考にブラウザのレンダリングエンジンを作りながら、どのようにHTMLやCSSのパースからレンダリングしているのかという話


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


JSitor - JavaScript, HTML, CSS, online editor

jsitor.com/

JavaScript HTML CSS editor webservice

jsfiddle的なHTML/CSS/JSを書いて公開できるPlaygroundサービス。
Monaco Editorを使ったエディタ、整形機能を持っている


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


forgojs/forgo: An ultra-light UI runtime

github.com/forgojs/forgo

React jsx library JavaScript

JSXで書けるUIライブラリ。
Reactとは違いコンポーネント内でもDOM APIを扱う形になっていて、再レンダリングも手動で行う。
ファイルサイズの小ささやフレームワークの抽象を少なくして、DOM APIを知っていれば扱えるようにするのが目的。


Nodepack

nodepackjs.com/

node.js library Tools

Node.jsウェブフレームワーク。
プロジェクトを管理するためのCLIとそれを拡張するプラグインシステムをもつ


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