L'utilisation de Node.js nécessite une importation / exportation ES6

Dans un projet sur lequel je collabore, nous avons deux choix sur le système de modules que nous pouvons utiliser:

1. Importation de modules à l'aide requireet exportation à l'aide de module.exportset exports.foo.
2. Importation de modules à l'aide d'ES6 importet exportation à l'aide d'ES6export

Y a-t-il des avantages en termes de performances à utiliser l'un par rapport à l'autre? Y a-t-il autre chose que nous devrions savoir si nous devions utiliser des modules ES6 sur des modules Node?

Y a-t-il des avantages en termes de performances à utiliser l'un par rapport à l'autre?

Gardez à l'esprit qu'il n'y a pas encore de moteur JavaScript qui supporte nativement les modules ES6. Vous avez dit vous-même que vous utilisez Babel. Babel convertit importet exportdéclare par défaut CommonJS ( require/ module.exports). Donc, même si vous utilisez la syntaxe du module ES6, vous utiliserez CommonJS sous le capot si vous exécutez le code dans Node.

Il existe des différences techniques entre les modules CommonJS et ES6, par exemple CommonJS vous permet de charger les modules dynamiquement. ES6 ne le permet pas, mais il existe une API en développement pour cela .

Étant donné que les modules ES6 font partie de la norme, je les utiliserais.

Il y a plusieurs utilisations / capacités que vous voudrez peut-être considérer:

Exiger:

• Vous pouvez avoir un chargement dynamique lorsque le nom du module chargé n'est pas prédéfini / statique, ou lorsque vous chargez un module de manière conditionnelle uniquement s'il est "vraiment requis" (en fonction d'un certain flux de code).
• Le chargement est synchrone. Cela signifie que si vous avez plusieurs requires, ils sont chargés et traités un par un.

Importations ES6:

• Vous pouvez utiliser des importations nommées pour charger sélectivement uniquement les pièces dont vous avez besoin. Cela peut économiser de la mémoire.
• L'importation peut être asynchrone (et dans le chargeur de module ES6 actuel, en fait) et peut fonctionner un peu mieux.

De plus, le système de modules requis n'est pas basé sur des normes. Il est hautement improbable de devenir standard maintenant que les modules ES6 existent. À l'avenir, il y aura une prise en charge native des modules ES6 dans diverses implémentations, ce qui sera avantageux en termes de performances.

Les principaux avantages sont syntaxiques:

• Syntaxe plus déclarative / compacte
• Les modules ES6 rendront fondamentalement UMD (Universal Module Definition) obsolète - supprime essentiellement le schisme entre CommonJS et AMD (serveur vs navigateur).

Il est peu probable que vous constatiez des avantages en termes de performances avec les modules ES6. Vous aurez toujours besoin d'une bibliothèque supplémentaire pour regrouper les modules, même s'il existe une prise en charge complète des fonctionnalités ES6 dans le navigateur.

Y a-t-il des avantages en termes de performances à utiliser l'un par rapport à l'autre?

La réponse actuelle est non, car aucun des moteurs de navigateur actuels n'est implémenté à import/exportpartir de la norme ES6.

Certains tableaux de comparaison http://kangax.github.io/compat-table/es6/ ne prennent pas cela en compte, donc lorsque vous voyez presque tous les verts pour Chrome, faites juste attention. importmot-clé de ES6 n'a pas été pris en compte.

En d'autres termes, les moteurs de navigateur actuels, y compris V8, ne peuvent pas importer de nouveau fichier JavaScript à partir du fichier JavaScript principal via une directive JavaScript.

(Il se peut que nous ne soyons encore qu'à quelques bugs ou dans des années jusqu'à ce que V8 implémente cela selon la spécification ES6.)

Ce document est ce dont nous avons besoin, et ce document est ce que nous devons obéir.

Et la norme ES6 a dit que les dépendances du module devraient être là avant de lire le module comme dans le langage de programmation C, où nous avions des .hfichiers (en-têtes) .

Il s'agit d'une structure bonne et bien testée, et je suis sûr que les experts qui ont créé la norme ES6 avaient cela en tête.

C'est ce qui permet à Webpack ou à d'autres groupeurs de packages d'optimiser le bundle dans certains cas spéciaux et de réduire certaines dépendances du bundle qui ne sont pas nécessaires. Mais dans les cas où nous avons des dépendances parfaites, cela ne se produira jamais.

Il faudra un certain temps jusqu'à ce que import/exportle support natif soit mis en ligne, et le requiremot - clé n'ira nulle part longtemps.

Qu'est-ce que c'est require?

C'est une node.jsfaçon de charger des modules. ( https://github.com/nodejs/node )

Le nœud utilise des méthodes au niveau du système pour lire les fichiers. Vous comptez essentiellement sur cela lors de l'utilisation require. requirese terminera par un appel système comme uv_fs_open(dépend du système final, Linux, Mac, Windows) pour charger le fichier / module JavaScript.

Pour vérifier que cela est vrai, essayez d'utiliser Babel.js, et vous verrez que le importmot - clé sera converti en require.

L'utilisation de modules ES6 peut être utile pour «secouer l'arbre»; c'est-à-dire permettre à Webpack 2, Rollup (ou à d'autres bundlers) d'identifier les chemins de code qui ne sont pas utilisés / importés, et par conséquent ne pas en faire le bundle résultant. Cela peut réduire considérablement la taille de son fichier en éliminant le code dont vous n'aurez jamais besoin, mais avec CommonJS est fourni par défaut car Webpack et al n'ont aucun moyen de savoir s'il est nécessaire.

Cela se fait à l'aide d'une analyse statique du chemin du code.

Par exemple, en utilisant:

import { somePart } 'of/a/package';

