Saya masih sangat bingung tentang CommonJS, AMD dan RequireJS , bahkan setelah banyak membaca.

Saya tahu bahwa CommonJS (sebelumnya ServerJS ) adalah grup untuk mendefinisikan beberapa spesifikasi JavaScript (yaitu modul) ketika bahasa tersebut digunakan di luar browser. Spesifikasi modul CommonJS memiliki beberapa implementasi seperti Node.js atau RingoJS , kan?

Apa hubungan antara CommonJS , Asynchronous Module Definition (AMD) dan RequireJS ?

Apakah RequireJS merupakan implementasi dari definisi modul CommonJS ? Jika ya, lalu apa AMD itu?

RequireJS mengimplementasikan AMD API (sumber) .

CommonJS adalah cara mendefinisikan modul dengan bantuan exportsobjek, yang mendefinisikan konten modul. Sederhananya, implementasi CommonJS mungkin bekerja seperti ini:

// someModule.js
exports.doSomething = function() { return "foo"; };

//otherModule.js
var someModule = require('someModule'); // in the vein of node    
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };

Pada dasarnya, CommonJS menetapkan bahwa Anda harus memiliki require()fungsi untuk mengambil dependensi, exportsvariabel untuk mengekspor konten modul dan pengidentifikasi modul (yang menggambarkan lokasi modul yang terkait dengan modul ini) yang digunakan untuk memerlukan dependensi ( sumber ). CommonJS memiliki berbagai implementasi, termasuk Node.js , yang Anda sebutkan.

CommonJS tidak dirancang secara khusus dengan mempertimbangkan browser, sehingga tidak cocok di lingkungan browser dengan sangat baik ( saya benar-benar tidak memiliki sumber untuk ini - itu hanya mengatakan di mana-mana, termasuk situs RequireJS. ) Rupanya, ini memiliki sesuatu untuk lakukan dengan memuat asinkron, dll.

Di sisi lain, RequireJS mengimplementasikan AMD, yang dirancang agar sesuai dengan lingkungan browser ( sumber ). Rupanya, AMD dimulai sebagai spin-off dari format Transport CommonJS dan berkembang menjadi API definisi modulnya sendiri. Karenanya kesamaan antara keduanya. Fitur baru dalam AMD adalah define()fungsi yang memungkinkan modul untuk menyatakan dependensinya sebelum dimuat. Misalnya, definisi dapat berupa:

define('module/id/string', ['module', 'dependency', 'array'], 
function(module, factory function) {
  return ModuleContents;  
});

Jadi, CommonJS dan AMD adalah API definisi modul JavaScript yang memiliki implementasi yang berbeda, tetapi keduanya berasal dari sumber yang sama.

• AMD lebih cocok untuk browser, karena mendukung pemuatan dependensi modul yang tidak sinkron.
• RequireJS adalah implementasi AMD , sementara pada saat yang sama berusaha untuk menjaga semangat CommonJS (terutama dalam pengidentifikasi modul).

Untuk lebih membingungkan Anda, RequireJS, saat menjadi implementasi AMD, menawarkan pembungkus CommonJS sehingga modul-modul CommonJS hampir dapat langsung diimpor untuk digunakan dengan RequireJS.

define(function(require, exports, module) {
  var someModule = require('someModule'); // in the vein of node    
  exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});

Saya harap ini membantu untuk memperjelas hal-hal!

CommonJS lebih dari itu - ini adalah proyek untuk mendefinisikan API dan ekosistem umum untuk JavaScript. Salah satu bagian dari CommonJS adalah spesifikasi Modul . Node.js dan RingoJS adalah runtime JavaScript sisi-server, dan ya, keduanya mengimplementasikan modul berdasarkan spesifikasi Modul CommonJS.

AMD (Asynchronous Module Definition) adalah spesifikasi lain untuk modul. RequireJS mungkin merupakan implementasi AMD yang paling populer. Satu perbedaan utama dari CommonJS adalah bahwa AMD menetapkan bahwa modul dimuat secara tidak sinkron - itu artinya modul dimuat secara paralel, yang bertentangan dengan memblokir eksekusi dengan menunggu beban selesai.

