Fork me on GitHub

2020-05-31のJS: Babel 7.10.0(Babel Polyfills)、Snowpack 2.0、Chrome 84β

Edit on GitHub 編集履歴を見る

JSer.info #490 - Babel 7.10.0がリリースされたました。

ES2015の\u{...}形式のUnicode escapeをES5に変換する@babel/plugin-transform-unicode-escapesが追加されています。
このプラグインは@babel/preset-envにも追加されています。
また、現在Stage 4でES2020に入る予定のimport.metaのパースがデフォルトでサポートされました。

その他には、現在Stage 1のProposalであるPrivate Fieldに対するin演算子のサポートを追加する@babel/plugin-proposal-private-property-in-object、ES Module AttributesのProposalのパースを行う@babel/plugin-syntax-class-propertiesの追加、@babel/preset-react/*#__PURE__#/アノテーションをつけるプラグインが追加されています。

/*#__PURE__#/アノテーションをつけることでUglifyJSによる圧縮によって余計なコードを削除できます。詳しくは次の記事を参照するとよさそうです。

今までの@babel/preset-envではcore-jsのみをサポートしていました。
元々@babel/polyfillというパッケージでES2015サポートを目的としたpolyfillも提供していましたが、これも実質的にcore-jsをラップしたパッケージでした。
@babel/polyfill自体はBabel 7.4で廃止されています。
これは、@babel/preset-envとcore-js 3によって、サポートブラウザの定義(useBuiltIns: "entry")やコード中で利用している機能(useBuiltIns: usage)に基づいて必要な機能のみをpolyfillできるようになったためです。(@babel/polyfillはES2015のサポートに必要なものが全て入った固定のpolyfillで、現在のブラウザに対しては余計なpolyfillが多く含まれてしまうため。)

Babel 7.10.0リリースの記事では、core-js以外のpolyfillライブラリも選択してinjectできる仕組みを試験的に実装している件について書かれています。
これは、@babel/preset-envなどでpolyfillライブラリとしてcore-js以外にもes-shimsなどを選択できるようにする仕組みです。
詳しくはリポジトリやRFCを読むとよさそうです。


ES Modulesをネイティブサポートした環境での開発を目的としたビルドツールであるSnowpack 2.0がリリースされました。

Snowpackは、コードをbundleするのではなく、npmでインストールしたいライブラリも含めそれぞれのコードをES Modulesとして読み込み可能な状態にビルドします。
これによって、開発時はファイル単位でビルドを行ってネイティブのES Modulesとしてファイルを読み込める状態で開発できます。
bundleせずにファイルごとにビルドするため、ファイル変更時のビルド時間が小さくすむようになっています。

また、Snowpack 2.0ではデフォルトではesbuildを使ってjs,jsx,ts,tsxのビルドを行っています。
production buildではwebpackやparcelを使ってbundleしたビルドを行えるようになっています。

ビルドの仕組みなどもカスタマイズできるようになっていて、snowpack.config.jsonにBuild ScriptsやPluginを書くことで変更できるようになっています。


Chrome 84のベータ版がリリースされました。

Web OTP API(SMS Receiver APIと呼ばれていたAPI)のサポート、Web Animationsの改善が含まれています。

Origin Trialとして非同期のCookie Store APIIdle Detection APIOrigin isolation、WebAssembly SIMDが追加されています。
その他にMixed ContentのAutoupgrade、CSSのrevertキーワードのサポート、JSでは Private Methods and AccessorsWeakrefのサポートなども行われています。

それぞれに解説記事なども出ているので、興味があるものを読んでみるとよさそうです。

また、7月14日にリリース予定のChrome 84安定版に合わせて、一時的に停止していたSameSite Cookieのロールアウトが再開される予定となっています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking · Babel

babeljs.io/blog/2020/05/25/7.10.0

babel ReleaseNote

Babel 7.10.0リリース。
ES2015のUnicode escapeをES5に変換する@babel/plugin-transform-unicode-escapesの追加。
import.metaのパースをデフォルトでサポート。
ES Module AttributesのProposalのパースを行うbabel-plugin-syntax-module-attributesの追加、@babel/preset-react/*#__PURE__#/アノテーションをつけるプラグインの追加。
core-js以外も選べるpolyfillエンジンの追加など


Node v12.17.0 (LTS) | Node.js

nodejs.org/en/blog/release/v12.17.0/

node.js ReleaseNote

Node v12.17.0リリース。
--experimental-modulesなしにES Modulesを利用可能に、Experimental APIとしてAsyncLocalStorageの追加、REPLの改善。
Diagnostic ReportがStableに、server.headersTimeoutのデフォルト値の変更など


Introducing Snowpack 2.0

www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/

bundler Tools JavaScript ReleaseNote

Snowpack 2.0リリース。
ES Modulesをネイティブに使った開発を行うためのビルドシステム。
開発時はファイルごとにビルドを行い、production buildではwebpackやparcelを使ってbundleしたビルドを行う。
Build ScriptsやPluginでのカスタマイズを行えるようになっている。
デフォルトではesbuildを使ってjs,jsx,ts,tsxのビルドを行う


Release Notes for Safari Technology Preview 107 | WebKit

webkit.org/blog/10585/release-notes-for-safari-technology-preview-107/

safari ReleaseNote

Safari Technology Preview 107リリース。
Web Inspectorの改善、Intl.Locale/BigInt.asIntN/BigInt.asUintNの実装。
HTTPリファラのサイズを4KBに制限するように変更など


Release v5.0.2 · pnpm/pnpm

github.com/pnpm/pnpm/releases/tag/v5.0.2

npm ReleaseNote

npmパッケージ管理ツールのpnpm 5.0リリース。
パフォーマンスの改善、ハッシュ + hardlinkベースのキャッシュの仕組みへの変更に伴う一部設定の削除など。
また、pnpm publish時にGitのStageがcleanかを判定するgit-checksがデフォルトで有効化など


Chromium Blog: Chrome 84 Beta: Web OTP, Web Animations, New Origin Trials and More

blog.chromium.org/2020/05/chrome-84-beta-web-otp-web-animations.html

Chrome ReleaseNote V8

Chrome 84 Betaリリース。
Web OTP API、Web Animationsの改善。
Origin Trialとして非同期のCookie Stoer API、Idle Detection API、 Origin isolation、WebAssembly SIMDの追加。
Mixed ContentのAutoupgrade、CSSのrevertキーワードのサポート、JSでは Private Methods and Accessors、WeakRefのサポートなど


blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html

Chrome security news

7月14日にリリース予定のChrome 84安定版に合わせて、一時的に停止していたSameSite Cookieのロールアウトが再開される予定


Pug 3.0.0 - RollingVersions - Medium

medium.com/rollingversions/pug-3-0-0-2897d6dec294

JavaScript template library ReleaseNote

テンプレートエンジンのPug 3.0.0リリース。
Bufferに対するフィルターをサポート、each ... of ...構文のサポートなど


アーティクル


Tools to measure Core Web Vitals

web.dev/vitals-tools/

performance Tools browser article

Core Web Vitalsのメトリクスを計測するツールの紹介記事


Detect inactive users with the Idle Detection API

web.dev/idle-detection/

Chrome WebPlatformAPI article proposal

ユーザー/スクリーンがアクティブではない状態かを判定するAPI。
Chrome 84でOrigin Trialとして提供されている。
userとscreenのidle状態、変更検知ができる。利用にはnotificationsのパーミッションを取得する必要がある。


The Svelte Compiler Handbook | Tan Li Hau

lihautan.com/the-svelte-compiler-handbook/

JavaScript article

Svelteのコンパイルプロセスを解説している記事。


The process: Making Vue 3 – Increment: Frontend

increment.com/frontend/making-vue-3/

Vue article

Vue 3の作成プロセスについての記事。
Vue 3でなぜ書き直しをしているのかやアーキテクチャの変更について


スライド、動画関係


Jamstack_conf_virtual_2020 - YouTube

www.youtube.com/playlist?list=PL58Wk5g77lF8jzqp_1cViDf-WilJsAvqT

JavaScript Conference video

Jamstack Conf 2020の動画一覧


11 years of Node: Let’s have an honest conversation - Anna Henningsen (LNUG May 2020) - YouTube

www.youtube.com/watch?v=TthueRgvVQ4

node.js video slide deno

Node.js開発の現状について話。
Node.jsはsmall coreと言われていたが、今は40以上のモジュールが入った巨大なリポジトリでもある。
Node.jsのコアには非推奨となったモジュール/追加されたモジュール/レガシーなコードが混ざっている。
そのため開発はバランスを取るのが難しく、これはESMサポートにおいても起きている。
一方で、CollaboratorsやN-APIなどうまくいっている部分もある。
また、Denoとエコシステムについてなど


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


Understanding client-side JavaScript frameworks - Learn web development | MDN

developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks

document JavaScript library tutorial

MDNのJavaScriptフレームワークのチュートリアル。
React、Ember、Vueについてのチュートリアルがある


deeppatel234/webpack-report: Webpack Build Analysis Plugin

github.com/deeppatel234/webpack-report

webpack performance plugin

webpackのbundleされたファイルの依存関係、ビルド時間などのビルド情報、chunkやモジュールなどのサイズのビジュアライズをしてくれるプラグイン。


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


xFAANG/askql: AskQL is a query language that can express any data request

github.com/xFAANG/askql

JavaScript TypeScript library GraphQL API

実行できるコードをリクエストとして利用するクエリ言語。
AskQLは、プログラミング言語ライクなクエリ(AskScript)を書いたものをコード(AskCode)に変換してサーバへ送信し、Sandbox機構をもつAskVMで実行した結果をJSONとして返す


babel/babel-polyfills: A set of Babel plugins that enable injecting different polyfills with different strategies in your compiled code.

github.com/babel/babel-polyfills

babel polyfill

Babelのpolyfillエンジン。
core-jsやes-shimsなどpolyfillを選択できる。
polyfillモジュールをinject方法としてentry-globalusage-globalusage-pureをもつ


otiai10/lookpath: The minimum and most straightforward way to check if command exists and where the executable is, WITHOUT spawning subprocess

github.com/otiai10/lookpath

node.js library

whichなどのコマンドを使わずに、実行ファイルのパスを取得するNode.jsライブラリ


divy-work/autopilot-deno: Cross-platform desktop automation library for Deno.

github.com/divy-work/autopilot-deno

deno Rust library

キーボードやマウスなどデスクトップ処理の自動化を行うDeno向けのライブラリ


RoughNotation

roughnotation.com/

JavaScript library

Underline、Box、Highlightなどを手書き風の描画をアニメーションできるライブラリ。
手書き処理にはRoughJSを利用している


書籍関係


Riot.jsで簡単Webアプリケーション開発 | 桑原 聖仁 |本 | 通販 | Amazon

www.amazon.co.jp/dp/4863543115/

JavaScript library ReleaseNote

2020年6月23日発売予定
Riot.jsについての書籍


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