inject 機能について
Mix の設定で、sass や js メソッドを使っている場合に利用できます。
mix
.setPublicPath('public')
.sass('resources/sass/vendor.scss', 'public/css')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/app.js', 'public/js')
.ejs('resources/ejs/**/*.ejs', 'public', {
basePath: 'resources/ejs',
ignore: ['**/_*.ejs'],
inject: true,
})Mix にパブリックパスを指定しないと、/public/js/app.js というふうにリンクが張られてしまうので、setPublicPath で書き出し先フォルダを設定します。
次に、EJS ファイルを作成します。
<!DOCTYPE html>
<head>
<title>inject test</title>
</head>
<body>
<p>inject test</p>
</body>inject 機能を利用する場合は、このように head・body の開始タグと終了タグを省略せずに明記します。これで Mix を動かすと、自動でアセットへのリンクが張られます。
<!DOCTYPE html>
<head>
<title>inject test</title>
<link href="/css/vendor.css" rel="stylesheet"><link href="/css/app.css" rel="stylesheet"></head>
<body>
<p>inject test</p>
<script type="text/javascript" src="/js/app.js"></script></body>上記 Mix 設定では、Sass が2つ、JS が1つ変換されますが、その数だけ link 要素や script 要素が埋め込まれているのが分かります。
ベンダーファイルを抽出する場合
Mix の extract メソッドを使うと、ベンダーライブラリを vendor.js にまとめて、変更のないコードを再度ダウンロードさせるのを防ぐことができます。
この場合、manifest.js, vendor.js, app.js をこの順番で全て読み込む必要がありますが、inject はこれにも対応しています。
試しに Vue.js をインストールし、extract メソッドで抽出してみます。
$ npm i vueMix の設定で、extract に抽出するパッケージ名の配列を渡します。
mix
.setPublicPath('public')
.js('resources/js/app.js', 'public/js')
.extract(['vue'])
.ejs('resources/ejs/**/*.ejs', 'public', {
basePath: 'resources/ejs',
ignore: ['**/_*.ejs'],
inject: true,
})
.browserSync({
files: ['public/**/*'],
server: 'public',
proxy: false,
});EJS を作って、簡単な Vue を試してみます。
<!DOCTYPE html>
<head>
<title>extract test</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>app.js で vue を require し、インスタンスを作ってみます。
const Vue = require('vue');
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
})これでコンパイルすると、app.js は 16.5 KiB、vendor.js は 329 KiB となっているので、Vue 本体が vendor.js に抽出されているのは明らかです。
出力された HTML を見てみると、正常に inject されています。
<!DOCTYPE html>
<head>
<title>extract test</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript" src="/js/manifest.js"></script><script type="text/javascript" src="/js/vendor.js"></script><script type="text/javascript" src="/js/app.js"></script></body>/vuetest にアクセスして Hello Vue! と表示されていれば、Vue が動作しています。
終わりに
当初は glob と mix.webpackConfig を使って EJS を書き出しており、その設定の書き方を記事にしようと考えていました。しかし、Mix を拡張できることが判明し、どうせならと ejs メソッドを作ったことで、記事の内容がガラリと変わってしまいました。
今回のコンポーネントを作るにあたっての紆余曲折や挫折したことなども記事にしてみたいと考えているので、興味のある方はそちらも読んでいただければと思います。
参考サイト
- Extending Mix
https://laravel-mix.com/docs/4.1/extending-mix - webpackで静的サイトジェネレータ(EJS編)
https://qiita.com/kn1cht/items/d3fcd3376ab3461bf05a - 【glob】ignoreで除外ファイルを指定
https://chuckwebtips.hatenablog.com/entry/2016/04/15/000000
