как импортировать функции из разных JS-файлов в проект Vue+webpack+Vue-loader

(см. Конец, почему это не обман Как включить файл JavaScript в другой файл JavaScript?)

Javascipt + Vue + webpack + Vue-загрузчик noob... наткнуться на простейшую вещь!

я App.vue, который имеет шаблон:

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

я объявляю isTokenAvailable метод обычным способом для Vue внутри methods. Он использует функцию, которую я написал в отдельном :

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

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

mylib начинается так:

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

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

когда я запускаю проект, я получаю предупреждение:

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

я понимаю, что я неправильно импортирую или объявляю модуль javascript... но, похоже, есть так много способов сделать это, добавленных со сложностью области обзора в Vue, я не уверен, что это "правильный" способ сделать это?

спасибо заранее

почему это не обман: Как включить файл JavaScript в другой JavaScript файл?

похоже, не устраняет проблему, особенно в контексте vuejs.

я попытался это:

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

С функцией изменен на: exports.myfunc = function()

должен ли я иметь какую-то другую зависимость для этого? потому что я получаю другую ошибку:

[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
14
javascript module vue-loader vuejs2 webpack

2 ответов

после нескольких часов возни я в конце концов получил что-то, что работает, частично ответил в аналогичном вопросе здесь: Как включить файл JavaScript в другой файл JavaScript?

но был импорт, который испортил все остальное:

требуются в .vue файлы

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

экспорт в mylib 

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

избежать import

фактическая проблема в моем случай (который я не думал, что имеет отношение!), что mylib.js сам использовал другие зависимости. Результирующая ошибка, похоже, не имеет к этому никакого отношения, и не было никакой ошибки транспилирования из webpack но в любом случае у меня было:

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

это работает до тех пор, пока я не использую mylib на

17

скажем, я хочу импортировать данные в компонент из src/mylib.js:

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

export default test

в моем .Vue файл я просто импортировал test С src/mylib.js:

<script> 
  import test from '@/mylib'

  console.log(test.foo())
  ...
</script>
9