В старых версиях JavaScript не было импорта, включения или требования, поэтому было разработано множество различных подходов к этой проблеме.

Но с 2015 года (ES6) в JavaScript был Модули ES6 стандарт для импорта модулей в Node.js, который также поддерживается большинством современных браузеров .

Для совместимости со старыми браузерами, сборка и / или Можно использовать инструменты транспиляции .

Модули ES6

Модули ECMAScript (ES6) поддерживаются в Node.js, начиная с версии 8.5, с - экспериментальными модулями флаг. Все задействованные файлы должны иметь расширение .mjs .

// module.mjs
export function hello() {
  return "Hello";
}

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

Модули ECMAScript в браузерах

Браузеры поддерживают загрузку модулей ECMAScript напрямую (такие инструменты, как Webpack, не требуются) с Safari 10.1, Chrome 61, Firefox 60 и Edge 16. Проверьте текущую поддержку на caniuse .

<script type="module">
  import { hello } from './hello.mjs';
  hello('world');
</script>

// hello.mjs
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Подробнее на https://jakearchibald.com/2017/es-modules-in-browsers/

Динамический импорт в браузерах

Динамический импорт позволяет скрипту загружать другие скрипты по мере необходимости:

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

Подробнее на https://developers.google.com/web/updates/2017/11/dynamic- import

Node.js require

Старый стиль импорта модулей, все еще широко используемый в Node.js, - это система module.exports / require .

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}

// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

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

Загрузка AJAX

Вы можете загрузить дополнительный сценарий с вызовом AJAX, а затем использовать eval для его запуска. Это самый простой способ, но он ограничен вашим доменом из-за модели безопасности песочницы JavaScript. Использование eval также открывает дверь для ошибок, взломов и проблем безопасности.

Загрузка выборки

Как и в случае динамического импорта, вы можете загрузить один или несколько скриптов с помощью вызова fetch , используя обещания для управления порядком выполнения зависимостей скриптов с помощью библиотеки Fetch Inject :

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

jQuery Loading

Библиотека jQuery обеспечивает загрузку функций в одной строке :

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Динамическая загрузка сценария

Вы можете добавить тег сценария с URL сценария в HTML. Это идеальное решение, чтобы избежать накладных расходов, связанных с jQuery.

Сценарий может даже находиться на другом сервере. Кроме того, браузер оценивает код.