Старі версії JavaScript не мали імпорту, включали або вимагали, тому було розроблено багато різних підходів до цієї проблеми.
Але з 2015 року (ES6) у JavaScript встановлено стандарт модулів ES6 для імпорту модулів у Node.js, що також підтримується більшістю сучасних браузерів .
Для сумісності зі старими веб-переглядачами можна використовувати такі інструменти, як Webpack і Rollup та / або інструменти для транспіляції, як Babel .
Модулі ES6
Модулі ECMAScript (ES6) підтримуються в Node.js з версії 8.5, з --experimental-modulesпрапором і, принаймні, Node.js v13.8.0 без прапора. Щоб включити «ESM» ( по порівнянні з попередньою системою модуля CommonJS стилі Node.js в [ «CJS»]) або ви використовувати "type": "module"в package.jsonабо дають файли з розширенням .mjs. (Аналогічно, модулі, написані попереднім модулем CJS Node.js, можна назвати, .cjsякщо за замовчуванням встановлено ESM.)
Використання package.json:
{
"type": "module"
}
Потім module.js:
export function hello() {
return "Hello";
}
Потім main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
Використовуючи .mjs, у вас є module.mjs:
export function hello() {
return "Hello";
}
Потім main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
Модулі ECMAScript у браузерах
Веб-браузери підтримували безпосередньо завантаження модулів ECMAScript (не потрібні такі інструменти, як Webpack), починаючи з Safari 10.1, Chrome 61, Firefox 60 та Edge 16. Перевірте поточну підтримку за допомогою каніуси . Не потрібно використовувати .mjsрозширення Node.js ; браузери повністю ігнорують розширення файлів на модулях / скриптах.
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
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 вимагає
Старіший стиль модуля CJS, який все ще широко використовується в 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 Завантаження
Бібліотека jQuery забезпечує функцію завантаження в один рядок :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Динамічне завантаження сценарію
Ви можете додати тег сценарію з URL-адресою сценарію в HTML. Щоб уникнути накладних витрат jQuery, це ідеальне рішення.
Сценарій може розміщуватися навіть на іншому сервері. Крім того, браузер оцінює код. <script>Тег може бути введений в будь-який веб - сторінки <head>, або вставити безпосередньо перед закриває </body>тегом.
Ось приклад того, як це могло працювати:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
Ця функція додасть новий <script>тег до кінця головного розділу сторінки, де srcатрибут встановлений за URL-адресою, яка надається функції в якості першого параметра.
Обидва ці рішення обговорені та проілюстровані в JavaScript Madness: Dynamic Script Loading .
Виявлення, коли сценарій виконаний
Тепер є велике питання, про яке потрібно знати. Це означає, що ви віддалено завантажуєте код . Сучасні веб-браузери завантажують файл і продовжують виконувати ваш поточний сценарій, оскільки вони завантажують все асинхронно для підвищення продуктивності. (Це стосується як методу jQuery, так і методу завантаження динамічного сценарію вручну.)
Це означає, що якщо ви будете використовувати ці трюки безпосередньо, ви не зможете використати ваш щойно завантажений код наступного рядка після того, як ви попросили його завантажити , оскільки він все ще завантажується.
Наприклад: my_lovely_script.jsмістить MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Потім ви перезавантажуєте натискання сторінки F5. І це працює! Конфуз ...
То що робити з цим?
Що ж, ви можете використовувати хак, який пропонує автор, за посиланням, яке я вам дав. Підсумовуючи це, для людей, які поспішають, він використовує подію для запуску функції зворотного дзвінка під час завантаження сценарію. Таким чином, ви можете помістити весь код за допомогою віддаленої бібліотеки у функцію зворотного виклику. Наприклад:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
Потім ви пишете код, який хочете використовувати ПІСЛЯ сценарій завантажений у лямбда-функції :
var myPrettyCode = function() {
// Here, do whatever you want
};
Потім ви запускаєте все це:
loadScript("my_lovely_script.js", myPrettyCode);
Зауважте, що сценарій може виконуватися після завантаження DOM або раніше, залежно від браузера та того, чи ви включили рядок script.async = false;. Існує чудова стаття про завантаження Javascript в цілому, яка обговорює це.
Злиття вихідного коду / попередня обробка
Як уже згадувалося вгорі цієї відповіді, багато розробників використовують у своїх проектах інструменти збирання / транспіляції, такі як Parcel, Webpack або Babel, що дозволяють використовувати майбутній синтаксис JavaScript, забезпечують сумісність для старих браузерів, поєднують файли, мінімізують, виконувати розбиття коду тощо.