スポンサーリンク

2016年4月20日

Using webpack with Phoenix-Framework

Goal

  • PhoenixへWebpackを導入する

Dev-Environment

  • OS: Windows8.1
  • Erlang: Eshell V7.3, OTP-Version 18.3
  • Elixir: v1.2.3
    • Phoenix: v1.1.4

Using webpack with Phoenix-Framework

昨日、WebpackをPhoenixへ導入したのですが、
エラーの嵐が起きたので自分が使う最小構成を忘れないための備忘録として残します。
しかしながら、フロントエンドについて私は詳しくないため、
間違えている可能性があります。その点は留意してください。
とりあえず、動かす分には問題ないです。
全体の流れとしては以下のようになります。
  1. 検証用プロジェクトを作成する。
  2. package.jsonを編集する。
  3. brunch-config.jsを削除する。
  4. app.cssをリネームする。(app.css -> app.scss)
  5. npmでwebpackをインストールする。(config/dev.exsも編集する)
  6. npmのパッケージを追加する。(app.scssも編集する)
  7. webpack.config.jsを作成する。
  8. 実行し確認する。

Create Project

検証用のプロジェクトを作成します。
> cd path/to/create/directory
> mix phoenix.new using_webpack
...

Fetch and install dependencies? [Yn] n
...

> cd using_webpack

Edit and delete files

package.jsonを以下のように編集します。

File: package.json

{
  "name": "using_webpack",
  "version": "1.0.0",
  "description": "To start your new Phoenix application:",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "compile": "webpack -p"
  },
  "repository": {
  },
  "dependencies": {
  }
}
brunch-config.jsを削除します。

Example:

> rm brunch-config.js
app.cssファイルをリネームします。

Before: web/static/css/app.css

After: web/static/css/app.scss

Install webpack

npmからwebpackをインストールします。

Example:

> npm install --save-dev webpack
...
Phoenixのconfigファイルを編集します。

File: config/dev.exs

use Mix.Config

# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
# watchers to your application. For example, we use it
# with brunch.io to recompile .js and .css sources.
config :using_webpack, UsingWebpack.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [node: ["node_modules/webpack/bin/webpack.js",
                   "--watch-stdin", "--progress", "--colors"]]

...

Package install

実行に必要となるパッケージをインストールします。
> npm install --save file:deps/phoenix_html file:deps/phoenix
...

> npm install --save-dev babel-loader babel-core babel-preset-es2015
...

> npm install --save-dev css-loader style-loader extract-text-webpack-plugin
...

> npm install --save-dev bootstrap-sass node-sass sass-loader url-loader file-loader
...

> npm install --save-dev copy-webpack-plugin
...
ここら辺は本当に知識がないので、不要なパッケージが入ってないかは検証していません。
現状のpackage.jsonの中身は以下のようになっています。

File: package.json

{
  "name": "using_webpack",
  "version": "1.0.0",
  "description": "To start your new Phoenix application:",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "compile": "webpack -p"
  },
  "repository": {},
  "dependencies": {
    "phoenix": "file:deps\\phoenix",
    "phoenix_html": "file:deps\\phoenix_html"
  },
  "devDependencies": {
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "bootstrap-sass": "^3.3.6",
    "copy-webpack-plugin": "^2.1.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0"
  }
}
app.scssを編集します。
app.scssの1~5行目を削除し、
コメントでbootstrap-sassと記述している部分の追加してください。

File: web/static/css/app.scss

/* bootstrap-sass */
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

/* Space out content a bit */
...

Note:

1~5行目があると何故かコンパイルが通らないんですよね...何ででしょう？
私の環境の構成に問題があるのでしょうか？

Create webpack.config.js

webpack.config.jsを新しく作成し、以下のように編集してください。
コピペでいいと思います。私も内容については何となく程度にしか分かってないです(汗顔の至り)

File: webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  devtool: "source-map",
  entry: [
    "./web/static/js/app.js",
    "./web/static/css/app.scss"
  ],
  output: {
    path: "./priv/static",
    filename: "js/app.js"
  },

  resolve: {
    modulesDirectories: [
      __dirname + "/web/static/js",
      __dirname + "/node_modules"
    ],
    extensions: ["", ".js"],
    alias: {
      phoenix_html:
        __dirname + "/deps/phoenix_html/web/static/js/phoenix_html.js",
      phoenix:
        __dirname + "/deps/phoenix/web/static/js/phoenix.js"
    }
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css")
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style", "css!sass")
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin("css/app.css"),
    new CopyWebpackPlugin([{ from: "./web/static/assets" }])
  ]
}

Let’s “mix phoenix.server”

色々と設定ばかりでしたが、ようやっと実行です。

Example:

