ES6 모듈성과 CommonJS 모듈성의 차이점에 대한 자세한 설명

ES6 모듈성과 CommonJS 모듈성의 차이점

최근 프로젝트에서 저는 ES6의 가져오기 및 내보내기와 module.exports 및 require를 CommonJS에서 사용하는 방법에 대해 혼란스러워했습니다. 오늘은 요약해서 보세요. 혹시 잘못된 것이 있으면 조언 좀 부탁드립니다.

ES6 Modularity

import 명령은 다른 모듈에서 제공하는 기능을 가져오는 데 사용됩니다. export 명령은 해당 모듈의 외부 인터페이스를 지정하는 데 사용됩니다. 기준 치수. import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口。

一、 import  与 export

// 导出 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'

二、 import  与 export defalut

export 可以有多个，export default 仅有一个

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

export default obj

// 引入 b.js

import obj from './a.js'

CommonJS 模块化

一、 require  与 module.exports

require

1.

가져오기 및 내보내기

// 导出 a.js

let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

module.exports = obj

// 引入 b.js

let obj = require('./a.js')

2. 가져오기 및 내보내기 defalut

• 내보내기는 여러 개의 내보내기 기본값만 가질 수 있습니다.

  rrreee

• CommonJS 모듈식

• 1 그리고 module.exports

require는 ES6(bable이 import를 require로 변환)와 CommonJS

rrreee

Summary

• ES6 모듈 시스템을 사용하더라도 Babel의 변환을 사용한다면, ES6 모듈 시스템은 결국 CommonJS 사양으로 변환됩니다.

Babel5에서 require를 사용할 때 import된 값은 module.export에서 반환한 값이거나, import default에서 반환한 값입니다.

Babel6에서는 import를 사용하여 도입할 때 내보내기 기본값의 값을 직접 가져올 수 있지만 require로 가져온 컴포넌트인 경우 내보내기가 module.export, 내보내기 또는 내보내기 기본값인지 직접 가져올 수 있습니다. 내보내기 기본값을 가져옵니다. 기본값을 추가합니다.

🎜🎜🎜🎜참고자료: 🎜🎜🎜🎜https://www.jianshu.com/p/27ee06296bcd🎜🎜🎜🎜https://juejin.im/post/5a2e5f0851882575d42f5609🎜 🎜 🎜🎜🎜추천 튜토리얼: "🎜 JS 튜토리얼🎜》🎜

위 내용은 ES6 모듈성과 CommonJS 모듈성의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!