元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。 それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。 そんなところを見つけたときは優しく教えてくださると助かります。 各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。 この記事が誰かの助けになれば幸いです。 調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。 それを整理すると以下になるようです。 JavaScript Runtime Deno Bun
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
新卒時代に作った資料を加筆。
Previous slideNext slideToggle fullscreenOpen presenter view Build and Publish 2023 @mizchi | Plaid, Inc. jsconf.jp 2023 今日もツールチェインに消耗してますか？ https://2022.stateofjs.com/en-US/libraries 今日のテーマ 今日話すこと 現代のビルドツールチェインの進化と目的 エコシステムに振り回されないようになろう！ 今日話さないこと 個別のツール/ライブラリの使い方 フロントエンドの話？ NO. 最近のサーバーサイドJSとバンドラは一体化している サイズ制限のある CDN Edge Worker も最適化が必要 About Me JSのビルドとは何か Transpile AltJS(TS,JSX)や CSS Modules の変換
Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に Vercelは同社が開発するWebアプリケーションフレームワークの最新版となる「Next.js 14.2」の正式リリースを発表しました。 Next.jsは、ReactをベースとしたオープンソースのWebアプリケーションフレームワークです。ルーティングやサーバサイドレンダリング（SSR）、静的サイト生成（SSG）など多数の機能を備えています。 Next.js 14.2では、webpack後継のRust製のビルドツール「Turbopack」がリリース候補に到達。ビルドの性能向上やキャッシュ、エラーメッセージの改善などが行われています。 Next.js 14.2 ◆ Turbopack (RC): 99.8% of tests passing for `next dev --turbo`
Rsdoctor
RsdoctorAnalyzer for Rspack & Webpack Visualize the building process
JSer.info #659 - Node.js v20.6.0がリリースされました Node v20.6.0 (Current) | Node.js .envをビルトインサポート、import.meta.resolveをフラグなしで利用できるように、module.register() APIの追加などが行われています。 Loaderのload hookがCommonJSをサポートし、非推奨のrequire.extensionsを使わなくてもCommonJSを扱うcustom loaderを書けるようになるなどといった変更も含まれています。 しかし、このv20.6.0ではこのloaderの変更によりBabelなどが動かなくなっているため、v20.6.1で修正される予定です。 [v20.6] CJS runs repeatedly when there are circular depend
Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev · Discussion #1
chinese version Before embarking on the development of Rspack, we explored various build tools and frameworks, including extensive use of Webpack, Vite, esbuild, and Rollup in real-world production environments. To provide some context, our team, known as the WebInfra Team, is responsible for overseeing the company's suite of front-end build tools and frameworks. Some of these are open-source, whi
Rspack
Announcing Rspack 0.2# June 02, 2023 It has been almost three months since the release of Rspack 0.1. We have received so much attention and feedback from the community, and we are grateful. In version 0.2, we have added many features, such as: realContentHash, DataURI, support for ESM format, strengthened compatibility with webpack, and optimized many details. In addition, thanks to compatibility
Rails+React環境下における、Hot Module Replacementの導入 - stmn tech blog
はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内の静的アセットを配信することができます。また、HMRとはWebpackの提供する仕組みで、ブラウザのリロードをせずにJavascriptの変更内容を画面に反映するツールです。 弊社のプロダクトであるT
Bug Fixes Fixed inner graph for classes Optimized RemoveParentModulesPlugin via bigint arithmetic Fixed worklet detection in production mode Fixed an error for cyclic importModule Fixed types for Server and Dirent Added the fetchPriority to hmr runtime's ensureChunk function Don't warn about dynamic import for build dependencies External module generation respects the output.environment.arrowFunct
What's Changed Exciting New Features 🎉 feat(config): zod schema for output by @xinxinhe1810 in #3595 feat: filename per entry by @ahabhgk in #3662 feat: worker support by @ahabhgk in #3617 feat: support module decorator to give warning for mix harmony-commonjs by @underfin in #3667 Bug Fixes 🐞 fix(commonjs_scanner): ignore unresolve require span by @suxin2017 in #3591 fix: 🤖 pr number by @IWANA
Rspack
Announcing Rspack v0.6# April 10, 2024 Major Feature Updates# Built-in support for mini-css-extract-plugin# Now you can use rspack.CssExtractRspackPlugin as a replacement for mini-css-extract-plugin. This is very useful in some scenarios, for example when the built-in CSS parser cannot meet your needs, there are more customized CSS module names, or you want to use some loaders that depend on the o
node.js（npm）のインストール まず、node.jsをインストールします。同時にnpmも入ります。 公式からインストーラーをダウンロードして、PCにインストールします。 webpackの導入 Bootstrapなどをインストールして使うには、コンパイラー（生のスクリプトをコンピュータ言語に変換するためのツール）が必要です。今回はwebpackを使います。 プロジェクトフォルダに移動して以下の手順でコマンドを入力していきます。ここから先は、ターミナル（コマンドプロンプトなど）からの操作になります。 npmのセットアップ（初期化） $ npm init -yes -yesオプションを付けると、セットアップ項目が全てデフォルトで設定されます。（付けない場合は、項目毎にEnterを押すか入力が必要） 実行後、プロジェクトフォルダ内に、以下のファイルが作成されます。 package.json
現代のソフトウェア開発において、効率と品質は最も重要な要素の一つです。タスクランナーは、開発者が日々行う繰り返し作業を自動化し、より高速かつエラーの少ない開発プロセスを実現するために不可欠なツールです。例えば、コードのコンパイル、テストの実行、デプロイメントプロセスの管理など、多岐にわたる作業を簡素化し、開発の生産性を向上させます。 おすすめタスクランナー Gulp ウェブ開発者に人気の高いJavaScriptベースのタスクランナー。プラグインシステムが充実しており、様々な作業を効率的に自動化できます。 Gulp：公式サイト Webpack モダンJavaScriptアプリケーションのためのモジュールバンドラーであり、タスクランナーの機能も提供。大規模なプロジェクトに適しています。 Webpack：公式サイト Grunt JavaScriptのタスクランナーの中で最も古くから存在するものの
webpackとbabel周りを深ぼる
JavaScriptのモジュール モジュールとは、変数や関数などをまとめたものです。 JavaScriptにおいては、1つのモジュールは1つのJavaScriptファイルに対応します。 モジュールは変数や関数などをモジュール外部にエクスポートできます。また、モジュールからエクスポートされた変数や関数などをインポートして利用できます。 なるほど、要はJavaScriptにおいて、1つのJavaScriptモジュール(ESモジュールとも呼ばれる)は１つのJavaScriptファイルに相当するのか。 Webpack Webpackは複数のJSモジュール(場合によってはcssや画像アセットなども含める)を一つのjsファイルへバンドルしてくれるJS製のツールである webpackの新規開発は終了したらしく、今後はTurbopackがデファクトスタンダードになりそう。 Webpackを使うメリット モ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
JavaScriptビルドツールの整理 各ツールの機能と依存関係
さよなら Webpack さん
Build and Publish 2023
Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に
2023-09-07のJS: Node.js v20.6.0(.env)、Rspackのアーキテクチャデザイン
Release v5.90.0 · webpack/webpack
Release 0.2.5 · web-infra-dev/rspack
npmでBootstrapをインストールしてWebpackでコンパイルする方法（同時にjQueryも）
コーディング効率を変える！おすすめタスクランナー完全ガイド｜DAD UNION – エンジニア同盟