Fork me on GitHub

2017-05-11のJS: UglifyJS 3、butternut、webpack-cli

Edit on GitHub 編集履歴を見る

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_ie8ie8へのリネームなど
  • minify()からfs依存が取り除かれ、結果をASTとして吐き出せるように

など様々な変更が含まれています。

詳細は次のIssueを参照してください。


butternutというminifierがα公開されました。
rollupsvelteの作者である@Rich-Harris (Rich Harris)によるもので、bubleと同じ高速なminifyが目的のツールです。

コードをパースして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を作り変えているもので、initmigrateなどのサブコマンドが追加されています。
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 Sponsors

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


ヘッドライン


Release Notes for Safari Technology Preview 29 | WebKit

webkit.org/blog/7532/release-notes-for-safari-technology-preview-29/

safari ReleaseNote i18n

Safari Technology Preview Release 29リリース。
Intl.DateTimeFormat.prototype.formatToPartsの実装、Web InspectorのBreak Pointの改善、読み込める画像リソースのホワイトリスト化(psdファイルは不可)など


Prepack · Partial evaluator for JavaScript

prepack.io/

JavaScript ECMAScript Tools

JavaScriptのAOTコンパイラ。
BabylonでパースしたASTを元に実行できるinterpreterを持ち、その結果を用いてコードの最適化を行う目的のツール。


Release v3.0.1 · mishoo/UglifyJS2

github.com/mishoo/UglifyJS2/releases/tag/v3.0.1

JavaScript library ReleaseNote

UglifyJS 3.0リリース。
--prefixangularオプションなどの削除、screw_ie8ie8にリネームなど様々な破壊的変更が含まれている。
minify()からfs依存が取り除かれ、結果をASTとして吐き出せるようになるなど


Jest 20: 💖 Delightful Testing & 🏃🏽 Multi-Project-Runner · Jest

facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html

JavaScript testing ReleaseNote

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 console Tools

webpack-cliがリリースされた。
initmigrateサブコマンドがあり、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

TypeScript 2.3で入ったDefault type argumentsとcheckJSについて


Release 2.0.0 · socketio/socket.io

github.com/socketio/socket.io/releases/tag/2.0.0

WebSocket node.js library ReleaseNote

Socket.IO 2.0.0リリース。
uWebSocketsがデフォルトのwebsocketエンジンに、カスタムパーサを指定できるように、Engine.IOとSocket.IOのhandshakeをマージしてroundtripの削減など


Release Almin 0.12 · almin/almin

github.com/almin/almin/releases/tag/almin%400.12.3

JavaScript library ReleaseNote

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/

TypeScript node.js library

Node.jsのサーバフレームワークであるNest.jsについて


Release v0.46.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.46.0

flowtype ReleaseNote

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 tutorial article

CSS Variableについての解説記事。
基本的な使い方やよくある質問について。
また、色や複数値の例、スコープやcalcとの組み合わせ、JavaScriptとの連携などについて書かれている。


Build Yourself a Redux - The Zapier Engineering Blog - Zapier

zapier.com/engineering/how-to-build-redux/

React redux tutorial article

Reduxを実装しながらReduxについて学ぶ記事。
Redux/middleware/React Reduxを実装している


util.promisify が追加された - from scratch

yosuke-furukawa.hatenablog.com/entry/2017/05/10/101752

node.js Promises

Node.jsのutil.promisifyについて。
コールバック関数を受け取るNode.jsのコアメソッドをPromiseを返すように変換するUtilメソッド。


Refer to the spec: What is all that stuff at the top of the spec?

rachelandrew.co.uk/archives/2017/04/24/refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec/

CSS spec article

CSSの仕様の読み方についての連載


ES6 Modules in Chrome Canary (M60+) – Dev Channel – Medium

medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

JavaScript browser ECMAScript module

ES modulesについて。 nonmodule属性とrollupを使って、未対応のブラウザと対応ブラウザでの配布方法の分岐について


The :focus-within pseudo class | Ian Devlin

www.iandevlin.com/blog/2017/04/css/the-focus-within-pseudo-class

CSS article

:focus-within擬似クラスについて。


FuseBox 2.0 — The beast reborn – fusebox – Medium

medium.com/fusebox/fusebox-2-0-the-beast-reborn-e4ec0443b782

JavaScript Tools serverless

FuseBox 2.0リリース。
Configuration APIの変更、メソッドチェインでAPIを書けるように、Code Splitting APIを追加、プラグインの追加、ドキュメントの更新など


Idiomatic Redux · Mark's Dev Blog

blog.isquaredsoftware.com/series/idiomatic-redux/

redux article

Reduxのパターンについての連載


スライド、動画関係


An Introduction to Glimmer - Sessions by Pusher

pusher.com/sessions/meetup/ember-london/an-introduction-to-glimmer

JavaScript slide video

Glimmerの基本的な使い方について発表


Asynchronous JavaScript with async/await - Course by @mariusschulz @eggheadio

egghead.io/courses/asynchronous-javascript-with-async-await

JavaScript ECMAScript Promises video tutorial

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 slide

JavaScriptのパースについてのスライド。
パースとは何か、V8はどうやってパースしてるのか。
またウェブページのJavaScriptパースは全体の15-20%を占めるため、パース速度を改善するために開発者はどうするべきかについて。
開発者ツールやchrome://tracingでのパース時間の読み方について


Testing Made Easy: Better, Faster, Stronger Unit Tests and Integration Tests - Sessions by Pusher

pusher.com/sessions/meetup/js-monthly-london/testing-made-easy-better-faster-stronger-unit-tests-and-integration-tests

JavaScript browser testing video

JavaScriptのテストについて。
JestやCypress、StoryBookなどのユニットテスト/E2Eテストについての動画


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


SpectorJS - Explore and Troubleshoot your WebGL scenes with ease

spector.babylonjs.com/

WebGL debug browser Chrome Extension

WebGLのデバッグツール。


ESBench

esbench.com/

babel benchmark webservice

Babelで変換した結果を元にbenchmark.jsでマイクロベンチを取るサービス


Web Hypertext Application Technology Working Group Working Mode

whatwg.org/working-mode

WHATWG document spec

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 Tools

Node.jsのアプリを1つの実行バイナリにするツール。


Rich-Harris/butternut: The fast, future-friendly minifier

github.com/Rich-Harris/butternut

JavaScript Tools

高速である程度良い圧縮を目的にしたminifyツール


hshoff/vx: react + d3 = vx | visualization components

github.com/hshoff/vx

React d3.js library

React + D3.jsのビジュアライズコンポーネントライブラリ


書籍関係


01alchemist/TurboScript: Super charged JavaScript / TypeScript for parallel programming which compiles to asm.js and WebAssembly

github.com/01alchemist/TurboScript

JavaScript TypeScript asm.js WebAssembly

asm.js、wasmへの変換を目的にしたプログラミング言語。
TypeScriptに似たSyntaxで型情報を扱う。


O'Reilly Japan - SVGエッセンシャルズ 第2版

www.oreilly.co.jp/books/9784873117973/

SVG book

2017年5月17日発売
SVG Essentials, 2nd Editionの翻訳本


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