[B! webpack] ohbaryeのブックマーク

2022年に起きたフロントエンドの変化

Burikaigi 2023 https://burikaigi.dev/ Twitter https://twitter.com/__sakito__

ohbarye 2023/01/28

リンク

Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog

Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、﹁Rails公式のものを選べばOK﹂という戦略が通用しなくなります。本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, css bundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複

ohbarye 2021/10/30

リンク

20 年代のフロントエンド.md

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

ohbarye 2020/02/01

リンク

現代フロントエンドに欠かせないwebpackとBabelを理解しよう

Transcript ݱ୅ϑϩϯτΤϯυʹ͔ܽͤͳ͍  XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP�� /BNF� ��4BLJUP�.VLBJ� 5XJUUFS  ��!@@TBLJUP@@� $PNQBOZ� ��$ZCP[V�JOD�  ��'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ಺෦࣮૷Λ௥͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ͸&$."4DSJQUͱ͍͏ݴޠ࢓༷͕͋Δ� w͜ͷݴޠ࢓༷ΛܾΊ͍ͯΔҕһձ͕5$��  5FDIOJDBM�$PNNJUUFF�� w&4��

ohbarye 2019/09/15

リンク

Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する | nansystem

# Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する @babel/polyfill (opens new window)のページにBabel 7.4.0から非推奨になったと書かれている。 As of Babel 7.4.0, this package has been deprecated この記事ではwebpack4でBabel7.4を使った環境構築の方法を記載する。 # 環境構築 # インストール @babel/polyfillではなくcore-jsとregenerator-runtimeをインストールしているのがポイント。 Polyfillはcore-jsにまとめられており、async-awaitを動かすにはregenerator-runtimeが別で必要になる。そのほか、BabelやWebpackでビルドするために必

ohbarye 2019/06/18

リンク

フロントエンド原理主義者が目論んだ脱webpacker

webpacker脱出を表現した絵画初めに脱webpackerアドバイザーの小宮山です。最近の趣味は相変わらずランニングですが、下の階のヌーラボさんにインスパイアされてボルダリングにも夢中になりつつあります。フロントエンド原理主義とはサーバーサイドからフロントエンドへの干渉︵特にレンダリング︶を嫌う一派に私が勝手に名前を付けただけです。ただしSSRはこの限りでは無いので最近は結構曖昧になりつつあります。動機webpack関連のアップデートがwebpacker対応待ち最大のデメリットはやはり、webpack関連のアップデートがwebpacker対応待ちになってしまうことでした。どんなにwebpack4が3から進化しているとしても、導入するにはレールとなるwebpackerが対応してくれるのを待つしかありません。そしてwebpackerが対応してくれたら即導入なんてうまくいくはずがなく、

ohbarye 2019/02/15

リンク

【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報｜TechRacho by BPS株式会社

こんにちは、hachi8833です。 Rails5のWebpackerでつらみを踏まないために、公式のWebpackerドキュメントの要点をまとめてみました。追加情報がありましたら今後も更新したいと思います。 rails/webpackerより公式のドキュメントが分散しているのと、mdファイル名から内容が推測しにくくて見通しがよくないので、ファイルの並びを再編成して概要を一覧できるようにしました︵せめてファイル名の頭に番号でも振ってくれれば...︶。具体的な設定方法についてはリンク先をご覧ください。 ⚓概要ドキュメントリポジトリ: rails/webpacker/tree/master/docs -- mdが16ファイルあります。本記事ではこちらのみを扱います。上のドキュメントリポジトリの最終更新日: 2018/04/23 更新や誤りにお気づきの方は@hachi8833までお知らせ

ohbarye 2018/05/19

リンク

すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ

javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし

ohbarye 2018/03/19

webpack

リンク

webpackとRollup：似て非なるもの | POSTD

先日、Facebookは膨大なプルリクエストをReactにマージして、既存のビルドシステムを Rollup ベースのシステムに移行しました。その結果、何人もの人々から﹁なぜwebpackではなくRollupを選んだのか﹂という質問が寄せられました。これは、もっともな疑問でしょう。 webpack は、近年JavaScriptコミュニティで最も評価されているツールの1つです。毎月のダウンロード数は何百万件にもおよび、何万個ものウェブサイトやアプリケーションに使用されています。巨大なエコシステムがあり、コントリビュータも多くいます。さらにオープンソースプロジェクトとしては珍しく、かなりの寄付金が集まっています。それに比べるとRollupは小規模です。しかしReact以外にも、Vue、Ember、Preact、D3、Three.js、Momentなど、数々の有名なライブラリに

ohbarye 2018/03/17

"アプリケーションにはwebpackを、ライブラリにはRollupを使おう"

リンク

🚀webpack 4 beta — try it today!🚀

Since the beginning of August — when we forked webpack/webpack#master for the next branch — we’ve seen an incredible influx of contributions! Git contribution stats for the webpack next branch at a glance using gitinspector! Try it on your project to see insights. PS: This doesn’t include the incredible work done in our webpack-cli team and webpack-contrib organization supporting our loaders and p

ohbarye 2018/02/08

webpack

リンク

How we switched from Sprockets to Webpack - rossta.net

Lessons learned adopting the Webpacker gem in an existing Rails app In case you missed the news, Rails is loving JavaScript and Rails 5.1 ships with the option to compile JavaScript with webpack via the Webpacker gem. This is a big change after years of the Rails asset pipeline running on Sprockets. My team at LearnZillion recently decided to embrace this change and make the switch to webpack with

ohbarye 2017/11/22

似たようなことやってる

リンク

Webpackerへの移行を機にフロントエンド開発を改善 - メドピア開発者ブログ

こんにちは。メドピアでエンジニアをしている村上(pipopotamasu · GitHub)です。普段はRailsを触っていますが、時々フロントエンド周りの開発もしています。今回はメドピアの環境におけるWebpacker導入とフロントエンド周りの改善をテーマに記事を書きます。目次なぜWebpacker(Webpack)を導入するのか?フロントエンド改善計画 Webpackerの導入で気をつけたこと github.com なぜWebpacker(Webpack)を導入するのか?Webpackerを導入する背景として、主に2つの課題がありました。 JavaScriptのビルド時間が長いパッケージのバージョン管理ができない JavaScriptのビルド時間が長い元々メドピアのフロントエンド開発においてBrowserifyというbundlerを使用していました。しかし、これにはビ

ohbarye 2017/11/08

リンク

RailsでWebpackerを導入してCoffeeScriptからES2015（ES6）に移行しました - Rista Tech Blog

エンジニアの望月︵@c5meru︶です。この前の日曜は、HTML5カンファレンスにボランティアスタッフとして参加してきました。いくつか聴衆としても聴くことができてとても楽しかったのですが、ずっと立ちっぱなしだったので今すごく腰が痛いです…運動不足…(´・ω・｀) さて、弊社では表題の通り、JOBLISTのCoffeeScriptのコードをES2015︵ES6︶に移行しました。移行の経緯移行前はRailsで、こんな感じのフロントエンドでした。JSのライブラリはvender下に直接置くか、gemで管理 CoffeeScript jQueryベースの開発そこで、より効率的で高品質なフロントエンド開発を目指すにあたって、社内で以下のような点を検討しました。npmや、yarnを用いたパッケージ管理 CoffeeScriptからES2015︵ES6︶に移行 React.js、Vue.js

ohbarye 2017/09/27

リンク

🍾🚀 webpack 3: Official Release!! 🚀🍾

After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted for. Moreover, we promised to deliver them in a faster, more stable release cycle. No more year-long betas, no breaking changes between release candidates. We promised to do you right by you, the community that makes webpack thrive. The webpack team is proud to announce th

ohbarye 2017/06/20

webpack

リンク

Webpackerを使ったRailsでのJavaScript開発 - クックパッド開発者ブログ

こんにちは。マーケティングプロダクト開発部の長田です。この記事では、私が現在進めているプロジェクトで、Webpackerを使ったJavaScriptのモジュール管理を導入したので、それについて紹介したいと思います。 Webpackerとは Webpackerとは、Webpackを用いてRails上でJavaScript開発をするために必要な一連の流れを提供してくれる、Rails organizationで開発されているgemです。これまで、Rails上でJavaScriptのパッケージをどのように管理するか、また、モジュール依存をどのように解決するかについて、多くの選択肢があり、それらをどう組み合わせて使うのかについて悩まされてきました。このブログでも過去に何度か記事が投稿されており、その中でも複数の選択肢が上げられています。 webpackを使った Rails上でのReact開発

ohbarye 2017/03/27

リンク

Railsが5.1になることでフロントエンドの開発が本当に楽しくなりました - チラシ裏日記上等！！新館

RubyonRails の 5.1.0.beta1がリリースされましたね！weblog.rubyonrails.org 仕事でRailsを使うものとしてちゃんと触っておかねばと思い、まずは自分の好きなJavaScript周りがどれぐらい良くなったのか見てみたところかなりびっくりしました。JavaScriptすごく開発しやすいです。 webpack があって yarn がありますし、ReactやVue、angular まで rake タスクでセットアップできます。ちょっと前までRailsでJavaScriptやるのが辛いなんて言っていたのが嘘みたいです・・・。今回はRails 5.1.0 で Vue.js を使って新しくプロジェクトを作るところまでやってみました。 rails new rails webpacker:install:vue Webpackでのビルド Hot Modul

ohbarye 2017/02/27

リンク

はてなブックマーク

タグ

関連タグで絞り込む (18)

webpackに関するohbaryeのブックマーク (16)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス