Rails: Sprockets->Propshaftアップグレードガイド（翻訳）｜TechRacho by BPS株式会社
概要 MITライセンスに基づいて翻訳・公開いたします。 英語記事: propshaft/UPGRADING.md at main · rails/propshaft 原文更新日: 2023/12/12（c2a87b5） ライセンス: MIT 2022/07/14: 初版公開 2023/10/18: 更新 2024/02/21: 更新 Propshaftの適用範囲はSprocketsよりも狭いので、SprocketsからPropshaftへの移行にはjsbundling-rails gemとcssbundling-rails gemも利用する必要があります。本ガイドでは、プロジェクトがRails 6.1以後の以下の規約に沿っていることを前提としています。 JavaScriptのバンドルにwebpackerを利用している CSSのバンドルにsass-railsを利用している アセットのダイジェ
Rails 7.0でアセットパイプラインはどう変わるか | Wantedly Engineer Blog
Rails 7.0ではフロントエンドサポートが刷新されます。新たなライブラリが多数導入され、選択肢が増えるため、「Rails公式のものを選べばOK」という戦略が通用しなくなります。 本稿では、Railsでフロントエンドを書くための選択肢について、その歴史と実装を踏まえて比較検討します。 結論から言うと(まだアルファ版なので今後も状況が変わる可能性はありますが、) 新規アプリケーションではSprocketsの役割は無くなりそうです。新しいライブラリとして Propshaft, importmap-rails, jsbundling-rails, cssbundling-rails が登場し、主要な選択肢として以下が提供されます。 (各ライブラリの詳細については後述します) Propshaft + importmap-railsデフォルトの選択肢。Node.jsが不要。トランスパイルを含め、複
WebpackerでJavaScriptを使ってハマった話 - sasaboの生活
これは フィヨルドブートキャンプ Part 2 Advent Calendar 2020の5日目の記事です。 前日はjune29さんの成長の早いジュニア・ソフトウェアエンジニアの特徴でした。 Part1もありますので是非ご覧ください。 フィヨルドブートキャンプ Part 1 Advent Calendar 2020 自己紹介 はじめましての方もいらっしゃると思いますので改めて自己紹介しておきます。sasaboといいます。 今年の3月からフィヨルドブートキャンプというプログラミングスクールに通い10月より受託開発を行う会社にWebエンジニアとして就職しました。 今のところ元気よくエンジニア生活を送っています。 このブログは実務未経験の元自動車会社勤務のサラリーマンがエンジニアとして生活する様子を綴ったブログです。 いつもは技術的なことは書いておらず 「本当にこいつはエンジニアなのか？」とそろ
コラム - Ruby on Rails 海外事情コラム | 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？｜CTC教育サービス 研修/トレーニング
CTC教育サービス・ホーム ＞ コラム ＞ Ruby on Rails 海外事情コラム ＞ 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？ [IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes 第57回 なぜRails 6にはWebpackerとSprocketsの両方が含まれているのでしょうか？ (野田貴子) 2020年6月 こんにちは。アプリケーションを作るときには、様々な技術の取捨選択を行いますよね。たとえば、フロントエンドの実現に使う技術（React、Vue、Angular、jQueryなど）の選択です。私も、これまでに何度も何度も類似技術の調査をして、比較表を作り、上司やチームメイトに提案してきました。その度に、「すでにどこかに要
webpackerでデフォルト以外のenvironmentを使いたい場合 - おもしろwebサービス開発日記チラシの裏
"environment"が指すものがRAILS_ENVとNODE_ENVの2つあり、かつwebpackerはその両方を利用するのでわかりづらい。 config/webpacker.yml RAILS_ENVに対応したキーの設定を使う config/webpack/*.js NODE_ENVに対応したキーのファイルを使う。のだけど注意点がある。 例えばNODE_ENV=stagingのときにはconfig/webpack/staging.jsを使う。その中で次のようにしていたとする。このとき、変数environmentに入るのはwebpackerがproduction用に用意した設定になる。 const environment = require('./environment') module.exports = environment.toWebpackConfig() これは、webp
Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 前編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to write Javascript in Rails 6 | Webpacker, Yarn and Sprockets 原文公開日: 2019/12/13 著者: Younes SERRAJ サイト: CapSens -- フランスのFinTech系Web開発会社です タイトルは内容に即したものにしました。画像は元記事からの引用です。 2020/01/16: 初版公開 2021/05/13: 更新 皆さんはアセットやJavaScript周りの変更で消耗してませんか？npm、Babel、ES6、Yarn、Webpack、Webpacker、Sprockets、これらのどこがどう違うのかさっぱりわからなかったりしますか？ Rails 6アプリケーションでJavaScriptエコシステム全体がどのように機能しているかという
Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいのです - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。Rails で webpack を使うためのシンプルな gem を作ったのでそれについて紹介します。 Webpacker Rails で webpack を利用した Web フロントエンドの環境を作る場合、最近では Webpacker が選択されることが多いでしょう。Rails 6 からは Webpacker が標準になることもあり、この流れはますます加速すると思われます。 私自身もこれまでいくつかのプロジェクトで Webpacker を利用してきました。Webpacker は webpack を Rails から簡単に利用でき非常に便利なのですが、使っているうちにいくつか不満な点がでてきました。 一番大きい問題として Webpacker が @rails/webpacker という npm パッケージに webpack の設定を隠蔽し、Webpac
Webpackerを導入してから外すまでをふりかえる - 弥生開発者ブログ
こんにちは、@mugi_unoです。 MisocaでjQuery製のフロントエンドコードを書き換え続けていた結果、技術書典6に参加することになりました。現在必死で書いております。 farewell_webpacker さて、先日とあるブランチがmasterにマージされ、リリースされました。 farewell : ごきげんよう！、さらば！ farewellの意味・使い方・読み方 | Weblio英和辞書 farewell_webpacker です。 長い間フロントエンドのビルドにはRailsのGemであるWebpackerを使ってきましたが、現在は完全に依存を外しており、純粋なwebpackビルドを行う形に書き換えました。 正直なところ、フロントエンド界隈からは否定的な意見を聞くことも多いWebpackerですが、実際にある程度の期間プロダクションで利用してみて、良いところも辛いところも両方
【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報｜TechRacho by BPS株式会社
こんにちは、hachi8833です。 Rails 5のWebpackerでつらみを踏まないために、公式のWebpackerドキュメントの要点をまとめてみました。追加情報がありましたら今後も更新したいと思います。 rails/webpackerより 公式のドキュメントが分散しているのと、mdファイル名から内容が推測しにくくて見通しがよくないので、ファイルの並びを再編成して概要を一覧できるようにしました（せめてファイル名の頭に番号でも振ってくれれば...）。具体的な設定方法についてはリンク先をご覧ください。 ⚓概要 ドキュメントリポジトリ: rails/webpacker/tree/master/docs -- mdが16ファイルあります。本記事ではこちらのみを扱います。 上のドキュメントリポジトリの最終更新日: 2018/04/23 更新や誤りにお気づきの方は@hachi8833までお知らせ
Devtool | webpack
This option controls if and how source maps are generated. Use the SourceMapDevToolPlugin for a more fine grained configuration. See the source-map-loader to deal with existing source maps. devtoolstring = 'eval' false Choose a style of source mapping to enhance the debugging process. These values can affect build and rebuild speed dramatically. devtoolperformanceproductionqualitycomment
Webpacker 3.0 でのWebpackの設定カスタマイズ - upinetree's memo
Webpacker 3.0 以降ではWebpackの設定を直接書かずに、npmモジュールに定義されるデフォルトを上書きする形になった。 いい感じにデフォルトがそのまま使えて楽になった反面、すでに設定を結構いじったりしている場合にバージョンアップをするのがちょっと面倒だった。 カスタマイズの基本的な方法はドキュメントに書いてある。 https://github.com/rails/webpacker/blob/v3.0.1/docs/webpack.md が、書いてあること以外で考えたことを以下にメモ。 環境ごとにPlugin設定の一部を上書き // config/webpack/production.js const environment = require('./environment'); const UglifyJsPlugin = environment.plugins.get(
sourcemap を無効化して webpacker の production build を 2000% 速くする - Qiita
TL;DR プロダクションで sourcemap が有効化されていたので、関連オプションを切って回ったら 2000% 高速化した。 問題 NODE_ENV=production bundle exec rake webpacker:compile が致命的に遅かった。 エントリーポイントが17個でビルド時間が合計680s という有様で、プロダクションとはいえ デプロイ を11分遅くさせるのは、ビジネス的に致命的な感じだった。 調査 さしあたり、いつもの経験則で uglify の mangle オプションが遅いんだろう、と思って、webpacker のソースの設定を見に行ったら、うん？？？？となる設定をみつけた。 this.plugins.set('UglifyJs', new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compre
Webpackerをやめるならwebpack_manifestというgemが便利、という話
先日、社内のSlackでpixivさんのブログ記事 今日から簡単！Webpacker 完全脱出ガイド がシェアされてて、『あっ、これは...弊社でもやったやつではないか。』とおもいました。Webpackerは便利なんですけどね。 本記事はこのpixivさんのポストを受けて WebpackManifest というgemを紹介します。 ラクスルでのWebpackerを辞めた経緯 もともとWebpackerを使った管理画面プロジェクトがあった そこにECサイトも乗せるようなった package.jsonは管理画面、ECサイトで分けて管理したかった Webpackerは1個のpackage.json、1個のwebpackコマンド、1個のmanifest.json前提の作りなので、package.json分けて複数のwebpackビルド処理系を作りたいラクスルの用途に合わなかった => 脱Webpa
今日から簡単！Webpacker 完全脱出ガイド - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
Rails 5: Webpacker公式README -- Webpack v4対応版（翻訳）｜TechRacho by BPS株式会社
本READMEの他に、以下のWebpacker公式ドキュメントの歩き方記事もどうぞ。これら2本で、Webpackerの公式ドキュメントは概観できるかと思います。次は公式のユースケースが欲しいです🍰🍵。 【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報 概要 MITライセンスに基いて翻訳・公開いたします。 READMEリポジトリ: webpacker/README.md at master · rails/webpacker 原文更新日: 2018/05/18 ライセンス: MIT 更新や誤りにお気づきの方は@hachi8833までお知らせください。 Webpackerを用いることで、JavaScriptのプリプロセッサ兼バンドラーであるwebpack 4.x.x+を簡単に使えるようになり、アプリ的なJavaScriptをRailsで管理できます。Webpa
Rails 5.1を使うならSprocketsは捨ててwebpackを使おう - Qiita
やりたいこと es6を使う。coffee scriptとはサヨナラ〜 bootstrapを使う。 bootstrap datetimepickerを使う。（追記） font-awesomeを使う。 webpackでjs、css（scss、sass)ファイルを管理する。 bootstrapはjqueryに依存しているので、jqueryも設置します。 jqueryに依存してないbootstrap.nativeもあるが、既存の資産でjqueryを使うところが多いので、しばらくはjqueryとes6を共存した方がいいと思いました。 作業者がjqueryには慣れているが、es6には慣れてないことも１つの理由です。 bootstrap datetimepicker（追記：2017年12月20日） bootstrap datetimepickerを使う場合は、Eonasdanのbootstrap dat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nikushi/minipack: Minipack, a gem for minimalists, which can integrates Rails with webpack. It is an alternative to Webpacker.