web-dev-qa-db-ja.com

Vue + webpack + vue-loaderプロジェクトの異なるjsファイルから関数をインポートする方法

（これがなぜだまされていないのかについては最後を参照してください JavaScriptファイルを別のJavaScriptファイルに含める方法は？ ）

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のスコープの複雑さに加えて、それを行う方法は非常に多くあるようです。「正しい」方法がわからないそれをするために？

前もって感謝します

これがだまされていない理由： 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
javascriptmodulewebpackvuejs2vue-loader
27
Manish Patel

数時間の混乱の後、私は最終的に動作するものを得ましたが、ここで同様の問題で部分的に答えました： JavaScriptファイルを別のJavaScriptファイルに含めるにはどうすればよいですか？

しかし残りの部分を台無しにしていたインポートがありました：

.vueファイルでrequireを使用します

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

mylibのエクスポート

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

importを避ける

私の場合の実際の問題（関連性があるとは思いませんでした！）は、mylib.js自体が他の依存関係を使用していたことです。結果として生じるエラーはこれとは何の関係もないようで、webpackからの変換エラーはありませんでしたが、とにかく私は持っていました：

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

これは、.vueコンポーネントでmylibを使用していない限り機能します。ただし、mylibを使用するとすぐに、この問題で説明されているエラーが発生します。

変更後：

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

そして、すべてが期待どおりに機能します。

30
Manish Patel

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>
29
anacrust

私はAnacrustの答えが好きですが、「console.log」が2回実行されるという事実により、src/mylib.jsの小さな更新をしたいと思います：

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

export default test

他のすべてのコードは同じままです...

4
Johnny Driesen