Fork me on GitHub

2018-06-19のJS: Parcel v1.9.0、puppeteer 1.5.0、JavaScript modulesの今後

Edit on GitHub 編集履歴を見る

JSer.info #388 - bundlerであるParcel v1.9.0がリリースされました。

今までParcelにはwebpackやrollupのようなTree Shakingが実装されていませんでしたが、Parcel v1.9.0では--experimental-scope-hoistingのフラグ付きでTree Shakingが実装されています。
これによってbundle後のファイルサイズが小さくなるように改善されています。

またファイル監視の仕組みをBackground workerに移動させるなどして速度の改善、Sassなどで~/tildeのようなチルダを使ったimportに対応などが行われています。


Headless ChromeのHigh Level APIライブラリであるPuppeteer 1.5.0がリリースされました。

Browser Contexts APIが追加され複数の独立したブラウザセッションを扱えるようになっています。またWorkerクラスの追加などが行われています。

公式サイトがGoogleのもつgTLDである.devへ移行しています。


Using JavaScript modules on the web  |  Web Fundamentals  |  Google Developersという記事ではJavaScript modules(ES modules)の現状やChromeでの今後の実装について書かれています。

ブラウザでのscriptとmoduleの挙動の違い、Dynamic importとimport.metaについてといった挙動について。
bundleした場合とのそのままJavaScript modulesとしてロードしたときのパフォーマンスの差、小さくexportしたモジュールの方がキャッシュやツールにおいて有利な点やHTTP/2とPreloadについて。

また、Chromeで検討が進められているWeb Packaging、Layered API、Workerとの連携などJavaScript modulesに関係する仕様や実装についても書かれています。


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

JSer.info Sponsors

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


ヘッドライン


📦 Parcel v1.9.0 — Tree Shaking, 2x faster watcher, and more! 🚀

medium.com/@devongovett/parcel-v1-9-0-tree-shaking-2x-faster-watcher-and-more-87f2e1a70f79

JavaScript Tools ReleaseNote

Parcel v1.9.0リリース。
Tree Shakingの実装、sideEffectsのサポート、ファイル監視の改善、Sassの~/ importのサポートなど


Release v1.5.0 · GoogleChrome/puppeteer

github.com/GoogleChrome/puppeteer/releases/tag/v1.5.0

JavaScript Chrome Tools ReleaseNote

Puppeteer v1.5.0リリース。
BrowserContextが追加され複数の独立したブラウザセッションを扱えるように、Workerクラスの追加、公式サイトがpptr.devとなるなど


Announcing: Greenkeeper 3 – Greenkeeper Blog

blog.greenkeeper.io/announcing-greenkeeper-3-1504f5113998

webservice JavaScript library ReleaseNote

依存パッケージの管理サービスであるGreenkeeper 3リリース。
monorepoのサポート、greenkeeper.jsonの設定ファイルをサポート、コミットメッセージのカスタマイズができるようになるなど


アーティクル


素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受する - Qiita

qiita.com/terrierscript/items/a9826bc58d550d1b2764

TypeScript article

TypeScritptをJavaScript/JSDocの型チェックツールとして利用する方法について


Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers — Smashing Magazine

www.smashingmagazine.com/2018/06/nodejs-tools-techniques-performance-servers/

node.js article

Node.jsサーバのautocannonを使ったベンチマーク、パフォーマンスのボトルネック調査、メモリリークの調査や改善などについて


Detecting autofilled fields in Javascript – Tommy Brunn – Medium

medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7

CSS JavaScript article

フォームのautofillを検知する方法について。
autofillにCSS animationをつけて、animtaionstartで発生を検知する方法について


🚀 Introducing Akita: A New State Management Pattern for Angular Applications

netbasal.com/introducing-akita-a-new-state-management-pattern-for-angular-applications-f2f0fab5a8

JavaScript Angular TypeScript library article

Angular向けのステート管理ライブラリであるAkitaについての記事。


JavaScript engine fundamentals: Shapes and Inline Caches · Mathias Bynens

mathiasbynens.be/notes/shapes-ics

JavaScript article video

JavaScriptエンジンがどのようにJavaScriptのコードを処理しているかについての解説。
それぞれのブラウザがもつJavaScript VMにおける最適化のパイプライン処理について


Node.jsでつくるNode.js - もくじ - Qiita

qiita.com/massie_g/items/3ee11c105b4458686bc1

JavaScript node.js AST article

JavaScriptでJavaScriptのサブセットを作る話。
「RubyでつくるRuby ゼロから学びなおすプログラミング言語入門」のNode.jsでの実装について。


Understanding the Almighty Reducer | CSS-Tricks

css-tricks.com/understanding-the-almighty-reducer/

JavaScript article

Array.prototype.reduceについての記事。
reduceメソッドの動作イメージや、動きについて動画を混じえて解説している。


Using JavaScript modules on the web  |  Web Fundamentals  |  Google Developers

developers.google.com/web/fundamentals/primers/modules

JavaScript module article

JavaScriptモジュールの挙動や実装についての記事。
ブラウザでのscriptとmoduleの挙動の違い、Dynamic importとimport.metaについて。
また、bundleした場合とのパフォーマンスの差や小さくexportしたモジュールの方が有利な点やHTTP/2とPreload。
Chromeで検討が進められてるWeb Packaging、Layered API、Workerとの連携などについて


基礎からはじめるReact入門連載一覧:CodeZine(コードジン)

codezine.jp/article/corner/688

React article

React入門に関する連載記事。
Reactの基礎からRedux、Storybookなど外部ライブラリなどについて扱っている


Isomorphic ES Modules - The blog of Ada Rose Cannon

ada.is/blog/2018/06/15/isomorphic-es-modules/

JavaScript node.js server isomorphic

ES module形式で配布されているHyperHTMLを使ってブラウザとNode.jsで同じライブラリをそのままimportしてウェブアプリを作成する話。


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


Netflix/pollyjs: Record, Replay, and Stub HTTP Interactions.

github.com/Netflix/pollyjs

HTTP JavaScript testing node.js

HTTPリクエスト/レスポンスの記録、再生を行うJavaScriptライブラリとNode.jsサーバ。
またHTTPリクエストのインターセプトして任意のレスポンスを返せる。


snipsco/yett: 🔐A small webpage library to control the execution of (third party) scripts

github.com/snipsco/yett

library JavaScript security

JavaScriptの読み込みをブラックリストで管理するライブラリ。
MutationObserverdocument.createをhookし、指定URLのJavaScriptを読み込みをブロックできる。


ecrmnn/collect.js: 💎 Convenient and dependency free wrapper for working with arrays and objects

github.com/ecrmnn/collect.js

JavaScript library

配列やオブジェクトに対するユーティリティ関数のライブラリ。
Laravelが持つCollectionsをJavaScriptにportしたもの


書籍関係


スラスラ読める JavaScriptふりがなプログラミング | 及川卓也, リブロワークス | 工学 | Kindleストア | Amazon

www.amazon.co.jp/dp/B07DR76HSG/

JavaScript book

2018年6月22日発売
JavaScriptのコードにルビでふりがなをつけて解説する書籍。


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