... donne au bundler un indice qui package.anotherPartn'est pas requis (s'il n'est pas importé, il ne peut pas être utilisé, n'est-ce pas?), donc cela ne dérangera pas de le regrouper.

Pour l'activer pour Webpack 2, vous devez vous assurer que votre transpilateur ne crache pas de modules CommonJS. Si vous utilisez le es2015plug-in avec babel, vous pouvez le désactiver .babelrccomme vous le souhaitez:

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

Le cumul et d'autres peuvent fonctionner différemment - consultez les documents si vous êtes intéressé.

En ce qui concerne le chargement asynchrone ou peut-être paresseux, import ()c'est beaucoup plus puissant. Voyez quand nous avons besoin du composant de manière asynchrone, puis nous l'utilisons importd'une manière asynchrone comme dans l' constutilisation de variables await.

const module = await import('./module.js');

Ou si vous souhaitez utiliser require()alors,

const converter = require('./converter');

La chose est en import()fait asynchrone dans la nature. Comme mentionné par neehar venugopal dans ReactConf , vous pouvez l'utiliser pour charger dynamiquement des composants React pour l'architecture côté client.

De plus, c'est beaucoup mieux quand il s'agit de routage. C'est la seule chose spéciale qui fait que le journal réseau télécharge une partie nécessaire lorsque l'utilisateur se connecte à un site Web spécifique à son composant spécifique. Par exemple, la page de connexion avant que le tableau de bord ne télécharge pas tous les composants du tableau de bord. Parce que ce qui est nécessaire, c'est-à-dire le composant de connexion actuel, ce sera seulement téléchargé.

Il en va de même pour export: ES6 exportsont exactement les mêmes que pour CommonJS module.exports.

REMARQUE - Si vous développez un projet node.js, vous devez alors strictement l'utiliser require()car le nœud générera une erreur d'exception comme invalid token 'import'si vous l'utilisiez import. Le nœud ne prend donc pas en charge les instructions d'importation.

MISE À JOUR - Comme suggéré par Dan Dascalescu : depuis la v8.5.0 (sortie en septembre 2017), node --experimental-modules index.mjsvous permet de l'utiliser importsans Babel. Vous pouvez (et devez) également publier vos packages npm en tant que ESModule natif, avec une compatibilité descendante pour l'ancienne requireméthode.

Voir ceci pour plus de clairance sur l'utilisation des importations asynchrones - https://www.youtube.com/watch?v=bb6RCrDaxhw

La chose la plus importante à savoir est que les modules ES6 sont, en effet, une norme officielle, contrairement aux modules CommonJS (Node.js).

En 2019, les modules ES6 sont pris en charge par 84% des navigateurs. Bien que Node.js les place derrière un indicateur --experimental-modules , il existe également un package de nœuds pratique appelé esm , qui facilite l'intégration.

Un autre problème que vous risquez de rencontrer entre ces systèmes de modules est l'emplacement du code. Node.js suppose que la source est conservée dans un node_modulesrépertoire, tandis que la plupart des modules ES6 sont déployés dans une structure de répertoire plate. Ce ne sont pas faciles à réconcilier, mais cela peut être fait en piratant votre package.jsonfichier avec des scripts de pré et post-installation. Voici un exemple de module isomorphe et un article expliquant comment cela fonctionne.

J'utilise personnellement l'importation parce que, nous pouvons importer les méthodes requises, les membres en utilisant l'importation.

import {foo, bar} from "dep";

FileName: dep.js

export foo function(){};
export const bar = 22

Le mérite revient à Paul Shan. Plus d'infos .

À partir de maintenant l'importation ES6, l'exportation est toujours compilée vers CommonJS , il n'y a donc aucun avantage à utiliser l'une ou l'autre. Bien que l'utilisation d'ES6 soit recommandée car elle devrait être avantageuse lors de la prise en charge native des navigateurs. La raison en est que vous pouvez importer des partiels à partir d'un fichier alors qu'avec CommonJS, vous devez exiger tout le fichier.

ES6 → import, export default, export

CommonJS → require, module.exports, exports.foo

Ci-dessous est l'utilisation courante de ceux-ci.

Export par défaut ES6

// hello.js
function hello() {
  return 'hello'
}
export default hello

// app.js
import hello from './hello'
hello() // returns hello

ES6 exporte plusieurs et importe plusieurs

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
export { hello1, hello2 }

// app.js
import { hello1, hello2 } from './hello'
hello1()  // returns hello1
hello2()  // returns hello2

CommonJS module.exports

// hello.js
function hello() {
  return 'hello'
}
module.exports = hello

// app.js
const hello = require('./hello')
hello()   // returns hello

CommonJS module.exports multiple

// hello.js
function hello1() {
  return 'hello1'
}
function hello2() {
  return 'hello2'
}
module.exports = {
  hello1,
  hello2
}

// app.js
const hello = require('./hello')
hello.hello1()   // returns hello1
hello.hello2()   // returns hello2

Je ne sais pas pourquoi (probablement optimisation - chargement paresseux?) Ça fonctionne comme ça, mais j'ai remarqué que le importcode ne peut pas être analysé si les modules importés ne sont pas utilisés.
Ce qui peut ne pas être un comportement attendu dans certains cas.

Prenez la classe Foo détestée comme exemple de dépendance.

foo.ts

export default class Foo {}
console.log('Foo loaded');

Par exemple:

index.ts

import Foo from './foo'
// prints nothing

index.ts

const Foo = require('./foo').default;
// prints "Foo loaded"

index.ts

(async () => {
    const FooPack = await import('./foo');
    // prints "Foo loaded"
})();

D'autre part:

index.ts

import Foo from './foo'
typeof Foo; // any use case
// prints "Foo loaded"