Fork me on GitHub

2019-08-20のJS: Parcel 2.0.0 α、npmのロードマップ、新しいReact DevTools

Edit on GitHub 編集履歴を見る

JSer.info #449 - BundlerであるParcel 2.0.0のα版が公開されました。

Parcel 2ではプラグインや設定による拡張が柔軟にできるようになっています。
次の種類に対する処理をプラグインとして扱えるようになっています。

  • Resolvers
  • Transformers
  • Bundlers
  • Namers
  • Runtimes
  • Packagers
  • Optimizers
  • Validators
  • Reporters

基本的な設定は@parcel/config-defaultというパッケージで管理され、
設定を変更したい場合は.parcelrcというファイルにプラグインの設定を書く形になるようです。

{
  "extends": ["@parcel/config-default"],
  "transforms": {
    "*.dart": ["parcel-transform-dart"],
  }
}

また、multiple targetsとbundle splittingのサポートなども追加されています。


React DevTools v4がリリースされ、新しくなった機能の紹介記事が公開されています。

パフォーマンスの改善、コンポーネントスタック、フィルター、コンポーネントのプロファイル、レンダリング関係の可視化、Hooksサポートの改善などが行われています。
FirefoxChromeはそれぞれブラウザ拡張として利用できます。

また、React DevToolsはスタンドアローンなライブラリとしても利用できます。
次のサイトではスタンドアローン版を利用したReact DevToolsのチュートリアルが公開されています。


The npm Blog — npm CLI Roadmap - Summer 2019という記事ではnpmのロードマップが公開されています。

v6では細かなバグ修正が中心、v7ではインストールのロジックを大きく変更する予定について書かれています。
v7ではyarnのようなworkspacesサポートやpeerDependenciesをインストールするように変更、yarnのresolutionsと似た仕組みをサポート、yarn.lockも読めるようになる予定です。

yarn.lockもロックファイルとして読み込めるようになるアーキテクチャの変更については、次のIssueに書かれています。

また、v8ではtinkとの統合を検討していくとのことです。


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

JSer.info Sponsors

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


ヘッドライン


V8 release v7.7 · V8

v8.dev/blog/v8-release-77

V8 ReleaseNote

V8 v7.7リリース。
メモリ使用量の削減、WebAssemblyのバックグラウンドコンパイルの並列化の改善、Error#stack作成のパフォーマンス改善。
Intl.NumberFormat APIのサポートなど


Release v2.0.0 · typescript-eslint/typescript-eslint

github.com/typescript-eslint/typescript-eslint/releases/tag/v2.0.0

TypeScript ESLint ReleaseNote

typescript-eslint v2.0.0リリース。
Node.js 6のサポート終了、非推奨となっていたprefer-interfaceno-triple-slash-referenceの削除、recommended設定の更新など


🚀 Parcel 2.0.0-alpha.1 is here! 📦 - devongovett - Medium

medium.com/@devongovett/parcel-2-0-0-alpha-1-is-here-8b160c6e3f7e

bundler ReleaseNote

Parcel 2.0.0-alpha.1リリース。
.parcelrcでプラグインのオプションを設定できるように、multiple targetsとbundle splittingのサポート。
またブラウザでの実行などを考えてファイルシステムの抽象レイヤーを追加など


August 2019 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/aug-2019-security-releases/

node.js ReleaseNote

HTTP/2の実装に関するDoS攻撃手法に対応するアップデートが各Node.jsバージョン向けにリリースされた


Announcing TypeScript 3.6 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-3-6-rc/

TypeScript ReleaseNote

TypeScript 3.6 RCリリース。
Generatorsの型改善、Array Spreadの仕様に合わせた変換の改善、Promiseの型エラーの改善。
--target es2015でUnicodeの変数名をサポート、Ambient ClassesとFunctionがマージできるようになるなど


Release 2.3.0 · avajs/ava

