Comment utiliser l'importation et l'exportation dans node.js-js tutoriel-php.cn

Comment utiliser l'importation et l'exportation dans node.js

小云云

Libérer： 2018-01-30 09:47:22

original

1848 Les gens l'ont consulté

L'importation et l'exportation sont des importations et des exportations modulaires dans es6, qui ne sont pas prises en charge par node.js à ce stade. Elles doivent être compilées via babel pour les transformer en code modulaire de node.js. (Pour le module node.js, veuillez vous référer à d'autres articles modulaires node.js) Cet article présente principalement l'explication détaillée de l'utilisation de l'importation et de l'exportation dans node.js. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager. avec vous et faites-le pour que tout le monde s'y réfère. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

exposition à l'exportation

Utilisez l'exportation pour exposer des méthodes, des objets, des chaînes, etc., comme indiqué dans le code suivant

//写法1
export var foo=function(){
  console.log(1);
}
//写法2
var bar ={a:"1",b:2};
export {bar};
//写法3
var baz=&#39;hello world&#39;;
export {baz as qux};

Copier après la connexion

Ensuite, après avoir été compilé par babel, le code ci-dessus devient du code node.js exécutable, comme suit

"use strict";
//标记这个模块是es的模块
Object.defineProperty(exports, "__esModule", {
  value: true
});
//写法1
var foo = exports.foo = function foo() {
  console.log(1);
};
//写法2
var bar = { a: "1", b: 2 };
exports.bar = bar;
//写法3

var baz = &#39;hello world&#39;;
exports.qux = baz;

Copier après la connexion

En voyant le code ci-dessus, nous Compris, l'exportation d'es6 sera convertie en méthode d'exposition des exportations dans node.js.

import import

Voyons comment écrire import Introduisons le fichier xx.js qui écrit export ci-dessus

Le premier. façon d'écrire

import {foo,qux} from &#39;./xx&#39;;
console.log(qux);

Copier après la connexion

foo, qux sont les attributs que nous exposons dans xx.js. Les attributs exposés dans xx.js incluent foo, bar, qux3. , on voit que cette méthode d'écriture nécessite de connaître les noms des attributs exposés dans le fichier importé, et peut être écrite selon les besoins sans énumérer tous les attributs.

Jetons un coup d'œil au code compilé par Babel :

&#39;use strict&#39;;
var _ = require(&#39;./xx&#39;);
console.log(_.qux);

Copier après la connexion

est une méthode require simple, introduisant xx.js, donc dans de cette façon, nous pouvons introduire des modules es6 ou des modules node.js.

La deuxième façon d'écrire

import * as xx from &#39;./xx&#39;;
console.log(xx.bar);

Copier après la connexion

Ici, nous introduisons encore xx.js. Cette façon d'écrire mettra xx. .js dans Les attributs exposés sont tous attribués à la variable xx (en fait, c'est un alias pour module.exports). Après avoir été compilé par babel, c'est comme suit :

<. 🎜>

&#39;use strict&#39;;
var _ = require(&#39;./xx&#39;);
var xx = _interopRequireWildcard(_);
function _interopRequireWildcard(obj) {
  //判断是node模块还是es模块
  if (obj && obj.__esModule) {
    return obj;
  }
  else {
    var newObj = {};
    if (obj != null) {
      for (var key in obj) { 
        if (Object.prototype.hasOwnProperty.call(obj, key)) 
         newObj[key] = obj[key];
      }
    }
  //兼容旧的babel编译
    newObj.default = obj;
    console.log(newObj);
    return newObj;
  }
}
console.log(xx.bar);

Copier après la connexion

Voir ci-dessus Le code permet de juger s'il s'agit d'un module nœud ou d'un module es. Cette méthode d'écriture est également compatible avec le module es et le module nœud.

La troisième façon d'écrire

import oo from &#39;./xx&#39;
console.log(oo.bar);

Copier après la connexion

Dans cette façon d'écrire oo est une variable arbitraire, qui peut apparaître à premier coup d'œil Cela semble être la même chose que la deuxième façon d'écrire, mais ce n'est pas le cas Jetez un œil au code compilé :

&#39;use strict&#39;;
var _ = require(&#39;./xx&#39;);
var _2 = _interopRequireDefault(_);
function _interopRequireDefault(obj) { 
 return obj && obj.__esModule ? obj : 
 { default: obj }; 
}
console.log(_2.default.bar);

Copier après la connexion

Dans la dernière ligne. , oo.bar est compilé en _ 2.default.bar, il y a un autre défaut, bien sûr la barre ici est introuvable, donc cette utilisation n'est pas utilisée pour introduire l'attribut d'exportation, mais la valeur par défaut d'exportation mentionnée ci-dessous.

La valeur par défaut d'exportation est exposée et exposée en même temps

Je résumerai l'exportation et la valeur par défaut dans d'autres articles. Ici, nous parlons uniquement de l'utilisation de la valeur par défaut d'exportation. regarde le code.

var foo=123;
export default foo;

Copier après la connexion

Après avoir été compilé par babel

"use strict";
Object.defineProperty(exports, "__esModule", {
 value: true
});
var foo = 123;
exports.default = foo;

Copier après la connexion

Voyez que la dernière ligne de foo sera attribué aux exports .default, qui correspond à la méthode d'écriture d'import oo from './xx', qui appellera les propriétés par défaut, donc ces deux usages doivent être utilisés en conséquence. Puisque la valeur de l'attribut sera attribuée à exports.default, alors l'utilisation suivante peut être utilisée

export default 123;

Copier après la connexion

export default {foo:123};

Copier après la connexion

export default function f(){}

Copier après la connexion

export default function (){}

Copier après la connexion

Le code ci-dessus est écrit séparément, car l'exportation par défaut ne peut être utilisée qu'une seule fois dans un js, la raison est la même que en utilisant module.exports, en plus de ne pas pouvoir en écrire plus d'un, ce qui suit est également faux à écrire :

export default var foo=123; //错误

Copier après la connexion

export default peut également être utilisé pour exposer les classes. Je n'entrerai pas dans les détails ici, elles sont toutes exposées.

Quelques autres utilisations

Héritage

Voici l'héritage de module, qui est en fait un module parent introduisant un module enfant. Ensuite les attributs exposés par le sous-module sont exposés :

export * from &#39;./xx&#39;;

Copier après la connexion

Après avoir été compilés,

&#39;use strict&#39;;
Object.defineProperty(exports, "__esModule", {
 value: true
});
var _ = require(&#39;./xx&#39;);
Object.keys(_).forEach(function (key) {
 if (key === "default" || key === "__esModule") return;
 Object.defineProperty(exports, key, {
  enumerable: true,
  get: function get() {
   return _[key];
  }
 });
});

Copier après la connexion

Notez la phrase suivante

if (key === "default" || key === "__esModule") return;

Copier après la connexion

L'attribut par défaut n'est pas exposé au monde extérieur... Cela montre qu'en utilisant exports default dans le fichier xx.js, nous importé n'est pas valide. Oui, la méthode d'écriture alternative est

export {default} from &#39;./xx&#39;;

Copier après la connexion

La méthode d'écriture héritée est souvent utilisée pour organiser plusieurs modules et est souvent utilisée avec le package d'introduction. mentionné ci-dessous

Introduire les dossiers (introduire les packages)

Beaucoup de gens ne comprennent pas la ligne de code suivante

import * as o from &#39;./oo&#39;; //oo是个文件

Copier après la connexion

Pourquoi l'importation peut introduire des dossiers, veuillez noter que tous les dossiers ne feront pas l'affaire. Au moins un fichier est index.js ou package.json et js avec un autre nom car il y a index.js dans le dossier. alors ce n'est pas un dossier mais node.js Packaged (voir l'article sur le package node.js pour plus d'informations), import sera compilé dans require par babel require peut faire référence au package du chemin spécifié. un dossier. On peut compter sur index.js pour importer le dossier. D'autres codes de fichiers sont exportés, par exemple :

<. 🎜>

Nous pouvons en obtenir 1 en important le dossier oo Attributs exposé dans js et 2.js.

//index.js
export * from &#39;./1&#39;;
export * from &#39;./2&#39;;

Copier après la connexion

Résumé

En regardant le code compilé par babel, nous pouvons voir que l'utilisation de export et exports, module.exports et export default sont similaires. Quant à ce qu'il faut utiliser et comment l'utiliser, cela dépend des préférences personnelles.

Recommandations associées :

Explication détaillée de l'utilisation et de la différence entre l'exportation et l'exportation par défaut dans JavaScript ES6

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!