Most of my project uses Vue modules, that are compiled with mix/webpack and then included within the page.
I have a few areas that are still using jquery/vanialla and in these cases I generally include the page scripts within a blade template directly within @section('page-scripts').
I have come across an issue where some of the ES6 syntax is not being properly run on older browsers. The obvious fix for this is either change my code, or compile it.
My question is... if I am to compile, how is it best to include these scripts and functions that are currently only within the scope of a single page. As soon as I compile they will be included on all pages within my app.js
You can compile multiple files to different locations. So instead of compiling everything to one file, you compile it to multiple smaller files. You can include those files per page.
mix.js('path/to/file1.js', 'public/js')
.js('path/to/file2', 'public/js');
Thanks for this @bobbybouwmann. I am actually already compiling my JS like this.
I think my question maybe needs to be re-phrased.
This is more to do with the architecture of page scripts that are just using simple vanilla JS (ones that I have generally put near to the footer of each page they run on).
i.e. - for the print function below
<body>
<h1>Hello, world!</h1>
<button class="btn" onclick="print('all')">Print All Rows</button>
<table id="bootstrap-table"><table>
</body>
<script src="{{ mix('/js/app.js') }}"></script>
<script>
var $table = $('#bootstrap-table');
function print(type){
$table.getAllRows();
// do other stuff with ES6 syntax
}
</script>
in the above example, I am getting data from a table which is on the page and then doing some other stuff with ES6 to pass this to make a request to a print server.
Moving the print function off into another file I see the following issues:
$table variable is specific to this page only. In another file, It just appears from nowhere and does not have any context (but still works as intended!).I have not worked with basic JS outside either Vue JS or putting it straight into the page it is being run on, so apologise if this is a very generic question!
Well mix can't compile loose bits that are written in your views. It can only compile things that are predefined. So I would suggest you either to make it dynamic and make it work in just javascript files or keep the current approach which seems to be working for you :P
I guess I was asking for a bit of advice on how best to compile these in external files, for use within my views.
There are a lot of guides on using frameworks such as Vue, but not so much I can find on general javascript. Although I expect I am not searching for the right thing.
Please or to participate in this conversation.