Utilisation Du Noeud.js require vs. ES6 import / export

il y a plusieurs utilisations / capacités que vous pourriez considérer:

Exiger:

• vous pouvez avoir un chargement dynamique où le nom du module chargé n'est pas prédéfinie / statique, ou lorsque vous chargez un module uniquement si c'est" vraiment nécessaire " (selon le flux de code).
• chargement est synchrone. Cela signifie que si vous avez plusieurs require s, ils sont chargés et traités un par un.

ES6 Imports:

• vous pouvez utiliser importations nommées pour charger sélectivement seulement les pièces dont vous avez besoin. Qui peut économiser de la mémoire.
• importation peut être asynchrone (et dans le chargeur de Module ES6 actuel, il est en fait) et peut fonctionner un peu mieux.

de plus, le système Require module n'est pas standardisé. Il est très peu probable qu'il devienne standard maintenant que les modules ES6 existent. Dans l'avenir, il sera le support natif pour les Modules ES6 dans diverses implémentations qui seront avantageuses en termes de performance.

les principaux avantages sont syntaxiques:

• plus de syntaxe déclarative / compacte
Les modules
• ES6 vont essentiellement rendre UMD (Universal Module Definition) obsolète - supprime essentiellement le schisme entre CommonJS et AMD (server vs browser).

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

y a-t-il des avantages liés au rendement à utiliser l'un par rapport à l'autre?

la réponse actuelle est non, parce qu'aucun des moteurs de navigateur actuels n'implémente import/export de la norme ES6.

Certains tableaux de comparaison http://kangax.github.io/compat-table/es6/ ne pas prendre cela en compte, de sorte que quand vous voyez presque tous les greens pour Chrome, il suffit de faire attention. import mot 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 nouveau fichier JavaScript à partir du fichier JavaScript principal via n'importe quelle directive JavaScript.

(nous pouvons être encore juste quelques bugs loin ou années loin jusqu'à ce que V8 implémente que 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 dit que les dépendances de module devraient être là avant que nous lisions le module comme dans le langage de programmation C, où nous avions (headers) .h fichiers.

il s'agit d'une structure bonne et éprouvée, et je suis sûr que les experts qui ont créé la norme ES6 avaient cela à l'esprit.

C'est ce qui permet à Webpack ou à d'autres package bundlers d'optimiser le pack dans certains cas Spéciaux , et de réduire certaines dépendances du package qui ne sont pas nécessaires. Mais dans les cas que nous avons parfait dépendances cela n'arrivera jamais.

il aura besoin d'un certain temps jusqu'à ce que import/export support natif va en direct, et le mot-clé require n'ira nulle part pendant une longue période.

Qu'est-ce que require ?

C'est node.js façon de charger les modules. ( https://github.com/nodejs/node )

Node utilise des méthodes au niveau du système pour lire les fichiers. Vous vous basez essentiellement sur cela en utilisant require . require se 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 c'est vrai, essayez d'utiliser Babel.js, et vous verrez que la Le mot-clé import sera converti en require .

utilisant des modules ES6 peut être utile pour "tree shaking", c'est-à-dire permettre à Webpack 2, Rolllup (ou d'autres bundlers) d'identifier des chemins de code qui ne sont pas utilisés/importés, et donc ne le font pas dans le faisceau 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 regroupé par défaut parce que Webpack et al n'ont aucun moyen de savoir si c'est nécessaire.

Ceci est fait en utilisant l'analyse statique du chemin du code.

par exemple, en utilisant:

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

... donne au bundler une indication que package.anotherPart n'est pas nécessaire (s'il n'est pas importé, il ne peut pas être utilisé - n'est-ce pas?), afin de ne pas déranger le regroupement.

pour activer ceci pour Webpack 2, vous devez vous assurer que votre transpirateur ne recrache pas les modules CommonJS. Si vous utilisez le plug-in es2015 avec babel, vous pouvez le désactiver dans votre .babelrc comme ceci:

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

Cumulatif et d'autres peuvent travailler différemment - voir la documentation si vous êtes intéressé.

quand il s'agit d'async ou peut-être de chargement paresseux, alors import () est beaucoup plus puissant. Voir quand nous avons besoin de component de manière asynchrone, alors seulement nous l'importons de manière asynchrone comme dans la variable const .

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

ou si vous voulez utiliser require() alors,

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

chose est import() est en fait async dans la nature. Comme mentionné par neehar venugopal dans ReactConf, vous pouvez l'utiliser pour charger dynamiquement composant.

aussi il est beaucoup mieux quand il s'agit de routage. C'est la seule chose spéciale qui rend journal de réseau pour télécharger la partie nécessaire lorsque l'utilisateur se connecte à un site Web spécifique à son composant spécifique. par exemple. page de connexion avant dashboard ne téléchargerait pas tous les composants de dashboard. Parce que ce qui est nécessaire, c'est-à-dire le composant de connexion, ne sera téléchargé que.

NOTE - si vous développez une nœud.js project, alors vous devez utiliser strictement require() comme noeud lancera l'erreur d'exception comme invalid token 'import' si vous utilisez import . Ainsi le noeud ne supporte pas les déclarations d'importation

UPDATE - As suggested by Dan Dascalescu : Since v8.5.0 (sorti en septembre 2017), node --experimemntal-modules index.mjs vous permet d'utiliser import sans Babel. Vous pouvez (et devriez) aussi publier vos paquets npm en tant que natif ESModule, avec compatibilité ascendante pour l'ancienne require .

voir ce qui suit pour plus de précisions sur l'utilisation de async imports - https://www.youtube.com/watch?v=bb6RCrDaxhw

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

import {foo, bar} from "dep";

nom de fichier: dep.js

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

le crédit va à Paul Shan. Plus d'infos .