Как импортировать все JavaScript файлы в один файл и вызвать этот файл как скрипт в Laravel? - PullRequest
Новая
       18

Как импортировать все JavaScript файлы в один файл и вызвать этот файл как скрипт в Laravel?

0 голосов
/ 22 апреля 2020

Описание

Мне нужна четкая структура моего JS кода в приложении Laravel. В данный момент я вызываю все функции в блейде приложения: 

  <script src="{{ asset('js/components/ToggleLogin.js')}}"></script>
  <script src="{{ asset('js/components/ToggleImage.js')}}"></script>
  <script src="{{ asset('js/components/ToggleMenu.js')}}"></script>
  <script src="{{ asset('js/components/ScrollTo.js')}}"></script>

Но мне интересно, не должно ли быть возможным экспортировать все эти функции и затем импортировать их в app.js. Приложение. js будет выглядеть так: 

import ToggleImage from "./components/ToggleImage";
import ToggleLogin from "./components/ToggleLogin";
import ToggleMenu from "./components/ToggleMenu";
import ScrollTo from "./components/ScrollTo;

А внутри клинка я могу просто вызвать приложение. js: 

<script src="{{ asset('js/app.js') }}" defer></script>

Вопрос

Является ли этот подход в принципе возможным?

Если да, как бы я сделал это правильно?

Когда я вызываю импортированную функцию внутри приложения. js это немедленно выполнено. Чтобы уточнить это: 

import ToggleImage from "./components/ToggleImage";

ToggleImage();

Это, очевидно, вызывает открытие модального изображения сразу, когда пользователь заходит на сайт. Нормальным поведением должно быть то, что пользователь нажимает кнопку, которая переключает изображение.

Спасибо за ваше время:)

Редактировать

Мой текущее решение выглядит так: 

import ToggleMenu from "./components/ToggleMenu";
import ToggleImage from "./components/ToggleImage";
import ScrollTo from "./components/ScrollTo";
import {
    ToggleDesktopLogin,
    ToggleMobileLogin
} from "./components/ToggleLogin";
import FadeLoginButton from "./components/FadeLoginButton";
import PostData from "./components/ReportModals/PostData";
import ToggleNewReport from "./components/ReportModals/ToggleNewReport";
import ValidateChars from "./components/ReportModals/ValidateChars";

window.onload = FadeLoginButton;
window.ToggleMenu = ToggleMenu;
window.ScrollTo = ScrollTo;
window.ToggleMobileLogin = ToggleMobileLogin;
window.ToggleDesktopLogin = ToggleDesktopLogin;
window.PostData = PostData;
window.ToggleNewReport = ToggleNewReport;

// landing page

if (document.location.pathname === "/") {
    window.ToggleImage = ToggleImage;
}

// charValidation

if (document.body.contains(document.getElementById("send-report"))) {
    window.ValidateChars = ValidateChars;
}

Итак, в app.blade. php у меня осталось это: 

 <script src="{{ asset('js/app.js')}}"></script>

Но у меня сложилось впечатление, что это может быть намного чище.

...