(これがhttps://stackoverflow.com/questions/950087 のダブりでない理由については末尾を参照)。
Javascipt + Vue + webpack + vue-loader noob... 簡単なことでつまずく!
テンプレートがあるApp.vue
があります:
<template>
<div id="app">
<login v-if="isTokenAvailable()"></login>
</div>
</template>
isTokenAvailableメソッドはVueの通常の方法で
methodsの中で宣言します。これは、別の
js` ファイルに書いた関数を使用している:
<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のスコープの複雑さも加わって、何が正しいやり方なのかよくわかりません。
よろしくお願いします。
https://stackoverflow.com/questions/950087と重複しない理由
特にvuejsの文脈では、問題は解決されていないようです。
私はこれを試しました:
<script>
const mylib = require('./mylib');
...
</script>
関数を次のように変更しました:exports.myfunc = function()`
**これが機能するためには、何か他の依存関係が必要なのでしょうか?
[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
src/mylib.js`からコンポーネントにデータをインポートしたいとします:
var test = {
foo () { console.log('foo') },
bar () { console.log('bar') },
baz () { console.log('baz') }
}
export default test
.Vueファイルでは、src/mylib.js
からtest
をインポートしています:
<script>
import test from '@/mylib'
console.log(test.foo())
...
</script>
数時間いじくりまわした後、最終的にうまくいくものを手に入れた。同じような問題については、https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file。
しかしインポートがあり、それが残りの部分を台無しにしていた:
<script>
var mylib = require('./mylib');
export default {
....
exports.myfunc = () => {....}
私の場合の実際の問題は(関係ないと思っていたのだが!)、mylib.js
自身が他の依存関係を使用していることだった。結果としてのエラーはこれとは関係なさそうだし、webpack
からのトランスパイルエラーもなかったが、いずれにせよ私にはあった:
import models from './model/models'
import axios from 'axios'
これは .vue
コンポーネントで mylib
を使っていない限りは動作する。しかし、そこで mylib
を使用すると、すぐにこの問題で説明されているエラーが発生します。
に変更しました:
let models = require('./model/models');
let axios = require('axios');
そして、すべては期待通りに動作します。