JSer.info #490 - Babel 7.10.0がリリースされたました。
- 7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking · Babel
- Release v7.10.0 · babel/babel
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を読むとよさそうです。
- babel/babel-polyfills: A set of Babel plugins that enable injecting different polyfills with different strategies in your compiled code.
- RFC: Rethink polyfilling story · Issue #10008 · babel/babel
- Move "targets"-related options to
@babel/core
by nicolo-ribaudo · Pull Request #2 · babel/rfcs
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 API、Idle Detection API、Origin isolation、WebAssembly SIMDが追加されています。
その他にMixed ContentのAutoupgrade、CSSのrevert
キーワードのサポート、JSでは Private Methods and Accessors、Weakrefのサポートなども行われています。
それぞれに解説記事なども出ているので、興味があるものを読んでみるとよさそうです。
また、7月14日にリリース予定のChrome 84安定版に合わせて、一時的に停止していたSameSite Cookieのロールアウトが再開される予定となっています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub 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 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 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/
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 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パッケージ管理ツールの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 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のサポートなど
Chromium Blog: Resuming SameSite Cookie Changes in July
blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html
7月14日にリリース予定のChrome 84安定版に合わせて、一時的に停止していたSameSite Cookieのロールアウトが再開される予定
Pug 3.0.0 - RollingVersions - Medium
medium.com/rollingversions/pug-3-0-0-2897d6dec294
テンプレートエンジンのPug 3.0.0リリース。
Bufferに対するフィルターをサポート、each ... of ...
構文のサポートなど
アーティクル
Tools to measure Core Web Vitals
Core Web Vitalsのメトリクスを計測するツールの紹介記事
Detect inactive users with the Idle Detection API
ユーザー/スクリーンがアクティブではない状態かを判定するAPI。
Chrome 84でOrigin Trialとして提供されている。
userとscreenのidle状態、変更検知ができる。利用にはnotifications
のパーミッションを取得する必要がある。
The Svelte Compiler Handbook | Tan Li Hau
lihautan.com/the-svelte-compiler-handbook/
Svelteのコンパイルプロセスを解説している記事。
The process: Making Vue 3 – Increment: Frontend
increment.com/frontend/making-vue-3/
Vue 3の作成プロセスについての記事。
Vue 3でなぜ書き直しをしているのかやアーキテクチャの変更について
スライド、動画関係
Jamstack_conf_virtual_2020 - YouTube
www.youtube.com/playlist?list=PL58Wk5g77lF8jzqp_1cViDf-WilJsAvqT
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開発の現状について話。
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
MDNのJavaScriptフレームワークのチュートリアル。
React、Ember、Vueについてのチュートリアルがある
deeppatel234/webpack-report: Webpack Build Analysis Plugin
github.com/deeppatel234/webpack-report
webpackのbundleされたファイルの依存関係、ビルド時間などのビルド情報、chunkやモジュールなどのサイズのビジュアライズをしてくれるプラグイン。
ソフトウェア、ツール、ライブラリ関係
xFAANG/askql: AskQL is a query language that can express any data request
実行できるコードをリクエストとして利用するクエリ言語。
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エンジン。
core-jsやes-shimsなどpolyfillを選択できる。
polyfillモジュールをinject方法としてentry-global
、usage-global
、usage-pure
をもつ
otiai10/lookpath: The minimum and most straightforward way to check if command exists and where the executable is, WITHOUT spawning subprocess
which
などのコマンドを使わずに、実行ファイルのパスを取得するNode.jsライブラリ
divy-work/autopilot-deno: Cross-platform desktop automation library for Deno.
github.com/divy-work/autopilot-deno
キーボードやマウスなどデスクトップ処理の自動化を行うDeno向けのライブラリ
RoughNotation
Underline、Box、Highlightなどを手書き風の描画をアニメーションできるライブラリ。
手書き処理にはRoughJSを利用している
書籍関係
Riot.jsで簡単Webアプリケーション開発 | 桑原 聖仁 |本 | 通販 | Amazon
www.amazon.co.jp/dp/4863543115/
2020年6月23日発売予定
Riot.jsについての書籍