特定のvueコンポーネント内から外部のjsファイルを読み込む際のエラーの内容の理解と読み込み自体が出来ず困っています。

前提・実現したいこと

プログラミング初心者です。
特定のコンポーネント内から外部のjsファイルを読み込む際のエラーの内容の理解と読み込み自体が出来ず困っています。

現在vue.jsの学習をしており、簡単なユーザー登録機能を作っている最中なのですが
特定のコンポーネント内から外部のjsファイルを読み込む際のエラーの内容の理解と読み込み自体が出来ず困っているのでこれを解決したいです。
エラー内容は以下の通りです。
(ユーザー登録機能に関係にする関数をまとめたファイル validate.js が今回読み込みたい物です。)

エラーメッセージ

This dependency was not found:

* ＠/resources/js/utils/validate in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/auth/SignUp.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save ＠/resources/js/utils/validate

理解・解決したい事その1

最初にエラーの内容が理解出来ていない事について書かせてもらいます。

理解出来ていない点と致しましては主に2つあります。
・なぜjsファイル(validate.js)と「babel-loader」と「vue-loader」の依存関係について怒られているのか。
・どうしてvalidate.jsファイルのインストールを促されているのか
という点です。

validate.jsファイルの内容は以下の通りになります。
(冒頭にユーザー登録機能を作っていると書きましたが、現段階は動作確認をメインにしておりますので正規表現の内容は一旦無視して頂けると嬉しいです。)

JavaScript
1//validate.js
2/**
3 * 小文字の文字列か検証する
4 * @return {Boolean}
5 * @param {String} str
6 */
7export function validLowerCase(str) {
8  const reg = /^[a-z]+$/;
9  return reg.test(str);
10}
11
12/**
13 * 大文字の文字列を検証する
14 * @return {Boolean}
15 * @param {String} str
16 */
17export function validUpperCase(str) {
18  const reg = /^[A-Z]+$/;
19  return reg.test(str);
20}
21

それと呼び出し元のVueのコンポーネントファイルの一部です
(今回は読み込み部分以外関係無いかなと思いますのでその点のみ記入しています。)

Vue
1//SignUp.vue
2<template>
3  //=== 省略 ===
4</template>
5
6<script>
7import { validLowerCase,validUpperCase } from "＠/resources/js/utils/validate";
8  //=== 省略 ===
9</script>
10

現時点での予想

１つ目の質問の「なぜjsファイルとbabel-loaderと〜」に関しましては
呼び出し対象のファイル(validate.js)でes6の機能exportを使って対象関数をモジュールとして扱っていますので、
もしかすると何かしらの決まりでes6要素があるjsファイルは一度Babelを使ってes5方式にファイルを変換する必要があり、
その繋がりからjsファイルとbabel-loaderの何かしらの依存性関係で怒られているのかなーと思っています。

vue-loaderについてはVueコンポーネント内での外部jsファイルの読み込み自体が上手くいってないので、コンポーネントをJavaScriptモジュールに変換できなくなっているという繋がりで怒られているのかなと思っています。

2つめの「どうしてvalidate.jsファイルの〜」に関しましては
exportを使ってjsファイル内の対象関数をが複数モジュールとして扱われているので、ライブラリとして認識されているのかなと思っています。
でそのライブラリに何かしらの問題があってとりあえずインストールを促されているのかな・・・？と考えています。

初心者な為イマイチ自信が持てないので、できれば解説の方をお願いしたいです。

理解・解決したい事その2

上に書いたSignUp.vue内で外部のjsファイル内の関数を使える様にしたいです。

現時点での予想

フォルダ構成は
/app
├──resources
│ ├── js
│ │ └── utils
│ │ └── validate.js
│ │
│ └── views
│ ├── ・・・
│ └── ・・・

という感じなのでwebpackで＠の設定を特にしていない場合
対象コンポーネント内で
import { 使いたい関数の名前 } from "＠/resources/js/utils/validate";
とパス関係は問題ないのかなと思っています。

となるとやっぱりbabelの設定とvue-loaderが問題なのかなと思います。
初心者がbabelの設定をする際に参考にしたら良いサイト等も教えてもらえたら嬉しいです。

試したこと

Webpack4 + Vue.jsの設定手順
https://qiita.com/senou/items/15c584b6fc90fe51702e

上記のサイトの
・vue-loaderをインストールする
・babelをインストールする
の項目をnpmでやってみました。

エラー内容は変わりませんでした。
(ページ上部のThis dependency was not found:〜です。)

補足情報（FW/ツールのバージョンなど）

"vue": "^2.6.12"

外部のjsファイル内の関数を使える様にする方法のみの回答でも大丈夫です。

他にも書くべき内容があった場合は別途追記します。
よろしくお願いします。

maisumakun

2021/05/03 22:42

＠が全角になっていますが、それは意図したものですか？

sdka

2021/05/04 01:18

返信ありがとうございます！いえ、意図したものではありませんでした。ですが半角へ直してもエラーの内容は変わらなかったです。 (質問内容に書いた This dependency was not found:〜のままです)

行動規範の内容に同意します

回答1件

ベストアンサー

今はvueでなく、nuxtを使っているので、ちょっとお答えがズレていたらごめんなさい。

当該のファイルをassetsへ入れて、
ページから呼び出せばいけるんでないかと思います。

vue
1<script>
2const validate = require("@/assets/validate");　//←ここは環境に合わせてください
3
4export default {
5  data() {
6    return {
7      validLowerCase: validate.validLowerCase(),
8    };
9  },
10</script>
11
12

js
1export const validLowerCase = function(str) {
2  const reg = /^[a-z]+$/;
3  return reg.test(str);
4}
5
6

投稿2021/05/12 14:39

Tatsunosuke

総合スコア599

Tatsunosuke

2021/05/12 14:48

訂正です。実際にテストしたところ、 export default { data() { return { validLowerCase: validate.validLowerCase(), }; }, この部分バッサリいらなかったです。 methods等で validate.validLowerCase(str)をそのまま利用すれば大丈夫です。

sdka

2021/05/13 04:38

回答ありがとうございました！こちらの環境でも無事動いたので今後Tatsunosukeさんに教えて頂いた方法でやってみようと思います！

Tatsunosuke

2021/05/13 05:07

おめでとうございます！！頑張ってください！！

行動規範の内容に同意します