フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
Railsアプリの開発環境向けDockerfile + docker-compose.yml - アジャイルSEの憂鬱
人に説明するときに記事あると便利なので、開発環境向けのDockerfileとdocker-compose.ymlを書いておく。 Dockerfile FROM ruby:3.0.0 WORKDIR /app # Using Node.js v14.x(LTS) RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash - # Add packages RUN apt-get update && apt-get install -y \ git \ nodejs \ vim # Add yarnpkg for assets:precompile RUN npm install -g yarn # Add Chrome RUN curl -sO https://dl.google.com/linux/direct/google-ch
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないかもしれません。 例として最近流行のフレームワークを考えてみましょう。Next.js や Remix、Nuxt.js など、いずれも内部的にトランスパイラやモジュールバンドラを使い、エンジニアが書いた JavaScript を別の形へと変換してからユーザーのブラウザで動かすような仕組みになっています。 一昔前だと Next.js のようなフレームワークが今ほど発展していなかったこともあり、webpack や Babel を直接使っていたと思いますが、それも同じです。
No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue
[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 を利用することはな
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
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
Runa: Ruby で中規模アプリケーションを書くためのフレームワーク - おんがえしの blog
Runa という Ruby で Gem を使ったり複数ファイルで構成された中規模のアプリケーションを簡単に書くためのフレームワークを作っています。 Runa を作った経緯 Ruby は単独のスクリプトファイルとして実行するときは取り回しも簡単で大変使いやすい(小規模アプリケーション) が、特定の gem に依存したり複数ファイルで構成されるようなアプリケーションを作ろうとするとスタンダードな方法が用意されておらず(特に配布や共有のことを考えると)敷居が高くなってしまう(中規模アプリケーション) これが今まで余り問題にならなかったのは、Web アプリであれば Rails がその辺りも面倒をみてくれたり、コンソールアプリケーションなら gem で配布するみたいな方法でやりくりしてきた経緯がある。しかし gem で配布するには RubyGems のアカウントが必要だったり、昨今のセキュリティ問題
Skypack: search millions of open source JavaScript packages
How to Use Defaulthttps://cdn.skypack.dev/package-name https://cdn.skypack.dev/@scope/package-name Package Versionhttps://cdn.skypack.dev/preact@10 https://cdn.skypack.dev/preact@^10.5.0 https://cdn.skypack.dev/preact@10.5.5 Package Exporthttps://cdn.skypack.dev/preact/hooks https://cdn.skypack.dev/preact@^10.5.0/hooks Minified (?min)https://cdn.skypack.dev/preact?minDeno (?dts)https://cdn.skypack
Nokogiri が 1.11.0 からプリコンパイル済みで配布される (らしい) 。 このエントリを書いている時点での Nokogiri のプレリリースバージョンは 1.11.0.rc3 なので、大きな問題がなければ近日リリースの Nokogiri からという少し先取りの話になる。 おや？となったツイートは以下。 On a more serious note, we're REALLY close to shipping precompiled native gems.https://t.co/tKcuym2UqQ— mike dalessio (@flavorjones) 2020年10月8日 後述するイシューに詳しくは記載されていますが、Linux だけではなく macOS にも対応しているらしい。 早速手元の macOS で見てみることにする。 % time gem install
Node.jsのNative ESM対応は夢の機能ですが、夢を詰め込みすぎたせいかCJSからの移行を難しくしているポイントが依然として存在します。そのひとつが拡張子問題で、Node.jsのNative ESMではモジュールの拡張子を明示しなければいけなくなりました。 (これはWebブラウザの挙動に近づけるための判断だと考えられます。) 特にTypeScriptと他のツール (JestやWebpack) と組み合わせて利用している状態でのNative ESM化は実質的に未解決の状態だと言えます。本稿ではこの現状についてできる範囲で状況説明を試みます。 Node.jsの拡張子の扱い Node.jsはCJSとESMの2つのモジュールフォーマットをサポートしていますが、これらは単にパーサーが異なるだけではなく、実質的には「2種類の異なるモジュールシステムがFFIで繋がっている」程度には隔たりがあり
GitHub - evanw/esbuild: An extremely fast bundler for the web
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
Rspack
RspackThe fast Rust-based web bundler Seamlessly replace webpack with compatible API Why Rspack?Rspack is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds. Fast StartupCombining TypeScript and Rust with a parallelized architecture to bring you the
RubyのDockerイメージでよく使う環境変数
Ruby向けのDockerイメージで使いがちな環境変数について整理する。 GEM_HOME RubyGemsに対して、どのディレクトリにGemをインストールするかを指定する環境変数。例えば gem install foo を実行すると、この環境変数で指定したディレクトリにfoo gemがインストールされる。 Dockerでありがちな作戦として、/gem のような適当なパスにデータボリュームをマウントしておいて、そこにGemを永続化させておくというのがある。このときGEM_HOMEを /gem に指定しておくと、gem install bundler を実行したときそこにBundlerがインストールされ、更に /gem/bin/bundle も用意される。 BUNDLE_PATH Bundlerに対して、どのディレクトリにGemをインストールするかを指定する環境変数。例えば bundle i
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
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
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
Sebastian McKenzie, the original creator of Yarn and Babel and a member of the React Native team at Facebook, has been working on an “all-in-one” solution for JavaScript and TypeScript development. The Rome project, a reference to “all roads lead to Rome”, was made public on Feb 26th 2020. What is Rome? Rome is a from-scratch implementation of a complete JavaScript toolchain. It compiles and bundl
Rails には system test (spec) と呼ばれる、Capybara を使った自動ブラウザテストの仕組みが備わっています。これはとても便利で強力なテストではありますが、けして万能ではありません。実行時間が長くなりがちですし、テストコート量も多くなりメンテナンスが大変です。 Ruby…
Snowpack
Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects. Check out Vite for a well-maintained Snowpack alternative. See also: esbuild, parcel What is Snowpack?Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Sno
Announcing Vite 5
Vite 5.0 is out! November 16, 2023 Vite 4 was released almost a year ago, and it served as a solid base for the ecosystem. npm downloads per week jumped from 2.5 million to 7.5 million, as projects keep building on a shared infrastructure. Frameworks continued to innovate, and on top of Astro, Nuxt, SvelteKit, Solid Start, Qwik City, between others, we saw new frameworks joining and making the ec
Ruby: GemfileとGemfile.lock究極ガイド（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: The Ultimate Guide to Gemfile and Gemfile.lock | Saeloun Blog 原文公開日: 2022/08/16 原著者: Keshav Biswa サイト: Saeloun Blog Ruby on Railsの開発者なら、GemfileやGemfile.lockを知らない人はいないでしょう。この2つのファイルはRuby gemをインストールするのに欠かせませんが、仕組みを知らないままでは混乱する可能性もあります。本記事では、Gemfileとは何か、その中に何があるのか、および使い方について解説します。 最初に、デフォルトのRails 7アプリケーションを作成し、それからGemfileの各行を調べて意味を理解していきましょう。 新規作成したアプリのディレクトリには、Gemfileと
🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package 🌕 moon 一貫性を持ったmonorepo管理ツール for JavaScript ハッシュを使ったファイルキャッシュ プロジェクトのパッケージ間の依存関係の分析とタスク実行 Node.js/npmパッケージマネージャーのバージョン管理と一貫性 TypeScriptのProject Referendcesの一貫性 比較 Nx: The Framework + Pluginで拡張する Lerna: Nx傘下、ライブラリ公開向け Turborepo: タスク実行の最適化をする moon: monorepoでの一貫性を提供する Packemon: moonと同じ作者。ESM/CJSのライブラリ公開向け 比較(言語) Nx: TypeScript + C++[^1] Turborepo: Go
Turbopack
Why Turbopack?With incremental behavior and adaptable bundling strategies, Turbopack provides a fast and flexible development experience for apps of any size. Incremental by designBuilding once is enough work—once Turbopack performs a task, it never does it again.
Above: the time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps. More info here.Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way
こんにちは、hsbt です。前回のエントリからしばらく経ってしまい、引き続き原神や崩壊・スターレイルをプレイしつつ、アサシンクリード・ミラージュやスパイダーマン2など、ホリデーシーズンに向けたゲームラッシュでいよいよ時間がなくなってきました。 今回は RubyKaigi 2023 以降、主に 2023 年の夏から秋にかけての Ruby のフルタイムコミッタの活動についてご紹介します。 Euruko 2023 への登壇 今年の夏は Ruby 本体や RubyGems や Bundler の開発はもちろんのことですが、9月に開催された Euruko 2023 の登壇の準備が中心になりました。Euruko とはどういうカンファレンスなのかを知らない方のために簡単に紹介をします。 Ruby の国際カンファレンスには日本で開催される RubyKaigi 、米国で開催される RubyConf などがあ
Vue & Vite Rustify
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
What is tooling.report? It's a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base. Getting StartedThis homepage shows the aggregated results from a bespoke suite of build tool tests. A build tool test is a configuration file created to specifically handle a
Snowpack v2.0
After 40+ beta versions & release candidates we are very excited to introduce Snowpack 2.0: A build system for the modern web. Starts up in <50ms and stays fast in large projects.Bundle-free development with bundled production builds.Built-in support for TypeScript, JSX, CSS Modules and more.Works with React, Preact, Vue, Svelte, and all your favorite libraries.Create Snowpack App (CSA) starter te
GitHub - rolldown/rolldown: Fast Rust bundler for JavaScript/TypeScript with Rollup-compatible API.
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
Gemfile での Ruby バージョンの指定を、値の直書きではなく .ruby-version からの読み込みに変更する設定です。 https://github.com/rubygems/rubygems/pull/6876 例えば、Rails アプリケーションなんかで Gemfile に .ruby-version と同じ 3.3.0 を指定しているようであれば、以下のように記述できます。 -ruby '3.3.0' +ruby file: '.ruby-version' asdf に類するものを使っているようであれば、ruby file: '.tool-versions' と記します。 https://github.com/rubygems/rubygems/pull/6898 この設定によって Ruby のアップデート時のバージョンの更新ポイントを減らすことができます。 なお、古
esbuild 最適化芸人
nagoya.ts #1 https://nagoyats.connpass.com/event/316967/
Frontend Application Bundles (💎 FABs) are a bundle format for frontend applications. They unify static sites, single page applications (SPAs), server-side rendering (SSR) & server-side logic in a single format, one that is universally compatible with and easy to deploy to a wide range of hosting providers, even your own infrastructure! Want to get started? Head to fab.dev/guides/getting-started t
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!
I'm very excited to announce @parcel/css, a new CSS parser, compiler, and minifier written in Rust! Check it out on GitHub, or try a live demo right in your browser. Parcel CSS has significantly better performance than existing tools, while also improving minification quality. In addition to minification, Parcel CSS handles compiling CSS modules, tree shaking, automatically adding and removing ven
An extremely fast, production-grade web bundler based on Rust. Mako is a new web bundler for Web App, Library, and Framework. It's designed to be fast, reliable, and easy to use. It has been used in hundreds of projects in production by Ant Group, and other companies. If you are looking for a modern web bundler, Mako is the right choice. Getting Started $ npm create mako Why Mako Mako has a lot of
Announcing Parcel v2!
The Parcel team is beyond excited to announce that v2.0.0 stable is now available! 🎉 Parcel 2 brings the zero configuration experience you know and love from Parcel 1, and makes it scalable and extensible to projects of any size and complexity. It is already being used in production at some of the biggest companies in the industry including Atlassian, Adobe, and Microsoft. Check out our new websi
bundlephobia.com というサイトがあります。これは npm のモジュールを参照した際のバンドルサイズを算出してくれるサービスです。 便利なんですが、基本的に dist/.. 等の package.json の main で配られるものだけをターゲットにしているので、 ESM Treeshake で一部のモジュールだけ import {} from ... した際のバンドルサイズがわからない、という問題がありました。 なので、それに対応したものを自分で作りました。netlify にデプロイしてあります。 こんな感じです。 使い方 https://shakerphobia.netlify.app/?pkg=<>&imports=<a,b,c> どうやって動いてるか URL を踏むと、 cdn.skypack.dev (その実体は npm) からソースコードを落としてきて、 Web
Webpack is somewhat of a black box for most developers. Tools like “create-react-app” abstract most of the bundler functionality away. I did some research into it and began building my own light-weight web bundler to understand more about what it entails. This is part of my “under-the-hood of” series: Type systems (e.g. TypeScript)Test runners (e.g. Mocha)VSCode auto formatters (e.g. Prettier)Sour
ちょっとした React Server Component 小ネタ。 Next.js (webpack, Turbopack) で確認しているが、おそらく RSC に対応しているツールであったらどれも変わらないはず。 アプリケーションの package.json の imports セクションに以下のように記載しておく。util の部分は好きな文字列で構わないが # から始めておくこと。 { "imports": { "#util": { "react-server": "./src/util.react-server.ts", "default": "./src/util.default.ts" } } }React Server 環境とそれ以外の環境用、それぞれの実装を用意する。 とりあえず結果が異なることを確認したければ以下のような感じ。 /* ./src/util.default.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptビルドツールの整理 各ツールの機能と依存関係
JestでTypeScriptを高速化する | miyauci.me
書いた JavaScript をそのまま動かすフロントエンド開発の未来のために必要なもの
Native ESM 時代のフロントエンドビルドツールの動向
Nokogiriが1.11.0からプリコンパイル済みで配布される - koicの日記
Native ESM + TypeScript 拡張子問題: 歯にものが挟まったようなスッキリしない書き流し
module bundlerの作り方(準備編) - hiroppy's site
Rome, a new JavaScript Toolchain - JASON Format
ちょうどよい Rails E2E テスト/enough-good-rails-e2e-test
🌕 moonでのmonorepo管理とpackemonでのCJS/ESMのdual package
esbuild - An extremely fast bundler for the web
Ruby フルタイムコミッタの仕事報告 2023年Q2-3 - ANDPAD Tech Blog
Overview | Tooling.Report
GemfileでのRubyバージョン指定を.ruby-versionから読む - koicの日記
Home
Mako - Extremely fast, Production-grade web bundler
ESM treeshake に対応したバンドルサイズを計算してくれる Shakerphobia を作った
Under-the-hood of web bundlers (e.g. Webpack)
Server Component と Client Component で依存モジュールを切り替える
newsdig.tbs.co.jp
haniwa.blog.fc2.com
misa5.lo.gob.jp
www.nicovideo.jp
cloud.google.com
dojozan.com