.mjs, .cjs 확장자

JavaScript

by 폴리프레임 2024. 5. 26. 15:35

.mjs 확장자는 JavaScript 모듈 파일을 나타내기 위해 사용됩니다. .mjs는 "module JavaScript"의 약자이며, 이는 ES6(ECMAScript 2015) 모듈 시스템을 사용하는 JavaScript 파일을 의미합니다. 특히 Node.js 환경에서 ES6 모듈을 명확히 구분하기 위해 사용됩니다. 기존의 .js 파일은 CommonJS 모듈 시스템을 사용하거나 일반적인 스크립트로 간주될 수 있기 때문에, .mjs 확장자를 사용하면 ES6 모듈임을 명확히 할 수 있습니다.( 상대적으로 CommonJS 모듈은 확장자 .cjs 사용 )

ES6 모듈 시스템:

ES6 모듈 시스템은 import와 export 키워드를 사용하여 모듈 간에 코드를 공유할 수 있게 합니다.
예를 들어, export를 사용하여 변수, 함수, 클래스 등을 모듈에서 내보내고, import를 사용하여 다른 모듈에서 이를 가져올 수 있습니다.

// module.mjs 파일에서 모듈 공급
export const hello = () => {
  console.log("Hello, world!");
};


// main.mjs 파일에서 모듈 사용
import { hello } from './module.mjs';

hello();  // 출력: Hello, world!

Node.js에서의 사용

// package.json 에 "type":"module" 명시

{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module"
}

브라우저에서의 사용

// type="module" 명시함
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6 Modules</title>
</head>
<body>
  <script type="module" src="main.mjs"></script>
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

throttle() - lodash (0)	2024.05.27
emmet - react - reactjavascript (0)	2024.05.26
WebGL (1)	2024.05.26
isNaN() (0)	2024.05.23
Divider - TypeScript (0)	2024.05.23