Explication détaillée de la différence entre la modularité ES6 et la modularité CommonJS

La différence entre la modularité ES6 et la modularité CommonJS

Dans les projets récents, à propos de l'importation, de l'exportation ES6 et je suis Je suis confus quant à l'utilisation de module.exports et require dans CommonJS. Aujourd'hui, j'ai décidé de le résumer. S'il y a quelque chose qui ne va pas, donnez-moi quelques conseils. La commande

Modularité ES6

import est utilisée pour saisir les fonctions fournies par d'autres modules ; la commande export est utilisée pour spécifier ; l'interface externe du module.

1. importation et exportation

// 导出 a.js

/** 写法一 **/
var name = 'sheep'
function getSheep() {
    name = 'hourse'
}
export {getSheep}

// 引入 b.js
import {getSheep} from '.／a.js'


/** 写法二 **/
var name = 'sheep'
export function getSheep() {
    name = 'hourse'
}

// 引入 b.js

import {getSheep} from '.／a.js'

2 importation et exportation par défaut

Il peut y avoir plusieurs exportations, exportation par défaut. Il n'y a qu'une seule

// 导出 a.js
let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

export default obj

// 引入 b.js

import obj from './a.js'

Modularité CommonJS

1. require et module.exports

require est pris en charge à la fois dans ES6 (bable convertit l'importation en require) et CommonJS Même si nous utilisons le système de modules ES6, si nous utilisons la conversion de Babel, le système de modules ES6 sera finalement converti en spécification CommonJS.

Lors de l'utilisation de require dans Babel5, la valeur importée est la valeur renvoyée par module.export ou la valeur renvoyée par export default.

Dans Babel6, lorsque vous utilisez import pour introduire, vous pouvez directement obtenir la valeur de l'export par défaut mais s'il s'agit d'un composant importé par require, que l'export soit module.export, export ; , ou exporter par défaut, vous pouvez directement Pour obtenir la valeur par défaut d'exportation, vous devez ajouter une valeur par défaut.
• Référence :

• https://www.jianshu.com/p/27ee06296bcd

https://juejin.im/post/5a2e5f0851882575d42f5609

• Tutoriel recommandé : "

  Tutoriel JS

  "

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!