タグ

CSSとwebpackに関するko-ya-maのブックマーク (3)

  • [Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク

    TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました! esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな

  • ElmにクリーンでハックのないCSS modulesを

    のように自動的に書き換えてしまうのです。 もちろんCSSファイルのクラス名を書き換えるだけでは来の text クラスを持つHTML要素にスタイルが適用されなくなってしまいますから、書き換えたクラス名の対応関係を JSON オブジェクトとして以下のように出力します。 HTML側がこの JSON オブジェクトを使って適切なクラス名を各要素に付与するようにすることで、無事に CSS で定義したスタイルがその要素に適用されます。 このようなクラス名の衝突をなくす工夫によって、アトミックデザインなどに使える再利用可能な CSS の記述が可能になります。 関連手法との比較 「CSS modules を使いたいから ElmCSS modules を使えるようにした」みたいなのは無能な人がやることです。 いったん落ち着いて「当に ElmCSS modules を使う新しい手法を考える必要が

    ElmにクリーンでハックのないCSS modulesを
  • 今時のフロントエンド開発2017 (1. 愚痴編) - Qiita

    良いものを書きたいので指摘などは大歓迎です。 その際はコメントや編集リクエストをいただければ修正します。 大きな変更が加わるときは通知すると思います。 はじめに これまでのフロントエンドの開発には多くの問題や面倒ごとを抱えています。 その解決手段としてよくビルドツールやaltJSといったワードを目にしますが,これらがどういった目的で利用されているのかについて触れながら進めていきます。 主にパッケージ管理やビルドツールを初めて見る人向けになっているので全編通すとそれなりに長いです。 動かすまでが長めになっていますが理解してしまえば当に必要な手順はさほど多くありません。 実際に開発を始めるために必要な準備はせいぜい1~2つのファイルを記述してコマンドを数回叩く程度なので,過度な抵抗感を持たずに読んでいただけたらなと思います。 登場するツールや技術は多くの問題を解決してくれますが,これらは飽く

    今時のフロントエンド開発2017 (1. 愚痴編) - Qiita
    ko-ya-ma
    ko-ya-ma 2017/03/29
    どうしてフロントエンド界隈がクソ面倒くさい感じになっているのかの説明から入っているのがステキ。ここから逆にWebpackとかが不要な環境とはどういうものなのかもわかる
  • 1