/ / differenze di sintassi tra i moduli CJS e ES6 - javascript, ecmascript-6, commonjs

differenze di sintassi tra i moduli CJS e ES6 - javascript, ecmascript-6, commonjs

Nei moduli CJS vorrei usare export e var plugin = require("plugin"); esportare / importare
Nei moduli ES6 vorrei usare export e import * as plugin from "plugin"; esportare / importare.

Ci sono più differenze di sintassi? queste differenze sono corrette?

Cosa fa export default e export *?

risposte:

6 per risposta № 1

I moduli CommonJS e i moduli ES6 sono piuttosto simili, ma hanno alcune differenze molto importanti da conoscere. Per rispondere direttamente alla tua domanda:

var plugin = require("plugin");

in ES6 sarebbe equivalente a entrambi

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

e / o

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

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

ma dipende da come è stato scritto "plugin" e se è stato scritto con ES6 export o CommonJS module.exports.

Le importazioni CommonJS hanno solo un singolo oggetto esportato. Quell'oggetto può essere una funzione, o un oggetto o qualcosa. Generalmente i moduli CommonJS lo fanno

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

per esportare le proprietà denominate. Possono anche esportare un oggetto "predefinito" come

module.exports = function(){};

La cosa fondamentale qui è che se si desidera sia un'esportazione predefinita che una denominata export, l'unica opzione è quella di mettere le proprietà direttamente nell'esportazione predefinita.

Moduli ES6

Per i moduli ES6, i concetti di esportazioni denominate e le esportazioni predefinite sono separate al 100%. per esempio.

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

La differenza principale è che

fn.foo !== foo;

Con questo esempio, ci sono due casi

Plugin usato 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 usato 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";

Importazione / esportazione di Live Binding

L'altra differenza principale nel tuo esempio è quella plugin è un legame dal vivo. Ciò significa che se viene aggiornato nel modulo in un secondo momento, si aggiornerà automaticamente nella tua importazione, ad es.

// plugin.js

export var foo = "foo";

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

// other.js

import {foo, update} from "plugin";

foo === "foo";

update();

foo === "bar"

e questo non sarebbe il caso se lo facessi

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