{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/how-to-use-webpack-with-middleman/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"e15915e6-a99b-5a0e-a7f0-c880cac3612a","excerpt":"こんにちは。 当ブログはMiddlemanにて運用しているのですが、検索機能や遅延ロードなどで実装したJavaScriptのビルドにはAsset pipelineなどは使わずにwebpackでビルドしています。 Rails5.1が今betaで出ていますね。中でも目玉はwebpacker.gem…","html":"

こんにちは。
\n当ブログはMiddlemanにて運用しているのですが、検索機能や遅延ロードなどで実装したJavaScriptのビルドにはAsset pipelineなどは使わずにwebpackでビルドしています。

\n
\n

Rails5.1が今betaで出ていますね。中でも目玉はwebpacker.gemによるモダンなフロントエンド開発がRailsに導入されることでしょう。\n今までのRailsのasset pipelineとは別に、yarnによって依存性を管理しwebpackで結合する独立したjsのビルドシステムがサポートされます。\nこれによって、以下のような従来のasset pip

\n

— Rails5.1から導入されるwebpacker.gemは本当にRailsのフロントエンド開発に福音をもたらすのか? - Qiita

\n
\n

つまりレールズはなんでもレールズの一部として歪な形で取り込むのをやめろ pic.twitter.com/oRxC56jEWu

— null (@yuroyoro) 2017年2月15日
\n\n

私も同意で、Railsはあくまでサーバサイドアプリケーションで、今まで対してフロントに気を使ってこなかったのだから、中途半端に内部に組み込むのやめてくれ派です。
\nMiddlemanはRailsのビュー層の部分だけ持ってきたようなものなので、当然同じ問題が発生します。

\n

ということで、MiddlemanとWebpackが共存できる妥協点を探って、実際にこのブログに取り入れてみた結果を残します。

\n\n

完成品

\n

このブログのリポジトリに上げてあります

\n

config.rbはこちら、\npackage.jsonはこちら、\nwebpackの設定はこちらから確認できます。

\n

参考

\n
\n

— Using Webpack with Middleman - rossta.net

\n
\n

探していたらちょうど目的に合う記事を見つけました。
\nこの記事の通りexternal_pipelineという拡張を利用します。

\n

external_pipelineってなに

\n
\n

ここ数年で, コミュニティは Rails から離れ NPM のタスクランナー (gulp, Grunt) や依存管理 (Browserify, webpack), 公式ツール (EmberCLI, React Native) やトランスパイラ(ClojureScript, Elm) に焦点を 合わせるようになりました。\nMiddleman はこれらすべてのソリューションや言語に対応することはできません。 そこで私たちはこれらのツールが Middleman の中で動作できるようにすることにしました。 この機能は external_pipeline (外部パイプライン) と呼ばれ, Middleman の 複数のサブプロセスで動作します。一時フォルダにコンテンツを出力し Middleman の サイトマップに取り込むことで実現しています。

\n

— Middleman: 外部パイプライン

\n
\n

webpack.gemのようなものではなく、きちんと棲み分けされたツールだと思います。

\n

ブログに適用

\n

この機能を利用したconfig.rbの記述はこんな感じです。

\n
activate :external_pipeline, {\n  name: :webpack,\n  command: build? ?\n    \"NODE_ENV=production npm run build\" :\n    \"NODE_ENV=develop npm run develop\",\n  source: \".tmp/dist\",\n  latency: 1\n}
\n

build?はmiddleman buildした時だけtrueになります。
\n普段ローカルで確認する時はいちいちゼロからビルドされると遅いのでwatchを入れてます。

\n

ビルドしてみる

\n

middleman buildしてみた時のキャプチャです。

\n

\"middleman

\n

このように、middleman build時にwebpackのビルドが走り、実行完了を待ってから次の処理へ進む、という挙動になっています。
\nということで、Middlemanにwebpackを導入できました。

\n

Middlemanでサイトを作っているものの、フロントの資源管理に悩まれている時はぜひ検討してみてください。

","timeToRead":4,"frontmatter":{"title":"MiddlemanのビルドにWebpackを組み込む方法","tags":["Middleman","webpack","JavaScript"],"date":"August 15, 2017","featuredImage":null}}},"pageContext":{"slug":"/how-to-use-webpack-with-middleman/","previous":{"fields":{"slug":"/report-builderscon-2017/"},"frontmatter":{"title":"Builderscon tokyo 2017に行ってきた","tags":["Builderscon","カンファレンス"]}},"next":{"fields":{"slug":"/implement-site-search-with-algolia/"},"frontmatter":{"title":"Algoliaを利用してMiddleman製サイトに検索機能を実装する","tags":["Algolia","JavaScript","Ruby","Middleman","React","Almin","DDD"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}