Boa tarde,
estou estudando o Laravel 5.7 e estava querendo usar um plugin chamado progressbar.js.
Uma das maneiras de instalar o plugin, é jogando o arquivo progressbar.js
direto no public/js
do Laravel, após isso, escrevo onde quero que o efeito se aplica, ex:
var bar = new ProgressBar.Path('#LoadingDiv', {
easing: 'easeInOut',
duration: 2400
});
bar.set(0);
bar.animate(1.0); // Number from 0.0 to 1.0
E o teste de efeito funciona normalmente...
Mas creio que isso não é uma boa pratica, então resolvi apelar para o npm
do node.js
.
Conforme a documentação do plugin, rodei npm install progressbar.js
(a instalação é feita com sucesso), depois disso vou no webpack.mix.js
para utilizar o laravel-mix
do Laravel, adiciono o que quero que o laravel-mix
copie pra min no public
do Laravel:
const mix = require('laravel-mix');
mix.js(...)
.js("node_modules/progressbar.js/dist/progressbar.js", 'public/js')
.sass(...);
Rodo o npm run dev
, até aqui, ok! arquivo copiado para o public do Laravel com sucesso...
Vou no meu arquivo do app.blade.php
adiciono o script no mesmo lugar do antigo(que está funcionando), da meneira que acho correta:
<script src="{{ asset('js/progressbar.js') }}" defer></script>
E pronto! Erro:
Uncaught ReferenceError: ProgressBar is not defined
at onLoad ((index):74)
onLoad @ (index):74
load (async)
(anonymous) @ (index):73
Uma coisa que eu percebi, é que depois que usei o laravel-mix
o script deu uma mudada, não sei falar no que influenciou a mudança, mas deu para notar que influenciou rsrs... Como o script é bem grande, não consigo exibir aqui para vocês...
Bom, alguém sabe o que estou fazendo de errado? Acho que estou fazendo algo de errado no processo...
Edit
Subi o projeto no GitHub para vocês darem uma olhada... Repositório GitHub
npm install progressbar.js -- save
var ProgressBar = require('progressbar.js');