LoginSignup
0
0

More than 3 years have passed since last update.

laravel(npm)で追加したjsモジュールを外部のjsで使う

Posted at

laravelはnpmによるjavascriptのモジュールのパッケージングを利用できるが
ソース修正の度にnpm run dev(prod)でコンパイルしなければならないし
画面毎のjsファイルなどを配置したい場合などファイルが複数になる場合、
パッケージングを分けることはできるが、管理がめんどいので外部jsを呼べるようにする。

layouts/app.blade.php@yield('inc-javascript')を追加
あと、jsの読み込みはすべてdeferをつける。

layouts/app.blade.php
<html>
...
<head>
...
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>
  @yield('inc-javascript')

...
</head>

各ページのbladeファイルで@section('inc-javascript')でjsファイルを指定する

index.blade.php
@extends('layouts.app')
@section('inc-javascript')
<script src="{{ asset('/js/hogehoge.js') }}" defer></script>
...
@endsection

app.js内のモジュールをを使う

resources/js/bootstrap.jsでrequireする。
必要ならグローバル変数に格納する。

bootstrap.js
require('moment');
globals.moment = require('moment');
window.moment = require('moment');
var moment = require('moment');

npm run dev(prod)public/js/app.jsにパッケージされる。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0