[Vue.js] Problème chargement de fichier JS

Pandazaur
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je cherche à charger un fichier javascript minifié dans mon main.js (voir ci-dessous)

import Vue from 'vue'
import App from './components/App.vue'

/* eslint-disable no-new */
/* jslint white: true */
require('./js/materialize.min.js');     // Problème !

new Vue({
  el: 'body',
  components: {
    app: App
  }
});

Ce que je veux

Que lorsque je lance mon serveur via npm run dev, ma page s'affiche bien, que mes fichiers javascripts minifiés soient chargés

Ce que j'obtiens

L'erreur suivante à cause ESLint (j'ai un total de 19000 erreurs ...):

 error        space-infix-ops        Infix operators must be spaced                                                                                 
  /home/alexandre/Programmation/eventium-app/src/js/materialize.min.js:10:3047

  error        keyword-spacing        Expected space(s) before "if"                                                                                  
  /home/alexandre/Programmation/eventium-app/src/js/materialize.min.js:6:30371

  error         comma-spacing         A space is required after ','                                                                                  
  /home/alexandre/Programmation/eventium-app/src/js/materialize.min.js:10:3063

  error      space-before-blocks      Missing space before opening brace                                                                             
  /home/alexandre/Programmation/eventium-app/src/js/materialize.min.js:6:30722

  error         comma-spacing         A space is required after ','                                                                                  
  /home/alexandre/Programmation/eventium-app/src/js/materialize.min.js:10:3100

  error        space-infix-ops        Infix operators must be spaced                                                                                 
  /home/alexandre/Programmation/eventium-app/src/js/materialize.min.js:6:30973

  error             quotes            Strings must use singlequote                                                                                   
  /home/alexandre/Programmation/eventium-app/src/js/materialize.min.js:10:3105

Cordialement,

6 réponses

Grafikart
Réponse acceptée

Le choix le plus simple est de mettre les fichiers externe dans un dossier libs et d'exclure ce dossier du linter

preLoaders: [
{
  ...
  exclude: /(node_modules|libs)/
}
],
nico41
Réponse acceptée

et comme ça ?

npm install jquery hammerjs materialize-css
import jquery from 'jquery'
import hammerjs from 'hammerjs'
import materialize from 'materialize-css'
...
export default {
    ...
    ready () {
        // test
        console.log('jquery :', jquery, 'hammerjs :', hammerjs, 'materialize :', materialize)
    }
    ...
}
...
Pandazaur
Auteur

Bonjour Grafikart,

Merci pour ta réponse, c'est nettement mieux !

Cela dit, une dernière chose: je n'ai plus que deux erreurs suite à ca:

ERROR in ./src/lib/materialize.min.js
Module not found: Error: Cannot resolve module 'jquery' in /home/alexandre/Programmation/eventium-app/src/lib
 @ ./src/lib/materialize.min.js 1:587-604 1:59418-59449 1:109107-109136 1:117179-117208

ERROR in ./src/lib/materialize.min.js
Module not found: Error: Cannot resolve module 'hammerjs' in /home/alexandre/Programmation/eventium-app/src/lib
 @ ./src/lib/materialize.min.js 1:59418-59449

Materialize à besoin de jQuery, mais même si je charge jQuery avant, il ne semble pas le reconnaitre:

import Vue from 'vue'
import App from './components/App.vue'

/* eslint-disable no-new */
/* jslint white: true */
require('./lib/jquery.min.js');
require('./lib/materialize.min.js');

new Vue({
  el: 'body',
  components: {
    app: App
  }
});
Grafikart

Même chose, ignore le dossier contenant ces fichiers :)

Pandazaur
Auteur

Mais c'est ce que je fais actuellement, materialize.min.js et jquery.min.js sont dans le même répertoire et j'ai bien mis l'exception pour ce répertoire mais il semblerais que materialize n'arrive pas à reconnaitre jQuery.

J'ai aussi en mettant ceci:

var jquery = require('./lib/jquery.min.js');

N'y a-t-il pas quelque chose à changer dans la configuration ?

Pandazaur
Auteur

Super ça marche, je comprend un peu mieux.

Merci pour votre aide ! :D