> mix phoenix.server
[info] Running UsingWebpack.Endpoint with Cowboy using http on port 4000
Hash:  [1m55c4b6e6e179ce4eac89 [22m
Version: webpack  [1m1.13.0 [22m
Time:  [1m16172 [22mms
                                  [1mAsset [22m        [1mSize [22m   [1mChunks [22m   [1m [22m            [1mChunk Names [22m
                            [1m [32mcss/app.css [39m [22m     153 kB        [1m0 [22m   [1m [32m[emitted] [39m [22m  main
   [1m [32mf4769f9bdb7466be65088239c12046d1.eot [39m [22m    20.1 kB         [1m [22m   [1m [32m[emitted] [39m [22m
  [1m [32mfa2772327f55d8198301fdb8bcfc8158.woff [39m [22m    23.4 kB         [1m [22m   [1m [32m[emitted] [39m [22m
   [1m [32me18bbf611f2a2e43afc071aa2f4e1512.ttf [39m [22m    45.4 kB         [1m [22m   [1m [32m[emitted] [39m [22m
   [1m [32m89889688147bd7575d6327160d64e760.svg [39m [22m     109 kB         [1m [22m   [1m [32m[emitted] [39m [22m
                              [1m [32mjs/app.js [39m [22m    2.38 kB        [1m0 [22m   [1m [32m[emitted] [39m [22m  main
 [1m [32m448c34a56d699c29117adc64c43affeb.woff2 [39m [22m      18 kB         [1m [22m   [1m [32m[emitted] [39m [22m
                          [1m [32mjs/app.js.map [39m [22m    3.54 kB        [1m0 [22m   [1m [32m[emitted] [39m [22m  main
                        [1m [32mcss/app.css.map [39m [22m   88 bytes        [1m0 [22m   [1m [32m[emitted] [39m [22m  main
                            [1m [32mfavicon.ico [39m [22m    1.26 kB         [1m [22m   [1m [32m[emitted] [39m [22m
                             [1m [32mrobots.txt [39m [22m  202 bytes         [1m [22m   [1m [32m[emitted] [39m [22m
                     [1m [32mimages/phoenix.png [39m [22m    13.9 kB         [1m [22m   [1m [32m[emitted] [39m [22m
   [0]  [1mmulti main [22m 40 bytes { [1m [33m0 [39m [22m} [1m [32m [built] [39m [22m
    + 11 hidden modules
Child  [1mextract-text-webpack-plugin [22m:
        + 7 hidden modules
コンパイルエラーなしを確認したら、ブラウザからも実行を確認しましょう。
いつものWelcomeページが表示されていれば問題なしです。

Note:

少し疑問が残りました。

PhoenixではデフォルトでBootstrapを使っているので、
bootstrap-sassパッケージを入れないとbootsrapのディレクトリやファイルがないとエラーが出ます。
しかし、Phoenixがデフォルトで使っているbrunchでは、上記のパッケージを使ってないんですよね。
何れかのパッケージに入っているのか、どこから参照しているのかさっぱり分からないんです。

まぁ、いずれ必要があれば調べます。
フロントエンド周りはさっぱりなので、できれば最小限の知識だけで切り抜けたい...
昨日のAM03:00くらいまでエラーとりしてました。
ここまでコンパイルエラーで止まったの久々です。
誰かの参考になったら、この上ない喜びです＞＜

Bibliography

​
ラベル: , ,

人気の投稿

  • [Elixir]Proxy環境下でElixirを無理やり動かす！
    Proxy環境下でElixirを動かすまでにやったこと 社内の環境だとProxyがあるためうまく動かないことはわかっていた。 時間ができたので、突貫でElixirの仮環境を作成しました。 突貫で作業したので、内容に不備があるかもしれません。 もし問題が発生しましたら、...
  • Rubyのエンコーディングについて
    タイトル：Rubyのエンコーディングについて 目的：Rubyのエンコーディングについての備忘録を作成すること 以下の環境により実施 OS：Windows8.1 Ruby：v2.2.2 x64 ディレクトリ構造： 作業ディレクトリ |-encoding-test....
  • Sinatraで入力フォームのデータを取得する。
    タイトル：Sinatraで入力フォームのデータを取得する。 目的：htmlのinputタグ(テキストボックス)で入力されたデータを取得し表示する。 実施環境： OS：Windows8.1 Ruby：v2.2.2 Sinatra：v1.4.6 Haml：v4.0.6...
  • [Elixir]Streamの使い方を習得する
    Goal Streamの使い方を習得する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 Wait a minute 今回はStr...
  • [Elixir]マップを引数で使う時のパターンマッチの応用
    Goal 関数の引数でマップを使う時、パターンマッチを利用する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 Wait a minu...
  • [Elixir]Cowboy基礎の基礎
    Cowboy基礎の基礎 Goal Elixir+Cowboy(2系)でHello World(text/plain)を表示する PlugからCowboyを使って、起動からリクエストを処理するまでのフローを眺める (Code Reading) Foreword ...
  • Dark-Elixir = NeoVim |> dein.vim(Dark power) |> Mix |> Elixir
    Get Dark-Elixir 期待した人には申し訳ないですが、掲題で書いているほどちゃんとした内容ではありません。 簡単に説明しますと、NeoVim+dein.vim+elixirの開発環境がほしいなーって思ったので、環境構築するだけの記事です。 それと最初に言って...
  • [Elixir+Phoenix]PhoenixからBootstrap3を使う！+今更CSS入門！？
    #目的 Phoenix-FrameworkからBootstrap3を利用する。 CSSの基本/基礎を習得する。(実はCSSをやったことがない) #実行環境 OS： Windows8.1 Erlang： Eshell V6.4, OTP-Version 17.5 ...
  • [Elixir]ファイルの自動生成を行うカスタムタスクを作成する
    Goal ファイルの自動生成を行うカスタムタスクを作成する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.4 Wait a minute...
  • [Elixir]GenServerの基本を習得する
    Goal GenServerの基本を習得する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 Wait a minute プロセス...