laravel-mix & blade syntax needed to use JS package

I want to use https://github.com/fnando/sparkline in a new 5.8 project. I kept getting a browser error:

Uncaught ReferenceError: sparkline is not defined.'

With the help of a SO question (https://stackoverflow.com/questions/56640085/issues-compiling-laravel-webpack-and-sparkline) it seems that one solution is to use mix.copy() to simply stage the .js file in /public/js/, which is then pulled down as a in my blade.

webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('node_modules/@fnando/sparkline/dist/sparkline.js', 'public/js');

blade.php:

<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ mix('js/sparkline.js') }}"></script>
</head>

Is there a way to .mix() the .js into my app.js and import/invoke it somehow?

I have gaps in my knowledge about implementing JS packages in Laravel via laravel-mix and how the functions therein are made available to the browser. I'd like to learn more.

Any help appreciated.

bsholdice

7 years ago

Level 2

the package author helped me:

app.js:

import sparkline from “@fnando/sparkline”;
window.sparkline = sparkline

blade.php:

<script>
    sparkline(document.querySelector(".sparkline"), [1, 5, 2, 4, 8, 3, 7]);
</script>

with no other entries in webpack.mix.js or bootstrap.js.

So now I need to understand exactly what window.sparkline = sparkline does.

Please or to participate in this conversation.