AMD umumnya lebih banyak digunakan dalam pengembangan JavaScript sisi-klien (di-browser) karena ini, dan Modul CommonJS umumnya digunakan di sisi-server. Namun, Anda dapat menggunakan spesifikasi modul di lingkungan mana pun - misalnya, RequireJS menawarkan petunjuk untuk berjalan di Node.js dan browserify adalah implementasi Modul CommonJS yang dapat berjalan di browser.

Jawaban singkatnya adalah:

CommonJS dan AMD adalah spesifikasi (atau format) tentang bagaimana modul dan dependensinya harus dinyatakan dalam aplikasi javascript.

RequireJS adalah pustaka pemuat skrip yang kompatibel dengan AMD, dan ini contoh lainnya.

Sesuai dengan CommonJS:

Diambil dari buku Addy Osmani .

// package/lib is a dependency we require
var lib = require( "package/lib" );

// behavior for our module
function foo(){
    lib.log( "hello world!" );
}

// export (expose) foo to other modules as foobar
exports.foobar = foo;

Sesuai AMD:

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

Di tempat lain modul dapat digunakan dengan:

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

Beberapa latar belakang:

Sebenarnya, CommonJS lebih dari sekadar deklarasi API dan hanya sebagian yang membahasnya. AMD dimulai sebagai spesifikasi rancangan untuk format modul pada daftar CommonJS, tetapi konsensus penuh tidak tercapai dan pengembangan lebih lanjut dari format dipindahkan ke grup amdjs . Argumen di sekitar format mana yang lebih baik menyatakan bahwa CommonJS berupaya untuk mencakup serangkaian kekhawatiran yang lebih luas dan bahwa itu lebih cocok untuk pengembangan sisi server mengingat sifat sinkronnya, dan bahwa AMD lebih cocok untuk pengembangan sisi klien (browser) mengingat sifat asinkron dan karakteristiknya. fakta bahwa ia berakar pada implementasi modul deklarasi Dojo.

Sumber:

• RequireJS - Mengapa AMD?
• Addy Osmani - Mempelajari Pola Desain JavaScript - Pola Desain JavaScript Modular Modern

Mengutip

AMD :

• Satu pendekatan browser-pertama
• Memilih perilaku asinkron dan kompatibilitas mundur yang disederhanakan
• Itu tidak memiliki konsep File I / O.
• Ini mendukung objek, fungsi, konstruktor, string, JSON dan banyak jenis modul lainnya.

CommonJS :

• Pendekatan pertama server
• Dengan asumsi perilaku sinkron
• Meliputi serangkaian kekhawatiran yang lebih luas seperti I / O, sistem File, Janji dan banyak lagi.
• Mendukung modul yang tidak dibungkus, dapat terasa sedikit lebih dekat dengan ES.next/Harmony spesifikasi, membebaskan Anda dari pembungkus define () yang AMDmemberlakukan.
• Hanya mendukung objek sebagai modul.

Cukup normal untuk mengatur program JavaScript menjadi beberapa file dan untuk memanggil child-modulesdari main js module.

Masalahnya adalah JavaScript tidak menyediakan ini. Bahkan hari ini di Chrome dan FF versi browser terbaru.

Tapi, apakah ada kata kunci dalam JavaScript untuk memanggil modul JavaScript lain?

Pertanyaan ini mungkin menjadi kehancuran total dunia bagi banyak orang karena jawabannya adalah TIDAK .

Dalam ES5 (dirilis pada 2009) JavaScript tidak memiliki kata kunci seperti impor , sertakan , atau butuhkan .

ES6 menyimpan hari (dirilis pada 2015) dengan mengajukan kata kunci impor ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ), tetapi tidak ada browser yang mengimplementasikannya.

Jika Anda menggunakan Babel 6.18.0 dan transpile dengan opsi ES2015 saja

import myDefault from "my-module";

kamu akan mendapatkan requirelagi.

"use strict";
var _myModule = require("my-module");
var _myModule2 = _interopRequireDefault(_myModule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

Ini karena requireberarti modul akan diambil dari Node.js. Node.js akan menangani semuanya mulai dari membaca file tingkat sistem hingga fungsi pembungkus ke dalam modul.

Karena dalam fungsi JavaScript adalah satu-satunya pembungkus yang mewakili modul.

Saya banyak bingung tentang CommonJS dan AMD?

Baik CommonJS dan AMD hanyalah dua teknik berbeda cara mengatasi JavaScript "cacat" untuk memuat modul pintar.