JSer.info #397 - webpack 4.0 to 4.16: Did you know? – webpack – Mediumという記事では、webpackのマイナー(4.0 ~ 4.16)の変更に関してまとめて解説されています。

webpack 4ではCommonsChunkPluginが削除され、代わりにoptimization.splitChunksというオプションが追加されています。

webpack 4: Code Splitting, chunk graph and the splitChunks optimization

その後のマイナーアップデートでもautomaticNameDelimiter、maxSizeオプションの追加などが行われています。
また、Code Splittingする際にはDynamic Importsに対してimport(/* webpackChunkName: "lodash" */ 'lodash')のような特殊なコメントでモジュールごとの挙動を指定できるようになっています。
この挙動の指定に関しても、マイナーの変更としてpreloadなどを指定できるwebpackPrefetchや、そのままimport()として出力するためのwebpackIgnoreコメントなどが追加されています。

<link rel=”prefetch/preload”> in webpack – webpack – Medium

その他にもwebpack 4のマイナーの変更が紹介されているので、興味がある人は見てみると良さそうです。

Puppeteer Recorder - Chrome ウェブストアというChrome拡張が公開されています。
この拡張はSelenium IDEのように、Chromeでの操作を記録し、それを再現するコードをPuppeteer向けのスクリプトとして出力します。

checkly/puppeteer-recorder: Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.

また、Creating a Chrome extension in 2018: The good, the bad and the meh | Checklyという記事では、このChrome拡張に関する解説が行われています。

PuppeteerはHeadless Chromeを扱うHigh LevelなAPIをまとめたライブラリですが、foxrというFirefox(headless)をPuppeteerライクなAPIで操作するライブラリも公開されています。

deepsweet/foxr: 🦊 Node.js API to control Firefox

foxrはまだ開発段階ですが、Puppeteer APIのサブセットとして互換性のあるAPIを提供することを目的としています。

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

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

Release: [email protected] - 📣 announcements - npm forum

npm.community/t/release-npm-6-4-0/1417

npm ReleaseNote

npm 6.4.0リリース。
IPv6が使える場合はIPv6を使うように、npm auditに--audit-levelを追加など

アーティクル

Variable Scope in Modern JavaScript with var, let and const | Andy Carter

andy-carter.com/blog/variable-scope-in-modern-javascript

JavaScript article

var、let、constの変数のスコープについて解説している記事。

関数とスコープ · JavaScriptの入門書 #jsprimer

Better tree shaking with deep scope analysis – webpack – Medium

medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77

webpack JavaScript article

webpackのTree Shakingではモジュール間同士の依存に関するDead Code Eliminationに動かないケースがあった。
そのパターンを解決するプラグインとその動作の解説について

webpack 4.0 to 4.16: Did you know? – webpack – Medium

medium.com/webpack/webpack-4-0-to-4-16-did-you-know-71e25a57fa6b

webpack article

webpack 4以降の変更点について。
optimizationにautomaticNameDelimiter、maxSizeオプションの追加。
Dynamic Importでpreloadなどを指定できるwebpackPrefetchや、そのままimport()として出力するためのwebpackIgnoreコメントのサポートなど。

Scroll to the future — Martian Chronicles, Evil Martians’ team blog

evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations

browser UI WebPlatformAPI CSS JavaScript

ブラウザとスクロールについての歴史や変更についてをまとめた記事。
スクロールバーのOSやブラウザでの表示の違い、Element#scrollIntoViewやCSS scroll-behaviorでのスクロールの挙動。
またstickyやIntersection Observer、overscroll-behaviorプロパティなどについて