JavaScript: ES6 모듈 단순화

ES6 이전에는 JavaScript에 모듈을 가져오는 데 사용되는 네이티브 시스템이 없었습니다.
commonjs와 같은 도구가 있지만 언어 규범에 아무런 도구도 내장되어 있지 않습니다. 다른 모든 주요 언어는 이를 할 수 있는 방법이 있는 것 같아서 자바스크립트가 부족하다는 사실은 자바스크립트를 '장난감 언어' 라고 생각하는 사람들로 하여금 이 점을 믿게 합니다.
이 문서에서는 JavaScript의 모듈이 필요한 이유와 모듈을 만들고 사용하는 방법에 대해 설명합니다.

왜 모듈이 필요합니까?

모듈이 없으면 기본적으로 우리 프로그램에 포함된 모든 코드는 제3자 코드든 우리 자신의 코드든 기본적으로 전역적인 범위이다.
현대 JavaScript 응용 프로그램은 수천 개의 가져온 함수를 사용할 수 있습니다. (사용자가 사용하는 라이브러리뿐만 아니라 그들이 사용하는 라이브러리 등입니다.)만일 모든 것이 전체적인 것이라면, 그것은 혼란스러울 정도로 혼란스러운 전체적인 명칭 공간이다.새 함수를 만들 때마다 이름 충돌이 일어날까 봐 영원히 걱정할 것이다.가장 좋은 상황은 일단 이름이 있는 것을 정의하면 실수를 하게 된다는 것이다.더 심각한 상황은 그것이 조용히 덮어져서 찾기 어려운 버그를 초래할 것이다.

게시 모듈 모드

과거에는 특별한 기초 위에서 해결된 것으로 디스플레이 모듈 모드를 사용했다.이 모델의 한 예는 다음과 같습니다.

const public = (function () {
  var hidden = true;
  function private1 () {}
  function private2 () {}
  return {
    private1,
    private2,
  };
})();

이렇게 한 결과private1,private2,hidden이 폐쇄 함수에 대한 작용역은 개인적인 것이다.그것들은 전 세계에 존재하지 않는다."전 세계적으로 존재하는 모든 것은 공개적이다."'public'는 변수로 인용하는 대상은private1과private2라는 속성을 가지고 있다.이것들은 우리가 모듈에서 도출한 함수들이다.
비록 이 해결 방안은 효과가 있지만 몇 가지 문제가 존재한다.

자동으로 실행되어야 하는 클립은 짜증나고 보기 흉한 샘플

언어 표준에 내장된'공식'코드가 아니기 때문에 제3자 코드는 이 점을 할 수 없을 수도 있다

기준이 부족하다는 것은 서로 다른 라이브러리가 서로 다른 방식으로 이 점을 실현할 수 있다는 것을 의미하여 혼란을 초래할 수 있다.

ES6는 이러한 문제를 해결하기 위해 모듈을 제공합니다.

기본 내보내기

ES6 모듈은 일부 표현식을 내보낸 다음 코드의 다른 곳으로 가져올 수 있는 JavaScript 파일입니다.
내보내기는 기본값일 수도 있고, 이름일 수도 있습니다.기본 내보내기를 먼저 봅시다.

const secretNumber = 123;
export default class User;

기본 내보내기는 export 키워드를 사용하고default 키워드를 사용하며, 내보낼 표현식 (이 예는 사용자 클래스 정의) 을 사용합니다.
기본적으로 내보내는 가져오기 방법은 다음과 같습니다.

import User from './user';
const user = new User('[email protected]');

여기에서 사용자는 한 js 파일에서 정의하고 내보내며 다른 js 파일에서 가져오고 사용합니다.모든 js 파일은 자신의 모듈입니다.
가져오기 명령문에 사용되는 사용자 경로("./user")는 현재 가져올 파일에서 해당 파일로의 상대 경로여야 합니다.
기본적으로 내보낼 때 가져올 대상의 이름은 완전히 임의입니다.그것은 우리가 내보낼 때 부르는 어떤 것도 일치시킬 필요가 없다.즉, 위의 내용은 다음과 같이 작성될 수 있으며 그대로 유지됩니다.

import ICanCallThisAnythingAndItIsStillAUserClass from './user';
const user = new ICanCallThisAnythingAndItIsStillAUserClass('[email protected]');

모듈에 기본 내보내기가 있을 필요는 없지만, 있으면 그 중 하나만 내보낼 수 있습니다.따라서 다음 항목은 유효하지 않습니다.

const func1 = () => {};
const func2 = () => {};

