Introducing Turbopack: Rust-based successor to Webpack – Vercel
Vercel's mission is to provide the speed and reliability innovators need to create at the moment of inspiration. Last year, we focused on speeding up the way Next.js bundles your apps. Each time we moved from a JavaScript-based tool to a Rust-based one, we saw enormous improvements. We migrated away from Babel, which resulted in 17x faster transpilation. We replaced Terser, which resulted in 6x fa
Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 - Qiita
概要 ・Laravel Mixとは、フロントエンドのアセットをコンパイル、バンドルしてくれるツール ・ツールの中身はwebpackを利用している ・webpack設定ファイルをより分かりやすく簡単に書けるように設定ファイルをラップしている ・lessやsass、babelなどよく使われるローダーが最初から用意されていて、デフォルトで利用することができる ・Laravelを使っていないアプリでも、コンパイル・バインディングのツールとして利用できる ※webpackが分からない方はこちらを参照 webpackとは？ 使い方 初期状態 ※npmが分からない方は、先にこちらを参照 npmとは？【フロントエンドパッケージ管理】 Laravelをインストールすると、 package.jsonとwebpack.mix.jsが用意されている。 package.jsonには Laravel Mix自体やその
様々なビルドツールを渡り歩いた末にLaravel Mixを選択した理由 2020年版 作業環境を晒します〜フロントエンド開発環境編〜 - arms inc. Engineers' Blog
以前の記事で、「次回はさらにフロントエンド開発に寄せて、モジュールバンドラやタスクランナーについてご紹介できたら」と予告していましたが脱線してしまいましたので、今回はビルドツールにスポットを当てたいと思います。 tech.arms-soft.co.jp ビルドツールとは 今ではフロントエンドの開発環境にはなくてはならないと言っても良いほどのツールです。 主に下記の処理を行なってくれます。 pug、EJSなどのテンプレートエンジン SASS、PostCSSなどのCSSプリプロセッサ モジュールの依存関係の解決 BabelなどのJavascriptトランスパイラ Vue、Reactなどのフレームワーク stylelint、eslintなどの構文チェッカー さらに、画像の圧縮やブラウザのオートリロードなど、様々な動作を行なってくれます。 ただ便利な反面、様々なツールが登場し続けていて、そのツール
【開発】esbuildを使ってJavaScriptのビルドを264倍早くしました | SocialDog Tech Blog
こんにちは。株式会社SocialDog人事のまなてぃです。 こちらは、過去にリリースしたTech Blogです！ SocialDogの志潟寛生です。 この記事では、2021年10月にwebpackからesbuildに移行することで、SocialDogのCIビルドのうち、JavaScript部分を264倍早くした事例についてご紹介します。 モダンなビルドツールであるesbuildに移行した際に発生したトラブルとその対処についてご紹介できればと思います。 ビルドが遅い問題esbuildに移行する以前は、Cypressで使用するコードはwebpackでビルドしていました。 Cypressを並列化するなどして何とか高速化していたものの、webpackのビルド時間には9分50秒ほど掛かっていました。webpackのビルドが終わらなければ後続の依存したタスクが実行できないため、CIの実行時間の大きなボ
SprocketsをやめてWebpackerに移行したのでどうやったか公開する - patorashのブログ
ようやくSprocketsからWebpackerに移行したので、そのためにやったことをまとめておきます。 移行前の状態 Railsのバージョンは6.0系 Sprockets4 CoffeeScript Sass Bootstrap3を使用 yarnは使ってる 筆者（私）はECMAScriptに関してはそこまで詳しくなくて、今後習得していきたいと思っているレベル。 方針 「とにかくWebpackerに移行する」ということを念頭に置き、JavaScriptを完璧にモジュール化する等は目指さない。Webpackerで動けばいい。後でリファクタリングしていくから！ Webpackerをざっくり理解する Webpackerはwebpackの設定などをほとんど意識することなく、いい感じに使えるようにしてくれるやつです。 webpackをざっくり理解する じゃあwebpackって何？となるかと思いますが
Webフロントエンド開発(2021)の見取り図をつくりたい
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
Webpacker 3.x -> 5.x-> jsbundling-rails - Qiita
はじめに ※この文章はベータ版です。 既存のプロジェクトで Rails5.2 + Webpacker 3.5.5 -> Rails6.1 + Webpacker5.2.1 -> Rails6.1 + jsbundling-rails (-> Rails7.0 + jsbundling-rails)したので、手順etc を メモしておきます。 (Rais6 -> Rails 7 する際には、Webpacker -> jsbundling-rails、 turbo-links -> turbo など、Rails7 からの正式採用なものの Rails6 でも動作する gem への移行、Rails6 では動作するものの Rails7 以降への対応が怪しい gem の Rails7対応済/対応中の gemへの移行、 例：Refile -> Shrine、をインクリメンタルに行なってから、 Rails
Rails & Webpacker環境でPostCSSを使う - Qiita
はじめに Rails & Webpackerの環境でPostCSSで書かれたCSSを取り込もうとした時に、そもそもPostCSSってRailsでどう扱うんだっけ？？となって少し詰まったのでその時の対応についてになります。 rails: 6.0.0 webpacker: 4.0.7 PostCSSって ぼちぼちPostCSSの勉強をやっちゃいますか から PostCSSはNode.js製のモジュールでCSSをコンパイルできるツールです。 そうなんです。LessやSassとは異なり、CSS拡張子をソースとして新しいCSSを生成してくれるんです。 またこちらの記事に詳しくまとめられています。ありがたい！ PostCSS まとめ - Qiita やりたいこと Webpackerで管理しているCSSをPostCSSで書いてコンパイルする 結論 先に結論から言うと、RailsでWebpackerをイン
webpacker3系からwebpacker4系へのアップグレードでハマったので手順とかMemo✍ - Madogiwa Blog
最近自分の個人サービスのRailsアプリケーションをWebpaker3系(3.5.5)から4系(4.0.7)にアップグレードしたのですが、割とハマったので手順をメモしておく✍ ちなみにVue.jsを使っている場合の手順になるので、ご注意ください⚠ とりあえず手順だけ package.jsonのwebpackerのバージョンを上げてyarn install bundle exec rails webpacker:install:vueを実行して関連ファイルを差し替える .babelrcは不要となったようなので削除する yarn add postcss-loader postcss-cssnextでCSS系のローダーをinstallする。でCSS系のローダーをinstallする。 bin/webpackで動作を確認して成功🎉 ちょっと各項目を詳しく package.jsonのwebpacke
Webpacker の概要 - Railsガイド
本ガイドではWebpackerのインストール方法と、Railsアプリケーションのクライアント側で用いるJavaScriptやCSSなどのアセットをWebpackerで利用する方法について解説します。ただしWebpackerは開発終了しましたのでご注意ください。 このガイドの内容: Webpackerとは何か、およびSprocketsと異なっている理由 Webpackerのインストール方法、および選択したフレームワークとの統合方法 JavaScriptアセットをWebpackerで管理する方法 CSSアセットをWebpackerで管理する方法 静的アセットをWebpackerで管理する方法 Webpackerを利用しているサイトのデプロイ方法 WebpackerをRailsエンジンやDockerコンテナなどの異なるコンテキストで利用する方法 1 Webpackerとは Webpackerは、
.browserslistrcで対象ブラウザを指定する - Qiita
.browserslistrcは、「AutoprefixerでCSSにどのベンダープレフィックスを付けるか」などを決める設定ファイルです。 Autoprefixer以外にも対応していてツールごとに設定を持たずに済むので、ツール間で対象ブラウザ設定の齟齬が起こるのを防げます。 ブラウザのバージョンを直接指定せず、カバー率や直近○年という方法で指定しておくと、ブラウザのバージョンアップや、新しいブラウザの登場、シェアの激変などへの手動での設定変更が不要になります。 .browserslistrcファイルではなく、package.json に記述することも可能です。 対応ツール 対応するツールは下記です。 Autoprefixer Babel postcss-preset-env eslint-plugin-compat stylelint-no-unsupported-browser-feat
Parcel 入門 ～Parcelはwebpackの代わりになるのか～ - Qiita
2018/05/08追記 記事内容をv1.1.0からv1.8.1に対応したものに更新しました。 はじめに Parcelというモジュールバンドラを触ってみたので、その備忘録になります。 webpack時代の終わりとparcel時代のはじまり 結論から言いますと、機能がシンプルすぎて自分の実務での利用は難しいと感じました。~~~~そのため、2017/12/10時点（v1.1.0）ではwebpackの代わりにはならないです。 2018/05/08時点でv1.8.1になり、様々な機能が追加されました。しかし現在もwebpackで利用している機能がParcelにはないため、実務での利用は難しいです。 とは言えども設定ファイルなしでReact、Vue、ES2015などをビルドできるようになっているため、個人でちょっとしたコードを書いてビルドしたい時はこちらを使っていくと便利だと思いました。 そのため
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Turbopack
Kawamata Ryo on Twitter: "Viteと全然異なるアプローチ👀 開発サーバーでもESMではなく、バンドルするんだ。 ただ、そのバンドルをアクセスがあったファイル単位行う。必要なものだけ遅延でバンドルするために早いと。 バンドラーもesbuildを使わず自前で… https://t.co/d9UXZBO0T7"
https://twitter.com/__sakito__/status/1584963093268172800
池田 泰延 on Twitter: "Vercelがwebpackの後継を目指した「Turbopack」を発表。 ・webpackより17倍速い ・Viteより10倍速い ・Rust製 ・TypeScript, JSX, CSSもサポート ・webpackからのマイ… https://t.co/HpfBvZADmP"
Ruby on Rails 6にTailwindCSSを導入（Gemを使わず） - Qiita
jquery-ui and webpack, how to manage it into module?
GitHub - csstools/postcss-preset-env: Convert modern CSS into something browsers understand
webpacker/docs/v4-upgrade.md at 4-x-stable · rails/webpacker