/ Différences syntaxiques entre les modules CJS et ES6 - javascript, ecmascript-6, commonjs

Différences de syntaxe entre les modules CJS et ES6 - javascript, ecmascript-6, commonjs

Dans les modules CJS, j'utiliserais export et var plugin = require("plugin"); exporter / importer
Dans les modules ES6, j'utiliserais export et import * as plugin from "plugin"; exporter / importer.

Y a-t-il plus de différences de syntaxe? Ces différences sont-elles correctes?

Qu'est ce que export default et export *?

Réponses:

6 pour la réponse № 1

Les modules CommonJS et ES6 sont assez similaires, mais ils ont des différences très importantes à prendre en compte. Pour répondre directement à votre question:

var plugin = require("plugin");

dans ES6 serait équivalent à la fois

// Import all named exports of "plugin".
import * as plugin from "plugin";

et / ou

// Import default export of "plugin".
import plugin from "plugin";

// an alias of
import {default as plugin} from "plugin";

mais cela dépend de la façon dont le "plugin" a été écrit et s'il a été écrit avec ES6 export ou CommonJS module.exports.

Les importations CommonJS ne comportent qu'un seul objet exporté. Cet objet peut être une fonction, ou un objet, ou autre chose. Généralement, les modules CommonJS font

exports.foo = ...;
exports.bar = ...;

exporter des propriétés nommées. Ils peuvent également exporter un objet "par défaut" en tant que

module.exports = function(){};

La chose fondamentale ici est que si vous voulez une exportation par défaut ET des exportations nommées, votre seule option est de placer les propriétés directement sur l’exportation par défaut.

Modules ES6

Pour les modules ES6, les concepts d'exportations nommées et d'exportations par défaut sont séparés à 100%. par exemple.

export var foo = ...;
export var bar = ...;
export default function fn(){};

La principale différence étant que

fn.foo !== foo;

Avec cet exemple alors, il y a deux cas

Plugin utilisé ES6 export

import * as plugin from "plugin";

plugin.foo === ...;
plugin.bar === ...;
typeof plugin === "object";

import plugin from "plugin";

plugin.foo === undefined;
plugin.bar === undefined;
typeof plugin === "function";

Plugin utilisé CommonJS module.exports

import * as plugin from "plugin";

plugin.foo === ...;
plugin.bar === ...;
typeof plugin === "object";

import plugin from "plugin";

plugin.foo === ...;
plugin.bar === ...;
typeof plugin === "function";

Live Binding import / export

L’autre principale différence dans votre exemple est que plugin est une liaison en direct. Cela signifie que s'il est mis à jour ultérieurement dans le module, il se mettra à jour dans votre importation, par exemple.

// plugin.js

export var foo = "foo";

export function update(){
foo = "bar";
}

// other.js

import {foo, update} from "plugin";

foo === "foo";

update();

foo === "bar"

et ce ne serait pas le cas si vous avez

var foo = require("plugin").foo;
var update = require("plugin").update;