jtk

WordPress に Vue.js を スモールスタートで入れてみる その1

とあるサイトでVue.jsで作っていて、公開してからもろもろやったことをまとめようと思ったのですが、年内公開も怪しくなってきたので今の段階でメモしておこうとおもいます。

f:id:jotaki:20190212100544p:plain

概要

WordPress を使った既存サイトがあり、リニューアル版は WordPress を残しつつ、REST API と Vue.js 使って組めるところは組んでみようというたくらみでした。
Vue.js を実案件で勉強したかったのが大きな理由で、残りは高速化など自分で触ってみてどこまでできるかを知りたかったためです。

WordPress と Vue.js と組み合わせ方

設計段階でどの箇所にVue入れるかもそうですが、そもそもの入れ方が分からなかったので色々なGitHubリポジトリをみました。

みてみてると、

的なふたつがあるようでした(表現合っているかわかりませんが)
参考: Vue.js と WordPress の 付き合い方について考えてみた - Qiita

SPA方式

index.php<div id="app"></div> だけ用意して、ルーティングはVue Routerなどを使って書いていく方法

スタンドアロン方式

front-page/page/archive/single.php など、各ページテーマテンプレートファイルは用意しつつ、箇所箇所でVue.jsを使う(Axios経由でAPI取得=>出力)方法

これもどこかのリポジトリを参考にした気がするのですが失念してしまいました..
ただ色々記事みたり触ってみて、スモールスタートで小規模なところから使っていくやり方が良いと思い今回はこちらを採用しました。

ファイル構成

今回webpackを使って、リポジトリ内のファイル構造的には

.
├── node_modules
├── package.json
├── webpack.config.js
│
├── src
│   ├── js
│   │   ├── app.js
│   │   ├── variable.js
│   │   ├── page
│   │   │   └── *.vue
│   │   └── component
│   │   │   └── *.vue
│   │   └── function
│   │       └── *.vue
│   └── scss
│       ├── app.scss
│       ├── foundation
│       │   └── _*.scss
│       ├── layout
│       │   └── _*.scss
│       └── object
│           └── _*.scss
│
└── themes
    ├── _assets
    │   ├── img
    │   │   └── *.jpg
    │   ├── js
    │   │   └── bundle.js
    │   └── css
    │       └── app.css
    ├── _inc
    │   └── *.php
    ├── functions.php
    ├── header.php
    ├── footer.php
    ├── index.php
    └── ...

になりました。
src/ 内の app.jsscss/ 内の app.scss
テンプレートいじる必要があるときは themes/ 内の *.php を直接いじる

webpack 設定

展開する

const TerserPlugin            = require('terser-webpack-plugin');
const MiniCssExtractPlugin    = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const VueLoaderPlugin         = require('vue-loader/lib/plugin');

// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = 'production';

// ソースマップの利用有無 production or development (productionのときはソースマップを利用しない)
const enabledSourceMap = (MODE === 'production');

module.exports = {
  name: "app",
  externals: {
    Vue: "Vue"
  },
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: MODE,
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: {
    "app": './src/js/app.js'
  },
  // ファイルの出力設定
  output: {
    // 出力ファイルのディレクトリ名
    path: `${__dirname}/themes/_assets/js`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  // CSS minify と sourceMap の出力のための設定
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        sourceMap: true,
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
            annotation: true,
          }
        }
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            // Babel を利用する
            loader: 'vue-loader',
          }
        ]
      },
      {
        // .js の場合
        test: /\.js$/,
        use: [
          {
            // Babel を利用する
            loader: 'babel-loader',
            // Babel のオプションを指定する
            options: {
              presets: [
                // プリセットを指定することで、ES2018 を ES5 に変換
                '@babel/preset-env'
              ]
            }
          }
        ]
      },
      // Sassファイルの読み込みとコンパイル
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        use:
          [
            // CSSファイルを書き出すオプションを有効にする
            {
              loader: MiniCssExtractPlugin.loader,
            },
            // CSSをバンドルするための機能
            {
              loader: 'css-loader',
              options: {
                // オプションでCSS内のurl()メソッドの取り込みを禁止する
                url: false,
                // ソースマップの利用有無
                sourceMap: enabledSourceMap,

                // 0 => no loaders (default);
                // 1 => postcss-loader;
                // 2 => postcss-loader, sass-loader
                importLoaders: 2
              }
            },
            {
              loader: 'sass-loader',
              options: {
                // ソースマップの利用有無
                sourceMap: enabledSourceMap,
              }
            }
          ]
      }
    ]
  },
  // 完全ビルドされたVue.jsを読み込むように変更
  // ref: https://aloerina01.github.io/blog/2017-03-08-1
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    // CSSファイルを外だしにするプラグイン
    new MiniCssExtractPlugin({
      // ファイル名を設定します(output.path から見た階層)
      filename: './../css/app.css',
    }),
    // Vue loader プラグイン
    new VueLoaderPlugin()
  ]
};

こんな感じで開発環境は完了
次回は .vue でやったこと中心に書いていきます。