Les modules sont indispensables dans le fonctionnement de tous les outils se basant sur JavaScript. Ils permettent de pouvoir faire communiquer plusieurs fichiers JavasScript distincts ensemble. Coté navigateurs, à ce jour en 2017, ils ne sont toujours nativement pas implémentés, mais de nombreux outils permettent de le contourner. Il existe principalement 3 standards, 2 historiques pour compenser ce besoin, et 1 provenant du comité ECMAscript, supplantant de facto les 2 précédents et les rendant caduques.
Ces deux standards historiques sont CJS et AMD.
Et ES6 et le standard unifié qui reprend leur principes permettant d'utiliser les imports et les exports, supplantant les modules CJS et AMD.
Deux articles (en) :
- http://www.2ality.com/2014/09/es6-modules-final.html
- https://medium.com/@brianleroux/es6-modules-amd-and-commonjs-c1acefbe6fc0
module.exports = something- Synchrone
- Pensé pour une utilisation au sein des navigateurs (mais pas par les navigateurs)
- Utilisé par node
- Dynamique
- Devrait être à terme remplacé par les ES6 Modules
- Utilisé par Webpack 1
- permet le "tree shake", mais a priori pas par son implémentation dans Webpack 1.
Asynchronous Module Design (AMD)
define(function () {
return something
})- Asynchrone
- Dynamique
- Surtout connu via son inplémentation (require.js)
- On peut le considérer comme remplacé par ES6
export function () {
return something;
}- Synchrone pour le moment, potentiellement asynchrone dans le futur (system.import)
- Statique
- A ce jour toujours pas implémenté en natif dans les navigateurs (nécessite donc des outils)
- Permet le "tree shake" au sein de Webpack 2