github.com/avajs/ava/releases/tag/v2.3.0

JavaScript testing node.js ReleaseNote

AVA 2.3.0リリース。
ECMAScript ProposalのStage 3と4の構文を含んだコードを扱えるように、TypeScript型定義のGenerics型パラメータの初期値を{}からunknownに変更など


ESLint v6.2.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2019/08/eslint-v6.2.0-released

ESLint ReleaseNote

ESLint v6.2.0リリース。
ECMAScript 2020に入る予定のDynamic Import、BigIntのサポート、function-call-argument-newlineのルールを追加など


アーティクル


The npm Blog — npm CLI Roadmap - Summer 2019

blog.npmjs.org/post/186983646370/npm-cli-roadmap-summer-2019

npm article

npm cliのロードマップについて。
v6では細かなバグ修正が中心、v7ではインストールのロジックを大きく変更する予定。
v7ではyarnのようなworkspacesサポートやpeerDependenciesをインストールするように変更、resolutionsのサポート、yarn.lockも読めるようになる予定。
v8ではtinkとの統合を検討していく。


Nullish Coalescing と Optional Chaining | blog.jxck.io

blog.jxck.io/entries/2019-08-14/nullish-coalescing-optional-chaining.html

ECMAScript JavaScript article

ECMAScript Proposal Stage 3のNullish Coalescing と Optional Chainingについての解説。


Largest Contentful Paint  |  web.dev

web.dev/largest-contentful-paint/

Chrome performance article

Chrome77で利用できるようになるLargest Contentful Paint (LCP) APIについて。Viewport内で大きなコンテンツが表示されるまでの時間を表す指標。
PerformanceObserverやElement Timing APIを使った値の取得方法について


Introducing the New React DevTools – React Blog

reactjs.org/blog/2019/08/15/new-react-devtools.html

React article debug

Reactの新しい開発者ツールについての紹介とチュートリアルについて。
React DevTools 4.0.0では、パフォーマンスの改善、コンポーネントスタック、フィルター、レンダリング関係の可視化、Hooksサポートの改善。
またSuspenseのサポートや"Why did this render?"機能の追加など


Introduction to Svelte

daveceddia.com/svelte-intro/

JavaScript UI library article

UIフレームワークであるSvelteについて。
Svelteの特徴について紹介している。
コンパイル、リアクティブな変更、イベントハンドラの書き方、未使用なCSSに関する警告表示などの機能について


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


Divjoy - The React Codebase Generator

divjoy.com/

CSS JavaScript Tools webservice

CSSフレームワーク、JavaScriptフレームワーク、認証基盤、Mail、フォーム、アクセス解析を組み合わせを選択してウェブサイトのテンプレートを生成してくれるジェネレータツール。


goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (August 2019)

github.com/goldbergyoni/javascript-testing-best-practices

JavaScript testing document

JavaScriptのテストについてのドキュメント。
テストの構造、バックエンド、フロントエンド、CIなどについて書かれている


ai/size-limit: Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

github.com/ai/size-limit/

JavaScript Tools library

ファイルサイズの閾値を指定して、そのサイズを超えてないかをテストできるツール。
アプリケーション、大きなライブラリ、小さなライブラリ向けのプリセットが用意されている。
ファイルサイズやロードにかかる時間をテストできる。


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


ehmicky/nve: Run any Node.js version

github.com/ehmicky/nve

node.js Tools

Node.jsのバージョンを指定してスクリプトを実行するコマンドラインツール


書籍関係


Announcing meSpeak.js 2.0

www.masswerk.at/nowgobang/2019/mespeak_2_0

audio JavaScript library C++

Text to SpeechライブラリのmeSpeak.js 2.0リリース。
Emscriptenを使ってC++からJavaScriptにコンパイルしたspeak.jsをベースに、モジュラーな設計にしている。
WebWorkerの対応や音声/言語定義のロード機能などが行われている


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