webpack

過去に、viteでelectronを使用していたときに困ったので、メモ代わりに記載しておきます。 viteではbufferをインポートできない webpackではインポートできる 拡張プラグインをインストールすることでimport エラーが解消する 失敗事例：browserlifyをかける メモ：browserlifyの使い方 viteではbufferをインポートできない javascript上では、import と書いてあるのですが、requireをサポートしていないというエラーが出ています。requireがbufferの内部で使われていることによるエラーですね。 webpackではインポー…

webpackの処理の流れ 上記を踏まえた実装例 SCSSを使用する場合 Typescriptを使用する場合 webpackの処理の流れ Webpackは、JavaScriptアプリケーションのためのモジュールバンドラーであり、アプリケーションに必要なすべてのモジュールを取り込み、それらを1つまたは複数のバンドルにまとめます。 一般的なWebpackの処理の流れは以下の通りです：1. エントリーポイントの指定: webpackの最初のステップは、アプリケーションのエントリーポイントを特定することです。 通常、このエントリーポイントは、アプリケーションのメインファイルであり、依存関係のチェーンを…

はじめに こんにちは、情報システム部の呉です。 あっという間に、2023年の終わりが近づいてきました。今年はLinkers Sourcing / Marketing (LS/LM)ではシステムの様々な内部改善を行いました。 その一環としてwebpackのパフォーマンスを改善しましたので、今回は共有させて頂きたいと思います。 問題の発覚 きっかけは今年行ったCoffeeScriptの撤廃作業でした。撤廃作業はあくまで内部改善なので、並行している他の開発タスクと競合しないように、ファイルもしくは機能毎に分割し、サイドミッションの形で段階的に進めていました。 作業はほぼ問題なくスムーズにできていまし…

こんにちは、みんなのマーケットでエンジニアをしているきたがわです。 今回はくらしのマーケット内で読み込まれるバンドルファイルを軽量化した話について紹介いたします。 ぜひご覧ください！ 発表資料 speakerdeck.com

はじめまして。今月から株式会社ヘンリーのフロントエンドエンジニアをしている kobayang です。この記事では Storybook を React や Vue などの UI ライブラリを使っていないプロジェクトでも活用できるかも、という話をしていこうと思います。 Storybook storybook.js.org もはや説明不要な気がしますが、Storybook は UI を実装する上で便利な、UI プレビューのためのライブラリです。また、プレビューだけでなく、Jest から Story を呼び出すことで簡単にテストが書けたり、Chromatic と連携することで、VRT ができるようにな…

