CODEWITHSUNDEEP
javascriptlaravelwebpacklaravel-mix
tariq ali
tariq ali

Reputation: 77

How to add global functions in Laravel webpack.mix.js?

I am using Laravel mix to compile my assets and combining them into single file. I created a new js file and wrote some methods in this. I combined this file with app.js file. From my blade file when i try to call those methods i get an error function not defined . I am unable to access those methods.

Please help me out to call those methods.

Laravel Mix code

mix.js([ 'js/app.js',
         'js/custom.js'
        ], 'public/js'),
.....

Custom.js

function test(){
  alert('test')
}

test.blade.php

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
    test();
</script>

Error : test is not defined

Upvotes: 5

Views: 8169

Answers (3)

Mohamed Mo Kawsara
Mohamed Mo Kawsara

Reputation: 4688

Just assign it to window. So in your Custom.js

window.test = function(){
  alert('test')
}

and use it in your test.blade.php:

<script type="text/javascript">
    window.test();
</script>

Upvotes: 9

Tux
Tux

Reputation: 31

Try this:

custom.js

function test(){
    alert('test')
}

export { test };

app.js

...
import { test } from './custom.js';

Upvotes: 3

Joe
Joe

Reputation: 4738

Rather than just concatenating the new file onto the end of the app.js a cleaner approach (imho) is to leave your webpack.mix.js untouched.

Create your custom.js file in resources/assets/js and simply add require('./custom'); at the bottom of resources/assets/js/app.js

This will then be required as part of the rest of the build process.

Upvotes: 0

Related Questions