Webpacker の webpack.config.js を見る…つもりだった話/Toyamarb#35LightningTalk_WebpackerConfigShower

Toyama.rb#35 年末LT大会 でしたLTスライド。
Webpacker 内部にある webpack.config.js を出力したかったが、見え過ぎちゃって困った話。

Transcript

1. Webpacker の Webpacker の webpack.config.js を見る… webpack.config.js を見る… つもりだった話 2018-12-08 Toyama.rb #35 年末LT 大会 @muryoimpl
2. 名前: 無量井 健( むりょうい けん) @kunitoo の同僚で、金沢でフルリモート勤務中 Toyama.rb は 2 回目の参加 です 最近は *.rb というより、*.js を書くことが多い 自己紹介 自己紹介
3. Webpacker の Webpacker の webpack.config.js を見る… webpack.config.js を見る… つもりだった話
5. Ruby on Rails に組み込める gem sprockets と連携しつつ、webpack を使うことができる Rails とともにモダンな JavaScript libraries/framework を使 って開発ができるようになる Webpacker とは Webpacker とは
6. Ruby on Rails が提供してくれているいい感じのデフォルト値 がどんなものなのかわかりにくい 内部で npm package を経由しているので Ruby だけ見てもわ からない プログラマブルな書かれ方をしているので、脳内で組み立てな いと全体がわかりにくい Webpacker の気になるところ Webpacker の気になるところ
7. なので、 なので、 さくっと見れるものが さくっと見れるものが 欲しくなるじゃないですか 欲しくなるじゃないですか
8. なので、やってみた なので、やってみた
9. webpacker_config_shower webpacker_config_shower という gem を作りました という gem を作りました https://rubygems.org/gems/webpacker_config_shower https://rubygems.org/gems/webpacker_config_shower
10. 結論 結論
11. 見えすぎて困った 見えすぎて困った
12. $ bin/rails webpacker:config:show { "output": { ... "publicPath": "/packs/", "pathinfo": true }, "resolve": { "extensions": [ ... ] }, ... "entry": { ... }, ... "plugins": [ { "keys": [ "GREP_COLOR", "CLOUDSDK_PYTHON", "ZPLUG_CACHE_DIR", ... "BUNDLER_ORIG_BUNDLE_BIN_PATH", "BUNDLER_ORIG_RB_USER_INSTALL",
13. webpack の plugin 部分などのオブジェクトが記載されている 箇所が 展開されて 表示されてしまう… 設定がclass として表現されているから？そのまま表示は厳し い？ これはおとなしくwebpacker のpackage/environments を 見るしかないのか… おわかりだろうか… おわかりだろうか…
14. https://github.com/muryoimpl/webpacker_config_shower rails plugin new webpacker_config_shower railtie を Rails::Engine を継承したものに変更(Rake ファイル ロードのため) webapcker で内部コマンドを実行する Runner を継承して node コマンドを実行する Gem としてやったこと Gem としてやったこと
15. require 'webpacker' require 'webpacker/runner' require 'open3' module WebpackerConfigShower class Runner < ::Webpacker::Runner def self.run(argv) ENV["NODE_ENV"] ||= Rails.env super end def run cmd = [ "node", "-e", *[ "const conf = require('#{@webpack_config}')", "const { format } = require('util')", "console.log(format('%j', conf))", ].join(';') ] Dir.chdir(@app_path) do _, stdout, _ = *Open3.popen3(*cmd) puts JSON.pretty_generate(JSON.parse(stdout.read)) end end