[code]
@vite([‘resources/js/app.js’, ‘resources/js/js-alert.2.0.0.min.js’, ‘resources/js/global.js’])
[/code]
blade 에서 위와 같이 사용하였을 경우 모두 아래와 같이 출력된다.
[code]
<script type=”module” src=”http://…./build/assets/global-ae95abc4.js”></script>
[/code]
내 경우에는 global.js 에 아래와 같이 Alpine data 를 사용하려 했으나 작동이 되지 않았다.
[code]
window.addEventListener(‘alpine:init’, () => {
Alpine.data(‘global’, () => ({
init() {
console.log(‘global’)
}
}))
});
[/code]
이유는 Alpine.start() 가 진행되기 전에 정의가 되어야 하는데 그 후에 출력되어서였다.
그래서 async 를 붙여주기 위해 서비스컨테이너에 아래와 같이 설정하였다.
/app/Proviers/AppServiceProvider.php
[code]
public function boot()
{
Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
‘async’ => $src === ‘resources/js/global.js’ ? ‘async’ : true,
]);
}
[/code]
html 에서 출력된 결과이다.
[code]
<script type=”module” src=”http://…./build/assets/global-ae95abc4.js” async=”async”></script>
[/code]
async 로 먼저 정의 되고 난 후 Alpine.start() 가 구동되어서 잘 작동 되었다.
