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

Par Pandazaur, il y a 10 ans

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, il y a 10 ans

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)/ } ],
Pandazaur, il y a 10 ans

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, il y a 10 ans

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

Pandazaur, il y a 10 ans

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 ?

nico41, il y a 10 ans

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, il y a 10 ans

Super ça marche, je comprend un peu mieux.

Merci pour votre aide ! :D