3

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

4
  • 1
    rode o seguinte comando e informe qual foi o resultado da execução após isso: npm install progressbar.js -- save
    – Sorack
    28/09/2018 às 22:14
  • 1
    Olá amigo, você fez importou o ProgressBar? Usando: var ProgressBar = require('progressbar.js');
    – MSLacerda
    2/10/2018 às 14:40
  • @Sorack Rodei, deu uma modificada no código, deixei o link do repositório Git para você dar uma olhada...
    – Ursones
    2/10/2018 às 15:20
  • @matheussoareslacerda deu a seguinte msg "Uncaught ReferenceError: require is not defined at (index):108"
    – Ursones
    2/10/2018 às 15:22

1 Resposta 1

1
+50

Olá, olhando seu projeto achei os problemas amigo...

Importando Bibliotecas Javascript


No arquivo localizado em

/RW-Site/resources/js/app.js

é onde você deve importar as bibliotecas que você instalou utilizando o npm.

Lá você pode observar que ele faz essa importação

require('./bootstrap');

No qual ele importa um arquivo localizado na mesma pasta, esse arquivo contem todas as configurações necessárias do bootstrap, incluindo o jQuery, popper e entre outros.

Sabendo disso agora basta criar um arquivo pra configurar as suas dependências, na minha maquina eu criei um arquivo: progress.js na mesma pasta do app.js e bootstrap.js, neste arquivo em simplesmente coloquei:

// Loading progressbar.js

window.ProgressBar = require('progressbar.js')

e depois, no app.js eu importei o arquivo que acabamos de criar, ficando:

require('./bootstrap');
require('./progress.js');

LEMBRAR: No arquivo app.blade.php eu removi a linha que faz o require do ProgressBar, pois não é preciso.

E no mesmo arquivo, lá no cabeçalho apenas importei:

<script src="{!! mix('js/app.js') !!}"></script>

Com isso você deixa que o webpack configure e builde os seus javascripts, e você importa apenas sua app.js compilado.

lembre-se de remover esses 3 scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/progressbar.js') }}"></script>

Reiniciando aplicação


Pronto, depois disso basta reiniciar sua aplicação, buildar ela para que os arquivos sejam compilados e voilà.

Aconselho utilizar o

npm run watch-poll

Assim suas alteração são refletidas automaticamente...

Fontes:

https://laravel.com/docs/5.4/mix

https://stackoverflow.com/questions/45125009/how-import-a-external-js-library-in-laravel

1
  • Valeu amigo, agora eu entendi onde estava errando...
    – Ursones
    4/10/2018 às 13:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .