Как импортировать несколько файлов javascript в индексный файл HTML без раздувания?

Можно ли импортировать несколько файлов javascript в HTML без указания каждого файла?

<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

т. могу ли я указать что-то вроде js/toolkit/*?

У меня есть 50 + javascript файлов, которые мне нужно импортировать, и указать, что каждый файл кажется очень трудоемким.

Ответы

Ответ 1

Есть способ:

Вы можете создать функцию javascript, которая берет путь в качестве параметра и создает эти строки HTML:

<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

И вам просто нужно называть это:

loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");

Но это не рекомендуется, потому что время загрузки будет увеличено из-за количества HTTP-запросов. Вам лучше использовать что-то на стороне сервера, чтобы поместить все в один файл.

Ответ 2

Нет, вы не можете этого сделать. И, кстати, это не очень хорошая идея, чтобы загрузить все 50 отдельных файлов. Рассмотрите возможность сжатия их в одном script для повышения производительности и уменьшения времени загрузки страницы.

Ответ 3

Вы можете настроить grunt на watch папка скриптов и concat/minify их в один файл, тогда вам просто нужно включить это в свой HTML файл.

Ответ 4

Включение JavaScript файла в другой файл JavaScript распространено в веб-разработке.

Поскольку во многих случаях мы включаем файл JavaScript во время выполнения от имени некоторых условий.

Итак, мы можем добиться этого с помощью JavaScript, а также с помощью jQuery.

Метод 1: использовать JavaScript для добавления другого файла JavaScript

Добавьте на свою веб-страницу следующую функцию.

function loadScript(url)
{    
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

просто вызовите следующую функцию loadScript, в которую вы хотите включить файл js.
```
loadScript('/js/jquery-1.7.min.js');
```

Способ 2. Используйте jQuery для добавления другого файла JavaScript.

Добавьте файл jQuery на свою веб-страницу.
```
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
```

Просто вызовите функции функции getScript.

jQuery(document).ready(function(){
    $.getScript('/js/jquery-1.7.min.js');
});

Как включить файл JavaScript в другой файл JavaScript

Ответ 5

Вам нужно будет указать каждый файл для браузера, чтобы узнать, что нужно извлечь, но в зависимости от используемой среды IDE могут быть ярлыки для этого (Visual Studios позволяет перетаскивать файлы script в html добавить ссылки).

Во время разработки вы хотите делать то же самое, что и делаете, сохраняя файлы отдельно для устранения неполадок, но в процессе производства, как прокомментировали другие, его очень хорошая практика: уменьшите свой код и объедините их в один файл. Это делает его только одним вызовом и может значительно снизить накладные расходы.

Ответ 6

Я рекомендую вам использовать JSCompress. Он сжимает весь ваш javascript-код в один файл javascript.