CakePHP4にWebpack + Vue.jsを導入する

新規プロジェクトでバックエンドにCakePHP、フロントにはVue.jsを採用しようという話になりました。

CakePHPとwebpack+Vue.jsの導入する記事があまり少なかったので、導入する手順を私なりに記載しておきます。

※既にCakePHPはインストールされているものとします。

作成済みのプロジェクトに移動します。

package.jsonの作成

package.jsonの作成をしていきます。

$ npm init

いくつか質問されますが、基本的にはEnterを押して次に進めて問題ありません。

質問をすべて回答するとpackage.jsonが作成されます。

webpackのインストール

webpackをインストールしていきます。

$ npm install –save-dev webpack webpack-cli

vueのインストール

vueをインストールしていきます。

$ npm install –save-dev vue
$ npm install –save-dev vue-template-compiler
$ npm install –save-dev vue-loader

※後ほどbuildを行いますが、そのときに vue-loader”: “^17.~” だと、Cannot find module ‘vue/compiler-sfc’という

エラーが出ました。なので、私は、vue-loader”: “^15.9.8″に下げてインストールしています。

●package.json

“devDependencies”: {
    “vue”: “^2.6.12”,
    “vue-loader”: “^15.9.8”,
    “vue-template-compiler”: “^2.6.12”,
    “webpack”: “^5.68.0”,
    “webpack-cli”: “^4.9.2”
}

axiosを使用するため、axiosもインストールしておきます。package.jsonにaxiosを追加で入れます。

●package.json

“devDependencies”: {
    “vue”: “^2.6.12”,
    “vue-loader”: “^15.9.8”,
    “vue-template-compiler”: “^2.6.12”,
    “webpack”: “^5.68.0”,
    “webpack-cli”: “^4.9.2”,
    “axios”: “^0.21.4”
}

インストールを実行します。

$ npm install

webpackを実行するためのscriptを記述

buildするために以下を記述します。

※webpackのみのbuildだと、–modeをつけてくれと怒られます。

なので、–mode development,–mode productionを付けておきます。

package.json

  “scripts”: {
    “build”: “webpack –mode development”,
    “build:watch”: “webpack -w –mode development”,
    “build:prod”: “webpack –mode production”
  },

Vueのコンポーネントの作成

基本的にはプロジェクト内であればどこでもよいですが、今回はプロジェクト直下にresourcesを作成し、以下のようにしました。componentsの下に.vueを作成していくようにします。

●resources

resources
    -js
        -app.js
        -components
            -Hoge.vue

●resources/js/app.js

import Vue from ‘vue’
window.axios = require(‘axios’);
 
Vue.component(‘hoge-component’, require(‘./components/Hoge.vue’).default);
 
const app = new Vue({
     el: ‘#app’,
});

●resoures/js/components/Hoge.vue

<template>
    <div class=”message”>
        {{ message }}
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            message: ‘HogeHoge’
        };
    }
};
</script>

その他にtemplate、webrootに必要な記述をしていきます。

●webroot/js/app.js

webroot/jsにapp.jsを作成しておきます。特に記述はいりません。

※npm run buildしたときにoutputされるファイルになります。

●template/Hoge/index.php

<hoge-component></hoge-component>

Contollerも併せて作成しておいてください。

●templates/layout/default.php

<div id=”app”> idにappを付与していきます 。

また、/webroot/js/app.jsは<body></body>の最後に読み込ませるようにしておきます。

<body>
    <div id=”app”>
        <main class=”contents”>
            <?php echo $this->Flash->render(); ?>
            <?php echo $this->fetch(‘content’); ?>
     </main>
    </div>
    <?php echo noh( $this->Html->script([ ‘app’]) ); ?>
</body>

webpack.config.jsの作成

プロジェクト直下にwebpack.config.jsを作成して、以下を記述します。

エントリーポイントは作成した/resources/js/app.jsになります。

build時の出力ファイルが/webroot/js/app.jsになります。

●webpack.config.js

const webpack = require(‘webpack’);
 
module.exports = {
  entry: ‘./resources/js/app.js’,
  output: {
    path: __dirname + ‘/webroot’,
    publicPath: ‘/’,
    filename: ‘js/app.js’
  },
  module: {
    rules: [
        {
            test: /\.vue$/,
            loader: ‘vue-loader’
        },
    ]
  },
  resolve: {
    alias: {
        ‘vue$’: ‘vue/dist/vue.esm.js’,
    }
  }
};

npm run build とコマンドを打ちます。すると、

Module Error (from ./node_modules/vue-loader/lib/index.js):vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

とエラーになりました。Pluginが必要みたいなので以下を記述しておきます。

●webpack.config.js

const webpack = require(‘webpack’);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’); // 追加
 
module.exports = {
  entry: ‘./resources/js/app.js’,
  output: {
    path: __dirname + ‘/webroot’,
    publicPath: ‘/’,
    filename: ‘js/app.js’
  },
  module: {
    rules: [
        {
            test: /\.vue$/,
            loader: ‘vue-loader’
        },
    ]
  },
  plugins: [
    new VueLoaderPlugin() // 追加
  ],
  resolve: {
    alias: {
        ‘vue$’: ‘vue/dist/vue.esm.js’,
    }
  }
};

Babelの導入

.babelrcの作成

プロジェクト直下に.babelrcを作成し、以下を記述します。

.babelrc

{
    “presets”: [
         “@babel/preset-env”
    ]
}

Babelのインストール

$ npm install –save-dev babel-loader @babel/core
$ npm install @babel/preset-env –save-dev

●webpack.config.js

webpack.config.jsにbabelの設定を追加します。

const webpack = require(‘webpack’);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
 
 
module.exports = {
  entry: ‘./resources/js/app.js’,
  output: {
    path: __dirname + ‘/webroot’,
    publicPath: ‘/’,
    filename: ‘js/app.js’
  },
  module: {
    rules: [
        {
            test: /\.vue$/,
            loader: ‘vue-loader’
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: ‘babel-loader’,
                options: {
                    presets: [‘@babel/preset-env’],
                },
            },
        },
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
    alias: {
        ‘vue$’: ‘vue/dist/vue.esm.js’,
    }
  }
};

npm run buildができれば完了です!!!

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL