javascript

CSS-in-JS ライブラリの emotion が気になっている

CSS-in-JS ライブラリでは styled-components が有名ですが、最近 emotion というライブラリが気になっています。 www.npmjs.com www.npmjs.com 注意: emotion をまだちゃんと試していないので以下の内容は公式サイトやドキュメントを見た感想に過ぎません e…

webpack-serve が v1 になっていた

webpack-serve が ^1.0.0 になっていました。 www.npmjs.com 少し触ってみたので、気づいた点について書いていきます。 (以下は v1.0.2 時点の内容になります) mode の扱い 以前書いた以下の記事で、webpack-serve は webpack.config.js で関数で設定を記…

webpack-dev-server の後継らしい webpack-serve について調べた

追記(2018-05-20) webpack-serve が v1.0 になったので、以下の記事を書きました。 yami-beta.hateblo.jp 開発用サーバとして使われている webpack-dev-server ですが、README に記載されているようにメンテナンスモードに入っています。 Please note that…

自作プラグインの webpack v4 対応をしました

自作の license-info-webpack-plugin を webpack v4 に対応させました。 www.npmjs.com yami-beta.hateblo.jp 手順 webpack v4 対応する上でそのままでは動かないことは容易に予想できていたので、以下の順で段階的に対応を進めました。 webpack v3 用のテス…

babel と webpack について

フロントエンド開発において無視できない存在となった babel と webpack について説明する機会があり、作成したスライドを折角なので掲載しておこうと思います。 スライド 注意 全体像を手早く捉えられるようにイメージ優先で作成した資料のため、正確性に欠…

ライセンスコメントを出力する webpack プラグインを作りました

【2017-10-17 追記】license-pack から license-info-webpack-plugin に名称変更しました webpack でビルドした npm パッケージのライセンスをコメントとして出力する license-info-webpack-plugin というプラグインを作りました。 browserify でライセンス…

ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作った

ドロップダウンメニュー用のライブラリ smart-dropdown-menu を作成しました。 github.com smart-dropdown-menu は、<script> タグでの読み込みと npm での管理の両方に対応しています。 どのように両対応したかの詳細については、以下の Qiita 記事を御覧ください。…

npm で管理している package のライセンス一覧の作成を支援する license-list を作成した

license-list というライブラリを作成し、npm で初めて公開しました。 license-list npm で管理している package のライセンス一覧を作成するためのヘルパーライブラリです。 github.com 以下のような形で利用できます。 import licenseList from 'license-l…

browserify, babelify, watchify が遅い時の注意点

browserify, babelify, watchifyを組み合わせて使う場合,`transform` の位置に注意しないと(ファイルの変更をせずに書き込みした場合でも)トランスパイルの度に遅くなっていきます.

React での「...」(ドット3つ)の記法

React では以下のような「...」(ドット3つ)の記法を時々見かけます. これは,Spread Attributes という JSX の記法です. 子の Component へ props を渡す場合,Spread Attributes を用いると,以下のように書き換えられます.

babel-plugin-external-helpers について

babel-plugin-external-helpers は,babel での変換時に各ファイルごとに出力される共通コードを,グローバル変数を用いて1つにまとめることで,重複するコード出力を削減するプラグインです.

gulp を用いたフロントエンドのタスク自動化レシピ (1)

browserify でのトランスパイルや uglify といったフロントエンド用のタスクを gulp で自動化するレシピを Github に上げ始めました. github.com browserify でトランスパイルを行い,1つのファイルにまとめるタスクを書いたので,簡単な解説を残します. b…