Versi lama JavaScript tidak mengimpor, memasukkan, atau mengharuskan, begitu banyak pendekatan berbeda untuk masalah ini telah dikembangkan.
Tetapi sejak 2015 (ES6), JavaScript telah memiliki standar modul ES6 untuk mengimpor modul di Node.js, yang juga didukung oleh sebagian besar peramban modern .
Untuk kompatibilitas dengan browser yang lebih lama, alat build seperti Webpack dan Rollup dan / atau alat transpilasi seperti Babel dapat digunakan.
Modul ES6
Modul ECMAScript (ES6) telah didukung di Node.js sejak v8.5, dengan --experimental-modulesflag, dan setidaknya Node.js v13.8.0 tanpa flag. Untuk mengaktifkan "ESM" (vs. sistem modul CommonJS-gaya sebelumnya Node.js ini [ "CJS"]) Anda baik menggunakan "type": "module"di package.jsonatau memberikan file ekstensi .mjs. (Demikian pula, modul yang ditulis dengan modul CJS Node.js sebelumnya dapat dinamai .cjsjika default Anda adalah ESM.)
Menggunakan package.json:
{
"type": "module"
}
Lalu module.js:
export function hello() {
return "Hello";
}
Lalu main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
Dengan menggunakan .mjs, Anda harus module.mjs:
export function hello() {
return "Hello";
}
Lalu main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
Modul ECMAScript di browser
Browser telah mendapat dukungan untuk memuat modul ECMAScript secara langsung (tidak diperlukan alat seperti Webpack) sejak Safari 10.1, Chrome 61, Firefox 60, dan Edge 16. Periksa dukungan saat ini di caniuse . Tidak perlu menggunakan .mjsekstensi Node.js ; browser sepenuhnya mengabaikan ekstensi file pada modul / skrip.
<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);
}
Baca lebih lanjut di https://jakearchibald.com/2017/es-modules-in-browsers/
Impor dinamis di browser
Impor dinamis membiarkan skrip memuat skrip lain sesuai kebutuhan:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Baca lebih lanjut di https://developers.google.com/web/updates/2017/11/dynamic-import
Node.js membutuhkan
Gaya modul CJS yang lebih lama, masih banyak digunakan di Node.js, adalah module.exports/require sistem.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Ada cara lain untuk JavaScript untuk memasukkan konten JavaScript eksternal di browser yang tidak memerlukan preprocessing.
Memuat AJAX
Anda dapat memuat skrip tambahan dengan panggilan AJAX dan kemudian gunakan evaluntuk menjalankannya. Ini adalah cara yang paling mudah, tetapi terbatas pada domain Anda karena model keamanan JavaScript sandbox. Menggunakan evaljuga membuka pintu bagi bug, peretasan, dan masalah keamanan.
Ambil Memuat
Seperti Impor dinamis, Anda dapat memuat satu atau banyak skrip dengan fetchpanggilan menggunakan janji untuk mengontrol urutan eksekusi untuk dependensi skrip menggunakan pustaka Inject Ambil :
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 Sedang Memuat
The jQuery perpustakaan menyediakan memuat fungsi dalam satu baris :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Memuat Script Dinamis
Anda dapat menambahkan tag skrip dengan URL skrip ke dalam HTML. Untuk menghindari overhead jQuery, ini adalah solusi ideal.
Skrip bahkan dapat berada di server yang berbeda. Selanjutnya, browser mengevaluasi kode. The <script>tag dapat disuntikkan ke dalam salah satu halaman web <head>, atau dimasukkan sebelum penutupan </body>tag.
Berikut adalah contoh bagaimana ini bisa bekerja:
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)
}
Fungsi ini akan menambahkan <script>tag baru ke akhir bagian kepala halaman, di mana srcatribut diatur ke URL yang diberikan ke fungsi sebagai parameter pertama.
Kedua solusi ini dibahas dan diilustrasikan dalam JavaScript Madness: Dynamic Script Loading .
Mendeteksi ketika skrip telah dieksekusi
Sekarang, ada masalah besar yang harus Anda ketahui. Melakukan hal itu menyiratkan bahwa Anda memuat kode dari jarak jauh . Browser web modern akan memuat file dan terus mengeksekusi skrip Anda saat ini karena mereka memuat semuanya secara tidak sinkron untuk meningkatkan kinerja. (Ini berlaku untuk metode jQuery dan metode pemuatan skrip dinamis manual.)
Ini berarti bahwa jika Anda menggunakan trik ini secara langsung, Anda tidak akan dapat menggunakan kode yang baru dimuat di baris berikutnya setelah Anda memintanya untuk dimuat , karena masih akan memuat.
Misalnya: my_lovely_script.jsberisi 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
Kemudian Anda memuat kembali halaman yang sedang dipukul F5. Dan itu berhasil! Membingungkan ...
Jadi apa yang harus dilakukan?
Nah, Anda dapat menggunakan retasan yang disarankan penulis di tautan yang saya berikan kepada Anda. Singkatnya, untuk orang-orang yang terburu-buru, ia menggunakan acara untuk menjalankan fungsi panggilan balik ketika skrip dimuat. Jadi Anda bisa meletakkan semua kode menggunakan pustaka jarak jauh di fungsi panggilan balik. Sebagai contoh:
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);
}
Kemudian Anda menulis kode yang ingin Anda gunakan SETELAH skrip dimuat dalam fungsi lambda :
var myPrettyCode = function() {
// Here, do whatever you want
};
Kemudian Anda jalankan semua itu:
loadScript("my_lovely_script.js", myPrettyCode);
Perhatikan bahwa skrip dapat dijalankan setelah DOM dimuat, atau sebelumnya, tergantung pada browser dan apakah Anda menyertakan baris script.async = false;. Ada artikel hebat tentang pemuatan Javascript secara umum yang membahas hal ini.
Source Code Merge / Preprocessing
Seperti yang disebutkan di bagian atas jawaban ini, banyak pengembang menggunakan alat build / transpilation (s) seperti Parcel, Webpack, atau Babel dalam proyek mereka, memungkinkan mereka untuk menggunakan sintaks JavaScript yang akan datang, memberikan kompatibilitas ke belakang untuk browser lama, menggabungkan file, memperkecil, melakukan pemecahan kode dll.