スポンサーリンク

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

人気の投稿