外部jsを読み込むには？

Question

モジュール化されていないライブラリを読み込むには、
どのような手段が提供されているのでしょうか？

たとえば、グローバルスコープに関数を定義するようなライブラリを利用するケースでは、
下記のような構成では正しく読み込まれません。

• nuxt.config.js

plugins: [
  '~/plugins/test.js'
],

• pages/index.vue

<script>
export default {
    mounted: function() {
        func();
    }
}
</script>

• plugins/test.js

var func = function() {
    console.log('call func');
}

手動でspaトップのhtmlファイルに書き起こせば良いのかもしれませんが、
可能であればNuxtで一元管理したいと考えています。

また、上記の質問ですが、プラグイン側のjsは編集できない前提でお願いします。
何卒よろしくお願い致します。

Answer 1

chunweさんのコードでは、func関数をグローバルに宣言できていません。
plugins/test.jsのローカル関数になっています。
JSのモジュール(ファイル)は、それぞれスコープとなるので、exportしない限り、そのファイルでのみ有効です。このあたりは別途調べてみてください。

chunweさんのコードでは、mounted()でfunc()を実行しています。このライフサイクルフックはクライアントでのみ実行されるので、ここでいう「グローバル」はwindowの事とします。
その場合、window.funcを定義する必要があります。

// plugins/test.js
window.func = function() { ... }

また、プラグインはクライアントサイドとサーバーサイドの両方で実行されますが、今回の場合サーバーサイドでは実行すべきでない(windowがない)ので、nuxt.config.jsでプラグインのssrをfalseにします。

export default {
  plugins: [
    { src: '~/plugins/test', ssr: false }
  ]
}

追記(2018/12/23)

des.jsについて確認しました。
このプラグインがエラーになるのは「var宣言しないことでグローバルにする」など、現代では許容されない書きかたがされているのが問題です（かなりおおざっぱに言っているので、正確ではありません）。
サイト自体が2006年の更新でとまっているようですので、仕方ないかもしれません。
同じようなことをする別のプラグインを探すか、des.js自体を修正する必要があります。

// des.js
des = new function() { ... } // この時点で、前もって`des`が宣言されていないので、エラーになります。

「グローバル関数を展開するやりかた」自体は、上に自分が書いた方法でできます。
今回は、使おうとしているプラグイン側に問題があるようです。

追記(2018/12/23)

もう一つやり方があったので、追記します。
nuxt.config.jsでheadオプションを利用する方法です。

この方法であれば、scriptタグとしてhead要素に展開されるので、モジュールシステムの外側でスクリプトを実装・実行できます。
クライアントサイドのVue関連の記述はbodyの最後に読み込まれるので、その実行時点ではheadで読み込んだJSを問題なく使用できると思います。

module.exports = {
  head: {
    script: [
      { src: 'http://user1.matsumoto.ne.jp/~goma/js/des.js' }
    ]
  }
}

Comments

[chunwe]

すみません。グローバル関数という呼び方には語弊がありました。
前述したグローバル関数とは、window下に暗黙的に展開される関数/変数を指します。

以下のように、scriptタグでロードすると正しくwindow下に展開されます。
<script src="plugins/test.js"></script>

このような設計思想で実装されたライブラリを、
いくつか利用したいと考えているのですが、可能でしょうか？

一例として、des.jsをあげます。
[des.js] http://user1.matsumoto.ne.jp/~goma/js/des.html

こちらのライブラリでは、des変数がグローバルエリアに宣言されますが、
nuxtで使用するにはどうしたら良いのでしょうか？

[chunwe]

des.jsに関してはnuxt等のモジュールシステムの管理と相性が悪いということですね。しかし、これ以外にも同様の不具合でうまくロードされないライブラリが存在するためもう少し検討したいと思います。

[chunwe]

headオプションでscriptタグを追加する方法は最初に利用しました。
しかし、これらのオプションは飽くまでVueモジュールが展開されたあと読み込まれ、非同期的にライブラリが実行されるためVueは読み込み完了を待機しません。
これについては、create/mounted契機でライブラリを呼び出せないことからも明らかです。
以上の理由から、プラグインとして読み込み、かつモジュールの管理外に定義したいと考えております。

[NozomuIkuta]

あー、script要素の埋め込みが同期的なだけで、読み込みは非同期でした。すみません。
「手動でspaトップのhtmlファイルに書き起こせば良いのかもしれませんが、可能であればNuxtで一元管理したい」とのことなので、nuxt.config.jsのbuildオプションでwebpackの設定をいじって、HTMLにスクリプトタグを埋め込む感じにはできるかもしれませんが、手間を考えると手動とかわらなそうですね。
お役に立てずすみません。