Laravel+React(+Redux)の構成を調査

概要

  • laravel で React + Redux 環境はどう作られてるか調べる
    • 後々以下のようにできるか検討したい
      • React + Rredux + webpack + eslint + perritier + Flow
  • 寄り道して調査したので手っ取り早く構築したい方は参考サイトをみてください

artisanでプロジェクトをReactを使用する構成にする

  • Laradockを使用しているのでartisanコマンドはDockerコンテナ内で使用

    • 1
      2
      3
      $ artisan preset react

      Please run "npm install && npm run dev" to compile your fresh scaffolding.
    • npm installと dev コマンドで新しいスカフォールド(土台、足場みたいな意味)をコンパイルしてと言われる

  • yarnが入っているので yarn コマンド使用

    • 1
      $ yarn && yarn dev
    • 割と時間かかります。yarn は npm より早いですが

  • これでどうなるかというと resources/assets 内のソースコードを laravel-mix というモジュールを使ってコンパイルしてくれるよう

artisanのReactスカフォールドはどのようになっているか

  • yarn dev で何が呼ばれているか package.json を見てみると
  • 1
    2
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  • webpackのconfigファイルを呼んでいるよう

  • ちなみに cross-env は環境変数を設定してjsを実行してくれるパッケージ
    • この場合 NODE_ENV に development を代入して webpack を実行
    • webpack を実行する際のオプションとして –progress (進捗をパーセント表示) –hide-modules(モジュールの情報を隠す) が指定されている
  • 呼ばれた webpack の config ファイル

    • node_modules/laravel-mix/setup/webpack.config.js

      • 1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        /**
        * As our first step, we'll pull in the user's webpack.mix.js
        * file. Based on what the user requests in that file,
        * a generic config object will be constructed for us.
        */
        let mix = require('../src/index');

        let ComponentFactory = require('../src/components/ComponentFactory');

        new ComponentFactory().installAll();

        require(Mix.paths.mix());

        /**
        * Just in case the user needs to hook into this point
        * in the build process, we'll make an announcement.
        */

        Mix.dispatch('init', Mix);

        /**
        * Now that we know which build tasks are required by the
        * user, we can dynamically create a configuration object
        * for Webpack. And that's all there is to it. Simple!
        */

        let WebpackConfig = require('../src/builder/WebpackConfig');

        module.exports = new WebpackConfig().build();
      • laravel-mix というモジュールの webpack.conf が呼ばれている

        • laravel-mix は webpack のラッパーでCSSとJSのプリプロセッサをさぽーとしている
        • 以下の記述をみる感じだとTS,CS,Sass,Less,Stylus等をコンパイルしてくれるモジュールのよう
        • 上のconfigで呼ばれている ComponentFactory.jsを見てみると以下の記述がある
        • 1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          let components = [
          'JavaScript',
          'Preact',
          'React',
          'Coffee',
          'TypeScript',
          'FastSass',
          'Less',
          'Sass',
          'Stylus',
          'PostCss',
          'Css',
          'Browsersync',
          'Combine',
          'Copy',
          'Autoload',
          'Version',
          'Extend',
          'Extract',
          'Notifications',
          'DisableNotifications',
          'PurifyCss'
          ];
        • 上の components を installAll というメソッドでインストールしてるっぽい

        • node_modules/laravel-mixディレクトリ内にnode_modulesディレクトリがある
        • node_modules/laravel-mix内のpackage.jsonをみると上記のモジュールが記述されてる

途中で気づいた

  • laravel-mix はあくまで webpack.config とかを細かく設定しなくても楽にバンドルするためのパッケージで、reduxとかその他いろいろプラグインを使いたい場合は向かない気がする
  • 自分でresourcesディレクトリのソースをpublicディレクトリにコンパイルしていった方が便利にフロント環境を使えそう

他のreact + laravel 環境の例を見てみる

結論

  • LaravelのReactスカフォールドは使わずに自分で作る

todo

  • 実際の開発環境構築

参考