JSer.info #330 - UglifyJS v3.0.0がリリースされました。
[email protected] has a new API and CLI and is not backwards compatible with [email protected].
-- https://github.com/mishoo/UglifyJS2
2.x系のAPIやオプションとは互換性のない変更が多く含まれています。
また、2.xではES2015+をサポートしていませんでしたが(パースができなかった)、uglify-esというUglifyJS 3.x系と互換性のES2015をサポートしたバージョンが公開されています。
@kzc: it's also alpha quality and chock-full-o-bugs. But it's an official package!
-- https://github.com/Rich-Harris/butternut/issues/2
2.xから3への変更点やマイグレーションガイドが公開されてないことによりトラブルになっていますが、
Change Logを簡単にまとめると次のような変更が含まれています。
--prefix/--lintなどの代替方法があるコマンドライン引数の削除angularオプション(/* @ngInject /*の対応)の削除- オプションの
screw_ie8がie8へのリネームなど minify()からfs依存が取り除かれ、結果をASTとして吐き出せるように
など様々な変更が含まれています。
- unify CLI & API under
minify()by alexlamsl · Pull Request #1811 · mishoo/UglifyJS2 - drop
angularby alexlamsl · Pull Request #1812 · mishoo/UglifyJS2
詳細は次のIssueを参照してください。
- What is backwards incompatible in 3.0? · Issue #1875 · mishoo/UglifyJS2
- Is there a migration guide, from version 2.x to 3.x? · Issue #1881 · mishoo/UglifyJS2
butternutというminifierがα公開されました。
rollupやsvelteの作者である@Rich-Harris (Rich Harris)によるもので、bubleと同じ高速なminifyが目的のツールです。
@mjackson @AdamRackis it's fast for the same reason Bublé is fast — it doesn't manipulate AST and generate code, it edits code in place. Much less costly
— Rich Harris (@Rich_Harris) May 9, 2017
コードをパースしてASTにし、そこからはmagic-stringを使い、直接圧縮したコードを吐いています。
The traditional approach to minification is this: parse your source code into an abstract syntax tree (AST) using something like Acorn, manipulate the AST, and finally generate code from it.
Butternut takes a different approach. It uses Acorn to generate an AST, but instead of steps 2 and 3 it then edits the code in place using magic-string — which is much less costly than AST manipulation and code generation.
-- https://github.com/Rich-Harris/butternut#how
Webpack CLIというwebpackのCLIツールが公開されました。
webpackのCLIを作り変えているもので、initやmigrateなどのサブコマンドが追加されています。
migrateサブコマンドではv1からv2への設定ファイルのマイグレーションができ、
initコマンドではYeomanをベースにしたテンプレ生成を行うことができます。
今後の予定としてwebpackのパッケージに統合されるため、将来的にはwebpackコマンドとして扱えます。
The CLI is getting integrated into webpack soon, which means you will be using webpack init instead of webpack-cli init.
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release Notes for Safari Technology Preview 29 | WebKit
webkit.org/blog/7532/release-notes-for-safari-technology-preview-29/
Safari Technology Preview Release 29リリース。
Intl.DateTimeFormat.prototype.formatToPartsの実装、Web InspectorのBreak Pointの改善、読み込める画像リソースのホワイトリスト化(psdファイルは不可)など
Prepack · Partial evaluator for JavaScript
JavaScriptのAOTコンパイラ。
BabylonでパースしたASTを元に実行できるinterpreterを持ち、その結果を用いてコードの最適化を行う目的のツール。
Release v3.0.1 · mishoo/UglifyJS2
github.com/mishoo/UglifyJS2/releases/tag/v3.0.1
UglifyJS 3.0リリース。
--prefixやangularオプションなどの削除、screw_ie8がie8にリネームなど様々な破壊的変更が含まれている。
minify()からfs依存が取り除かれ、結果をASTとして吐き出せるようになるなど
- unify CLI & API under `minify()` by alexlamsl · Pull Request #1811 · mishoo/UglifyJS2
- drop `angular` by alexlamsl · Pull Request #1812 · mishoo/UglifyJS2
- maybe https://github.com/mishoo/UglifyJS2/releases
Jest 20: 💖 Delightful Testing & 🏃🏽 Multi-Project-Runner · Jest
facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html
Jest 20リリース。
プロジェクトをまたいでテストを実行できるように、expectでPromiseのサポートを改善、expect.assertions(n)の追加、Jasmineをforkして使うように、CIではSnapshotを自動的に保存しないようになるなど
Announcing the new webpack CLI – webpack – Medium
medium.com/webpack/announcing-the-new-webpack-cli-75ce1d9b8663
webpack-cliがリリースされた。
initとmigrateサブコマンドがあり、v1からv2へのマイグレーションやscaffolding toolとして利用できる
| TypeScript 2.3: The Sexy Default Type Argument | Blog | SitePen
www.sitepen.com/blog/2017/05/09/typescript-2-3-the-sexy-default-type-argument/
TypeScript 2.3で入ったDefault type argumentsとcheckJSについて
Release 2.0.0 · socketio/socket.io
github.com/socketio/socket.io/releases/tag/2.0.0
Socket.IO 2.0.0リリース。
uWebSocketsがデフォルトのwebsocketエンジンに、カスタムパーサを指定できるように、Engine.IOとSocket.IOのhandshakeをマージしてroundtripの削減など
- uWebSockets/uWebSockets: Tiny WebSockets
- Try to load uws by default, fall back to ws by kapouer · Pull Request #459 · socketio/engine.io
Release Almin 0.12 · almin/almin
github.com/almin/almin/releases/tag/almin%400.12.3
Almin 0.12リリース。
デフォルトのStoreGroupを変更しType Safeとなるように、Store#receivePayloadのライフサイクルの追加など。
マイグレーションツールで0.11から移行できる。
Nest FINAL release is here! Node.js framework built on top of TypeScript | Kamil Mysliwiec
kamilmysliwiec.com/nest-final-release-is-here-node-js-framework-built-top-of-typescript/
Node.jsのサーバフレームワークであるNest.jsについて
Release v0.46.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.46.0
Flow v0.46.0リリース。
strict arity checkの試験的実装など
experimental.strict_call_arity=true
アーティクル
CSS Variables — No, really! – Dev Channel – Medium
medium.com/dev-channel/css-variables-no-really-76f8c91bd34e
CSS Variableについての解説記事。
基本的な使い方やよくある質問について。
また、色や複数値の例、スコープやcalcとの組み合わせ、JavaScriptとの連携などについて書かれている。
Build Yourself a Redux - The Zapier Engineering Blog - Zapier
zapier.com/engineering/how-to-build-redux/
Reduxを実装しながらReduxについて学ぶ記事。
Redux/middleware/React Reduxを実装している
util.promisify が追加された - from scratch
yosuke-furukawa.hatenablog.com/entry/2017/05/10/101752
Node.jsのutil.promisifyについて。
コールバック関数を受け取るNode.jsのコアメソッドをPromiseを返すように変換するUtilメソッド。
Refer to the spec: What is all that stuff at the top of the spec?
CSSの仕様の読み方についての連載
ES6 Modules in Chrome Canary (M60+) – Dev Channel – Medium
medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
ES modulesについて。 nonmodule属性とrollupを使って、未対応のブラウザと対応ブラウザでの配布方法の分岐について
The :focus-within pseudo class | Ian Devlin
www.iandevlin.com/blog/2017/04/css/the-focus-within-pseudo-class
:focus-within擬似クラスについて。
FuseBox 2.0 — The beast reborn – fusebox – Medium
medium.com/fusebox/fusebox-2-0-the-beast-reborn-e4ec0443b782
FuseBox 2.0リリース。
Configuration APIの変更、メソッドチェインでAPIを書けるように、Code Splitting APIを追加、プラグインの追加、ドキュメントの更新など
Idiomatic Redux · Mark's Dev Blog
blog.isquaredsoftware.com/series/idiomatic-redux/
Reduxのパターンについての連載
スライド、動画関係
An Introduction to Glimmer - Sessions by Pusher
pusher.com/sessions/meetup/ember-london/an-introduction-to-glimmer
Glimmerの基本的な使い方について発表
Asynchronous JavaScript with async/await - Course by @mariusschulz @eggheadio
egghead.io/courses/asynchronous-javascript-with-async-await
async/awaitについてのスクリーンキャスト。
基本的な使い方、Sequntially/Concurrently、エラーハンドリング/Proposalのasync iteratorについて
Parsing JavaScript - better lazy than eager? - Google スライド
docs.google.com/presentation/d/1b-ALt6W01nIxutFVFmXMOyd_6ou_6qqP6S0Prmb1iDs/present#slide=id.p
JavaScriptのパースについてのスライド。
パースとは何か、V8はどうやってパースしてるのか。
またウェブページのJavaScriptパースは全体の15-20％を占めるため、パース速度を改善するために開発者はどうするべきかについて。
開発者ツールやchrome://tracingでのパース時間の読み方について
Testing Made Easy: Better, Faster, Stronger Unit Tests and Integration Tests - Sessions by Pusher
JavaScriptのテストについて。
JestやCypress、StoryBookなどのユニットテスト/E2Eテストについての動画
サイト、サービス、ドキュメント
SpectorJS - Explore and Troubleshoot your WebGL scenes with ease
WebGLのデバッグツール。
ESBench
Babelで変換した結果を元にbenchmark.jsでマイクロベンチを取るサービス
Web Hypertext Application Technology Working Group Working Mode
WHATWG仕様の用語や仕様の追加/変更/削除のProcessについて書かれたドキュメント
ソフトウェア、ツール、ライブラリ関係
pmq20/node-compiler: Compiling your Node.js application into a single executable with dynamic require and all fs.* API support.
github.com/pmq20/node-compiler
Node.jsのアプリを1つの実行バイナリにするツール。
Rich-Harris/butternut: The fast, future-friendly minifier
github.com/Rich-Harris/butternut
高速である程度良い圧縮を目的にしたminifyツール
hshoff/vx: react + d3 = vx | visualization components
React + D3.jsのビジュアライズコンポーネントライブラリ
書籍関係
01alchemist/TurboScript: Super charged JavaScript / TypeScript for parallel programming which compiles to asm.js and WebAssembly
github.com/01alchemist/TurboScript
asm.js、wasmへの変換を目的にしたプログラミング言語。
TypeScriptに似たSyntaxで型情報を扱う。
O'Reilly Japan - SVGエッセンシャルズ 第2版
www.oreilly.co.jp/books/9784873117973/
2017年5月17日発売
SVG Essentials, 2nd Editionの翻訳本