angular16にアップデートしたら@angular-builders/custom-webpackに互換性がなくなり困り果てていました しかし、ついにベータ版ですが@angular-builders/custom-webpack@16.0.0がリリースされましたね！ 早速アップデート npm install --save-dev @angular-builders/custom-webpack@16.0.0-beta.0 angular.jsonまたはproject.jsonを書き換えましょう ‘‘‘ts "build": { "executor": "@angular-builders/…

フロントエンドのバンドルとは モジュールバンドラーとは？ トランスパイルとは？ Typescriptをトランスパイルする場合の例 フロントエンドのバンドルとは フロントエンドのバンドルとは、プロジェクト内にある複数のJavaScriptファイルやCSSファイルを1つのファイルにまとめることを指します。 これにより、Webページのロード時間を短縮することができ、ユーザー体験を向上させることができます。 また、読み込むファイルを1つにすることで、読み込み処理の記述の煩雑さを防ぐことができます。バンドルは、通常、モジュールバンドラー(後述)と呼ばれる特殊なソフトウェアを使用して作成されます。 モジュ…

ソフトウェア開発の技術トレンドは移り変わっていきますが、数年前から急激に盛り上がってエンジニアリング環境を変化させた生成AIのトレンドもひと段落し、今年は落ち着いて技術の基本をしっかりと時間をかけて学ぶのにちょうどよいタイミングかもしれません。 オンライン学習プラットフォーム「Udemy」が11月29日まで実施するブラックフライデーセールと12月1日・2日のサイバーセールでは、対象講座が1講座1,300円からと通常よりもお得に、気になる講座をまとめて購入できるチャンス！ 時間をかけて取り組みたい技術要素や、これから長く役立つであろう技術領域の講座を厳選してご紹介します。 定番から新作・大作まで…

この記事には、Kaigi on Rails 2024 の Day2 に聞いたセッションの感想と記録を書きたいと思います。 kaigionrails.org セッション会場は2つあったのですが、2日目は特にどちらの発表も面白そうでどちらを聞くか悩ましかったです。 また、発表の中で、1日目や他の方の発表内容に言及していたりしているのも、おお、繋がっている！！となりました。 （ イベントで思ったことと、Day1 のセッションについては別記事を書いています） 作って理解する RDBMSのしくみ Cache to Your Advantage: フラグメントキャッシュの基本と応用 基本：フラグメントキャ…

Rails のアセットパイプラインについてまとめました。 この記事は以下の構成になっています。 アセットパイプラインとは アセットパイプラインが行うこと アセットパイプラインの仕組み アセットの管理 CSS JavaScript 画像 開発環境と本番環境での違い 前提として Rails7 のアセットパイプラインについて解説しています。 アセットパイプラインとは アセットパイプラインは Rails で CSS、JavaScript、画像などのアセットファイルを圧縮したり、まとめたりして効率的に管理するための仕組み。 Rails7 ではデフォルトで導入されており、無効にする場合はrails new…

Webpackを使用せずに、DjangoプロジェクトでJavaScriptをモジュール化し、効率的に管理・読み込む方法について説明します。 以下の方法では、ネイティブのES6モジュール機能を活用し、複数のJSファイルを効率的に管理しつつ、{% static %}タグの使用を最小限に抑えることができます。 ES6モジュールを使用する 現代のブラウザはネイティブでES6モジュールをサポートしており、<script type="module"> を使用することで、モジュールのインポートとエクスポートが可能です。 これにより、Webpackなどのバンドラーを使用せずにモジュール化されたJavaScri…

※本記事は、ChatGPTによる意訳+翻訳を活用し、文章に手を加えたものです ※元記事を見て、内容がズレていないか査読するようにしています。 ※感想は、オリジナルです。 原文 意訳+要約 フロントエンドの現状2024 チームとテクノロジー チーム構成 フレームワーク ライブラリ データ ホスティング 継続的インテグレーション マイクロフロントエンド パッケージマネージャ 開発者とユーザーエクスペリエンス TypeScript ブラウザ技術 プログレッシブウェブアプリ デザインシステム スタイルツール テスト コード管理 ローコード/ノーコード 構築ツール オペレーティングシステム トレンドと将…

既存のRailsアプリにReactを導入しようとreact-rails gemのドキュメントにしたがって進めていたのですが、途中でエラーに詰まって断念しました。 一連の手順を始める前の状態のdevelopブランチに戻り、そこから新たにブランチを切ってやり直そうと思いました。 しかし、node_modulesディレクトリ内にはnpmパッケージと見られるファイル群があり、public/pack/jsディレクトリにはmanifest.jsやapplication.jsが残っていました。 さらにmanifest.jsの中身を確認してみると、例外処理が書いてあります。 これらがいつどのタイミングで作られ…

こちらのドキュメントを見ながら、既存のRailsアプリにReactの導入を試みています。 https://github.com/reactjs/react-rails/blob/master/docs/get-started.md Railsにshakapackerをインストール yarnでReactをインストール まで完了したのですが、ビューでコンポーネントを表示するところでつまずきました。 ActionView::Template::Error (Shakapacker can't find application.js in /Users/username/sample_app/publ…

こちらの2つの記事を参考にやってみます。 既存Railsアプリに後からReactとTypeScriptを導入する - もふもふ技術部 qiita.com $ rails webpacker:install:react Unrecognized command "webpacker:install:react" (Rails::Command::UnrecognizedCommandError) Webpackerをインストールしていないのが原因だと予想しました。 Webpackerをインストールして再度実行しましたが、これらのメッセージが出ました。 $ bundle exec rails we…

社内AIに描いてもらったVue Fes Japan 2024のイメージ図 初めまして、プロダクト開発本部の渡辺と申します。 kickflowに入社して数ヶ月が経ちました。 日々の業務で多くのことを学び、充実した毎日を送っています。 今回は「Vue Fes Japan 2024」というカンファレンスに参加したので、そのレポートをまとめようと思います。 kickflowもスポンサーとして協賛しており、当社ではフロントエンドにNuxt 3を使用しているため、今回のカンファレンスは多くの学びが得られると期待していました。

こんにちは、毎日10度のビジネス鬱と戦ってすっかり消耗してます。。 今年もよろしくお願いします。 (adsbygoogle = window.adsbygoogle || []).push({}); 今年のテック系のツイート記録 1月 どうやらJulia言語をWindows環境で触っていた模様。でもこのPCは今は長男が使っている。 正月休みにthree.js久しぶりに触ってwebpack使うことが前提になってるらしいことを知るなど。あと、ついにrustのマスコットキャラの3dモデルがGitHubに上がっていた事を知った— kjunichi (@kjunichi) 2024年1月4日 久しぶりに…

Conditional Exports とは package.json 内の exports フィールドには, 以下のように条件付きでエクスポートするファイルを指定できる (conditional exports). { "name": "@susisu/example", "type": "module", "exports": { ".": { "require": "./lib/index.cjs", "default": "./lib/index.js" } } } たとえばこの例では CommonJS ファイル内から require("@susisu/example") のように参照…