ES6＋jQueryで書いたLaravelアプリのフロントエンドをIEに対応させるために行ったこと
..
こんなことやってたら、当然ながらIE対応の作業をやらなきゃいけないことになりました。webpackのことは全然わかりませんが、Laravel Mixのおかげでサクッとバベることができたので備忘録を残します。今後同じようなことをする人の参考になればと思います。
※けっこうレガシーな現場で働いているので、いろいろ古めかしい話が出てきます。適宜読み替えていただけると幸いです
使うもの
Laravel Mix：Laravelが標準でサポートしているパッケージ。webpackを超使いやすくしたもの
npm：jsライブラリのバージョン管理ツール。Node.jsと抱き合わせでインストールする。
環境
- フレームワーク：Laravel8
- フロントエンドライブラリ：jQueryその他
- ローカル環境：XAMPP
jQueryなどのUI系ライブラリは、マークアップ担当の人が圧縮したソースを静的ファイルと一緒にプッシュしているので、それをLaravelのpublic配下へ貼り付けて使っています。
トランスパイルまでの手順
PCにnpmが入っていなければNode.jsをインストールする
https://nodejs.org/ja/ 公式HPからGUIのインストーラで落とせます。
ぼくの現場ではローカルの開発環境にXAMPPを使っており、コマンドを伴う作業はXAMPPのターミナルで行っています。今回は/xampp/htdocs配下にインストールしました。
Laravelで生成されているwebpack.mix.jsの中身をこのようにする
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
*/
mix // babelメソッドでトランスパイル、public配下へ出力する
.babel([
'resources/js/ims.js', // 第一引数は配列にする
'resources/js/script.js'
], 'public/js/app.js') // 変換後の出力先
.sourceMaps();
マークアップ担当の人がビルド＆圧縮済みCSSをプッシュするので、Laravel担当側ではコンパイルする必要はありません。なので使うのはbabelメソッドだけです。
同じようにBootStrapやjQueryなどもインストールする必要がないので、package.jsonからそれらを削除します。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": { // jQuery、bootstrapは削除
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^4.0.0",
"sass": "^1.15.2",
"sass-loader": "^8.0.0"
}
インストール実行
"laravel-mix":は標準で記載されているのでこのままインストール。
npm install
現在インストールされているライブラリはnpm lsで確認します。
依存先を含めず、直下のものだけ確認したいときは--depth=0オプションを付けます。
+-- axios@0.21.1
+-- laravel-mix@6.0.25
+-- lodash@4.17.21
+-- popper.js@1.16.1
+-- postcss@8.3.5
+-- resolve-url-loader@4.0.0
+-- sass@1.35.1
`-- sass-loader@8.0.2
これでlaravel-mixが確認出来たらOK。
resourceに書いたJSをビルドする
npm run dev
開発環境向けにビルドするコマンドです。
babelメソッドによって、ES5の構文へのトランスパイルと/public/js/app.jsへの配置が行われます。
ポリフィルでIEに対応する
Array.prototype.findメソッドなど、ES6以降に追加された仕様はIEに対応していないので、CDNからポリフィルを呼んで対応します。
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
?features=以降で、どのメソッドのポリフィルを使うか指定してファイルサイズを最適化することもできます。とりあえず"es6"とだけ書けばいいかも。
以上
これだけでES6での開発が実現しました。いったん分かればすごく簡単だった。
Laravel Mixはそれ単体で使えるものなので、どんなプロジェクトでもビルドやトランスパイルが容易になると思います。いいハンズオンになってよかったです。