J138のブックマーク - はてなブックマーク

ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive's blog

今さらだけどメモ。 ESLint を使っているプロジェクトに Prettier を導入するときの設定方法。結論としては、公式のこのページに全部まとまってた。なお、 prettier-eslint というのもあるようだが調べていない。先にまとめ eslint-plugin-prettier: ESLint と一緒に Prettier のチェックをしたい場合に導入する eslint-config-prettier: Prettier とバッティングする、ESLint のフォーマット関係のルールを無効化する 1, 2 両方やりたい場合、両方インストールして ESLint の設定に "extends": ["plugin:prettier/recommended"] と書けば OK eslint-plugin-prettier も eslint-config-prettier も公式のパッケ

J138 2020/06/25

リンク

React Hot Loader 3 と webpack 3 でHot Module Replacement（react-hmreからの移行） - dackdive's blog

経緯 dackdive.hateblo.jp これまで webpack-dev-server の Hot Module Replacement を React/Redux でも有効にするために babel-preset-react-hmre を使っていたが、いつの間にか GitHub のリポジトリがなくなっていて deprecated ぽいので別のプラグインを探していた。公式ドキュメントを読む限り React Hot Loader が一番有力のようなので、そちらへ移行する。サンプルコード（GitHub）先に、今回の移行後のコードが確認できる GitHub リポジトリを載せておく。 PR は #4, #6 設定手順ここを読む。 Getting Started · React Hot Loader ※以下、(Step X) は上記ドキュメント中の Step と対応している React

J138 2018/07/26

React

リンク

Node.js製CLIフレームワークoclifを試す - dackdive's blog

はじめに Heroku が oclif という CLI フレームワークをオープンソースとして公開したという記事を読みました。 Heroku CLI や Salesforce DX のベースにもなっているらしい。どんなもんか触ってみます。（oclif は (The) Open CLI Framework の略のようです。読み方がわからない。。。） oclif の特徴手を動かす前に、どういった特徴があるのか公式ドキュメントに目を通してみます。 Features · oclif: The Open CLI Framework Super Speed コマンド実行時のオーバーヘッド（？）がほとんどなく、また依存パッケージもほとんどない実行されるコマンドだけ require されるので、たくさんのコマンドからなる巨大 CLI でも単一コマンドの CLI と速度が変わらない CLI Gener

J138 2018/04/04

リンク

webpack 3 リリース内容まとめ - dackdive's blog

2系に上げるかどうかを悩んでいる間に 3.0.0 がリリースされてしまった。を参考にアップデート内容をメモ。概要、v2 からのマイグレーション大きな feature は Scope Hoisting と Magic Comment ぐらい。 v2 からの移行も特別な作業は必要なく、たいていはバージョン上げるだけで機能するとのこと。それでもメジャーバージョンを上げたのは内部的に breaking changes があって、いくつかのプラグインには影響しそうだったから、とのこと。ということはプラグインが動くかどうか一応確認した方がいい...？ Scope Hoisting 目玉機能その１。これまでの webpack ではモジュールを１つ１つクロージャでラップしており、それによりそれぞれのモジュールの独立性が保たれていた（関数名の衝突とか）ものの、ブラウザでの実行速度が重くなる原因に

J138 2017/06/22

リンク

webpack2でTree Shaking以外に何ができるようになったのかメモ - dackdive's blog

メモ。 webpack 2 正式リリース（バージョンは 2.2）だとか Tree Shaking という機能がいいらしいとかは目にしていたけど結局 v1 -> v2 とメジャーバージョンが上がって Tree Shaking 以外に何が変わったの？というのがよくわからなかったので調べてみた。なお、Tree Shaking については最後に記載している。参考にしたサイト「webpack 2 whats new」とかでググって、見つけられたのはここ。 What's new in webpack 2 · GitHub （WIP て書いていて最新の情報かどうかわからないけど）ここに書いてある内容で気になったものをピックアップする。なお、Getting Started with webpack 2 という記事は残念ながら v1 → v2 における新機能などについては言及されていなかった。