web-dev-qa-db-fra.com

comment importer des fonctions de différents fichiers js dans un projet Vue + webpack + vue-loader

(voir fin pour savoir pourquoi ce n'est pas dupe de Comment puis-je inclure un fichier JavaScript dans un autre fichier JavaScript? )

Javascipt + Vue + webpack + vue-loader noob ... trébuche sur la plus simple des choses!

J'ai App.vue Qui a un template:

<template>
 <div id="app">
     <login v-if="isTokenAvailable()"></login>
 </div>
</template>

Je déclare la méthode isTokenAvailable de la manière habituelle pour Vue à l'intérieur de methods. Elle utilise une fonction que j'ai écrite dans un fichier séparé js :

<script>
import * as mylib from './mylib';

export default {
  ....
    methods:{
        isTokenAvailable: () => {
            return mylib.myfunc();
        }
    }
}
</script>

mylib commence comme ceci:

import models from './model/models'
import axois from 'axios'

export default function() {
    // functions and constants
}

Lorsque je lance le projet, je reçois l'avertissement:

export 'myfunc' (imported as 'mylib') was not found in './mylib'

Je suppose que je n’importe pas ou ne déclare pas un module javascript correctement ... mais il semble y avoir tant de façons de le faire, ajouté à la complexité de la portée de Vue, je ne suis pas sûr de la "bonne" façon. pour le faire?

Merci d'avance

Pourquoi ce n'est pas dupe de: Comment puis-je inclure un fichier JavaScript dans un autre fichier JavaScript?

Ne semble pas résoudre le problème, en particulier dans le contexte de vuejs.

J'ai essayé ceci:

<script>
const mylib = require('./mylib');
...
</script>

Avec la fonction modifiée en: exports.myfunc = function()

Dois-je avoir une autre dépendance pour que cela fonctionne? Parce que j'obtiens une erreur différente:

[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
javascriptmodulewebpackvuejs2vue-loader
27
Manish Patel

Après quelques heures de bricolage, j’ai finalement eu quelque chose qui fonctionne et qui a été partiellement résolu dans un problème similaire: Comment puis-je inclure un fichier JavaScript dans un autre fichier JavaScript?

[~ # ~] mais [~ # ~] il y avait une importation qui bousillait le reste:

Utilisez require in .vue des dossiers

<script>
  var mylib = require('./mylib');
  export default {
  ....

Exportations dans mylib

 exports.myfunc = () => {....}

Évitez import

Le problème dans mon cas (ce qui, à mon avis, n’était pas pertinent!) Était que mylib.js utilisait lui-même d'autres dépendances. L’erreur résultante semble n’avoir rien à voir avec cela, et il n’ya pas eu d’erreur de transpiling de webpack mais j’avais quand même:

import models from './model/models'
import axios from 'axios'

Cela fonctionne tant que je n'utilise pas mylib dans un .vue _ composant. Cependant, dès que j'utilise mylib, l'erreur décrite dans ce problème se produit.

J'ai changé pour:

let models = require('./model/models');
let axios = require('axios');

Et tout fonctionne comme prévu.

30
Manish Patel

Dites que je veux importer des données dans un composant à partir de src/mylib.js:

var test = {
  foo () { console.log('foo') },
  bar () { console.log('bar') },
  baz () { console.log('baz') }
}

export default test

Dans mon fichier .Vue, j'ai simplement importé test de src/mylib.js:

<script> 
  import test from '@/mylib'

  console.log(test.foo())
  ...
</script>
29
anacrust

J'aime la réponse d'Anacrust, bien que, du fait que "console.log" soit exécuté deux fois, j'aimerais faire une petite mise à jour pour src/mylib.js:

let test = {
  foo () { return 'foo' },
  bar () { return 'bar' },
  baz () { return 'baz' }
}

export default test

Tous les autres codes restent les mêmes ...

4
Johnny Driesen