> 웹 프론트엔드 > JS 튜토리얼 > ES6 모듈성과 CommonJS 모듈성의 차이점에 대한 자세한 설명

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

青灯夜游
풀어 주다: 2020-06-22 18:24:46
앞으로
2432명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