JavaScript에서 Vs import 필요-JS 튜토리얼-php.cn

JavaScript에서 Vs import 필요

王林

풀어 주다： 2024-08-16 06:12:13

원래의

1072명이 탐색했습니다.

require Vs import In JavaScript

코딩을 시작했을 때 모듈을 가져오기 위해 require()를 사용하는 일부 js 파일과 import를 사용하여 기타 파일을 보았던 기억이 납니다. 차이점이 무엇인지, 왜 프로젝트 간에 불일치가 있는지 이해하지 못했기 때문에 항상 혼란스러웠습니다. 같은 내용이 궁금하시다면 계속 읽어주세요!

CommonJS란 무엇인가요?

CommonJS는 서버 측 JavaScript, 주로 Node.js 환경에서 모듈을 구현하는 데 사용되는 표준 집합입니다. 이 시스템에서는 모듈이 동기식으로 로드됩니다. 즉, 모듈이 로드될 때까지 스크립트 실행이 차단됩니다. 이는 간단한 접근 방식을 제공하지만 다른 모듈을 실행하기 전에 차례로 로드해야 하기 때문에 여러 모듈을 로드하려고 할 경우 성능이 저하된다는 단점이 있습니다.

CommonJS를 사용하는 경우 module.exports를 사용하여 기능을 내보내고 require()를 사용하여 가져옵니다.

다음은 코드에서 어떻게 나타나는지에 대한 예입니다.

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

로그인 후 복사

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

로그인 후 복사

ECMAScript(ES6)란 무엇입니까?

ECMAScript라고도 알려진 ES6은 2015년에 출시된 JavaScript의 최신 버전입니다. 이번 릴리스에서는 import 및export 문을 사용하여 비동기적으로 모듈을 가져오는 기능이 제공되었습니다. 이는 모듈이 로드되는 동안 실행 중인 스크립트가 계속 실행될 수 있으므로 병목 현상이 발생하지 않음을 의미합니다. 이는 또한 이후 게시물에서 다루게 될 트리 쉐이킹이라는 효율성을 허용하지만 기본적으로 이는 사용 중인 모듈에서만 JavaScript를 로드하고 데드 코드(사용되지 않는 코드)는 로드되지 않음을 의미합니다. 브라우저에. ES6은 정적 및 동적 가져오기를 모두 지원하기 때문에 이 모든 것이 가능합니다.

이전과 동일한 예이지만 이번에는 가져오기 및 내보내기를 사용합니다.

// In file multiply.js

export const multiply = (x, y) => x * y;

로그인 후 복사

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

로그인 후 복사

주요 차이점: require Vs import

require()는 CommonJS 모듈 시스템의 일부이고 import는 ES6 모듈 시스템의 일부입니다. 아직 ES6를 채택하지 않은 레거시 프로젝트에서 주로 서버측 개발을 위해 Node.js 환경에서 사용되는 require()를 볼 수 있습니다. 서버 측 및 프런트엔드 개발, 특히 최신 프로젝트와 React 또는 Vue와 같은 프런트엔드 프레임워크에서 가져오기가 사용되는 것을 볼 수 있습니다.

수입이 요구보다 나은 이유는 무엇입니까?

앞서 언급했듯이 가져오기는 비동기식이므로 특히 대규모 애플리케이션에서 성능이 향상될 수 있습니다. 또한 가져오기를 정적으로 분석할 수 있으므로 린터 및 번들러와 같은 도구는 코드를 보다 효과적으로 최적화하고 트리 쉐이킹을 구현하여 번들 크기를 줄이고 로드 시간을 단축할 수 있습니다. 또한 require()보다 구문이 읽기 쉬워 더 나은 개발자 경험을 제공하며 우리 모두는 그것을 원합니다!