(lihat bagian akhir untuk mengetahui mengapa ini bukan duplikasi dari https://stackoverflow.com/questions/950087)
Javascipt + Vue + webpack + vue-loader noob... tersandung pada hal yang paling sederhana!
Saya memiliki App.vue
yang memiliki template:
<template>
<div id="app">
<login v-if="isTokenAvailable()"></login>
</div>
</template>
Saya mendeklarasikan metode isTokenAvailable
dengan cara normal untuk Vue di dalam methods
. Metode ini menggunakan fungsi yang saya tulis dalam berkas js
terpisah:
<script>
import * as mylib from './mylib';
export default {
....
methods:{
isTokenAvailable: () => {
return mylib.myfunc();
}
}
}
</script>
mylib
dimulai seperti ini:
import models from './model/models'
import axois from 'axios'
export default function() {
// functions and constants
}
Ketika saya menjalankan proyek, saya mendapatkan peringatan:
export 'myfunc' (imported as 'mylib') was not found in './mylib'
Saya menyimpulkan bahwa saya tidak mengimpor atau mendeklarasikan modul javascript dengan benar ... tetapi tampaknya ada begitu banyak cara untuk melakukannya, ditambah dengan kompleksitas cakupan di Vue, saya tidak yakin apa cara yang benar untuk melakukannya?
Terima kasih sebelumnya
Mengapa ini bukan duplikasi dari: https://stackoverflow.com/questions/950087
Tampaknya tidak memperbaiki masalah, khususnya dalam konteks vuejs.
Saya telah mencoba ini:
<script>
const mylib = require('./mylib');
...
</script>
Dengan fungsi yang dimodifikasi menjadi: exports.myfunc = function()
Haruskah saya memiliki beberapa ketergantungan lain agar ini berfungsi? Karena saya mendapatkan kesalahan yang berbeda:
[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
Katakanlah saya ingin mengimpor data ke dalam komponen dari src/mylib.js
:
var test = {
foo () { console.log('foo') },
bar () { console.log('bar') },
baz () { console.log('baz') }
}
export default test
Dalam file .Vue saya, saya hanya mengimpor test
dari src/mylib.js
:
<script>
import test from '@/mylib'
console.log(test.foo())
...
</script>
Setelah beberapa jam mengotak-atik saya akhirnya mendapatkan sesuatu yang berfungsi, sebagian dijawab dalam masalah serupa di sini: https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
TETAPI ada impor yang mengacaukan sisanya:
.vue
<script>
var mylib = require('./mylib');
export default {
....
mylib
exports.myfunc = () => {....}
impor
Masalah sebenarnya dalam kasus saya (yang saya pikir tidak relevan!) adalah bahwa mylib.js
itu sendiri menggunakan dependensi lain. Kesalahan yang dihasilkan tampaknya tidak ada hubungannya dengan hal ini, dan tidak ada kesalahan transpiling dari webpack
tetapi bagaimanapun juga saya punya:
import models from './model/models'
import axios from 'axios'
Ini berfungsi selama saya tidak menggunakan mylib
dalam komponen .vue
. Namun begitu saya menggunakan mylib
di sana, kesalahan yang dijelaskan dalam masalah ini muncul.
Saya mengubahnya menjadi:
let models = require('./model/models');
let axios = require('axios');
Dan semua berfungsi seperti yang diharapkan.
Saya suka jawaban dari Anacrust, meskipun, dengan fakta "console.log" dieksekusi dua kali, saya ingin melakukan update kecil untuk src/mylib.js
:
let test = {
foo () { return 'foo' },
bar () { return 'bar' },
baz () { return 'baz' }
}
export default test
Semua kode lainnya tetap sama...