export default func1;
export default func2;

우리는 어떤 물건을 수출할 수 있습니까?
어떤 표정이든이것이 바로 변수, 함수, 클래스와 문자다.다음 모든 컨텐트는 유효한 기본 내보내기입니다.

export default 99;

export default 'foo';

export default 10 + 10;

export default () => { console.log('EXPORTED'); };

const x = 10;
export default x;

명명된 출력

우리가 가질 수 있는 다른 종류의 내보내기를 이름 내보내기라고 합니다.예를 들면 다음과 같습니다.

// maths.js
export const pi = 3.142;
export const factorial = x => {
    if (x < 2) {
        return 1;
    }
    return x * factorial(x - 1);
};

// main.js
import { pi, factorial } from './maths';

const myNumber = factorial(4) + pi;

"수학.js'두 개의 이름의 내보내기, pi와factorial 내보내기매인.js가 그것들을 사용하고 있습니다.
모듈마다 기본적으로 내보낼 수 있는 기본 내보내기가 하나밖에 없는 것과 달리, 모듈은 임의의 이름으로 내보낼 수 있습니다.또 다른 차이점은 이름이 있는 내보내기는 이름이 있어야 하고, 이 이름으로 가져와야 한다는 것이다.이름 내보내기를 가져올 때 가져올 내보내기 이름은 쉼표로 구분된 목록에 포함되고 괄호로 묶어야 합니다.
우리는 어떻게 출구에 이름을 붙입니까?내보낸 이름은 표현식에 사용할 식별자로 간주됩니다.이것은 함수명, 변수/상수명, 클래스명일 수 있습니다.수학적으로js, 상수 이름을 사용합니다.
이름에 대한 추가 예:

export class User {} // name: User
export function generatePassword () {} // name: generatePassword
export const apiKey = '123'; // name: apiKey

기본 내보내기 및 명명된 내보내기 혼합

만약 우리가 모듈이 기본 내보내기와 이름 내보내기를 동시에 가지기를 원한다면 어떻게 해야 합니까?이것은 매우 간단하다. 작업 원리는 다음과 같다.

// user.js
export default class User {}

export function generatePassword () {}
export const generateUniqueUserId = () => {};

// main.js
import User, { generatePassword, generateUniqueUserid } from './user';

기본 가져오기는 쉼표 다음에 원하는 이름의 내보내기 목록이 나타나고 괄호로 묶여 있어야 합니다.

가져온 별칭 이름 지정

이름 가져오기의 결함을 알 수 있습니다.만약 우리가 어떤 모듈을 가져왔는데, 그것이 다른 모듈의 명칭과 충돌한다면 어떻게 해야 합니까?걱정하지 마세요. ES6 뒤에 있는 똑똑한 사람들은 이미 이 점을 생각해 냈습니다.그것들은 우리로 하여금 명명된 수출 제품에 별명을 추가할 수 있게 한다.
만약 우리가 두 개의 모듈을 가지고 있다면, 모듈과 모듈이 모두'calculate '라는 내보내기를 가지고 있다면, 가져오는 모듈에서 이름이 충돌하지 않도록 어떻게 이름을 붙여야 합니까?

import { calculate as module1Calculate } from './module1';
import { calculate as module2Calculate } from './module2';

module1Calculate();
module2Calculate();

모듈 사용

크롬과 같은 현대 브라우저에서 HTML 페이지에 모듈을 포함할 때 스크립트 태그에 type="module"을 지정하여 모듈을 사용할 수 있습니다.사용자라는 모듈과 사용자에서main이라는 모듈을 가져오면 웹 페이지에 포함해야 합니다.

<script type=”module” src=”user.js”></script>
<script type=”module” src=”main.js”></script>

나는 이것이 가능하다는 것을 알고 있지만, 나는 지금까지 이렇게 한 적이 없다. 주로 모든 브라우저에서 이 점을 완전히 지원하지 않았기 때문이다.반대로, 나는 웹 패키지와 바벨의 조합을 사용하여 모든 모듈을 하나의 패키지로 컴파일하여 배치한다.이것은 본문의 범위를 넘어섰다.간단한 시도 방법은 create react app barebones react 프로그램을 만드는 것입니다.그리고 src 폴더에 모듈을 만들고 응용 프로그램에 가져오는 연습을 할 수 있습니다.js.
이것 괜찮아요?그럼 내 메일 리스트를 좋아할 거야.JavaScript, 기술, 직업에 대한 정기적인 통신이 있습니다.5천여 명의 독서를 좋아하는 사람을 가입하다.Signup to my list here .