네이티브 ES 모듈 사용 방법

17278 단어 webdevjavascriptbeginners
본고는 ECMAScript(ES) 모듈의 예와 이를 이용하여 실현할 수 있는 기능, 그리고 몇 가지 제한에 대해 소개한다.2018년 5월 이후 발표된 모든 브라우저는 ES 모듈을 지원하기 때문에 대부분의 경우 안전하다고 생각할 수 있습니다.

source

ES 모듈 인코딩 없음


ES 모듈이 있기 전에 모든 JS는 전 세계적으로 가져와야 합니다.모든 파일은 이전에 정의된 변수에 접근해서 나중에 실행될 코드에 내용을 남길 수 있습니다.가져오는 순서가 매우 중요합니다. 특히 나중에 가져온 내용이 이전의 값을 덮어쓸 수 있기 때문입니다.노파 수입품의 실제 상황은 다음과 같다.display-data.js :
document.body.innerHTML = "lorem ipsum";
log.js :
console.log("Some test info");
index.html :
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>No modules</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script src="./display-data.js"></script>
    <script src="./log.js"></script>
  </body>
</html>

The example in action .

문제.


이 방법에는 두 가지 주요 문제가 있다.
1. 전 세계를 오염시킨다.만약 몇 개의 파일이 같은 값을 정의한다면, 충돌이 발생하고 서로 덮어쓸 것이다.행운을 빌어 그것이 초래할 수 있는 오류를 찾아내고 복구하세요.예:data-1.js :
var data = “lorem ipsum”;
data-2.js :
var data = “sin dolor”;
index.html :
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Name collision</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script src="./data-1.js"></script>
    <script src="./data-2.js"></script>
    <script>
      document.body.innerHTML = data;
    </script>
  </body>
</html>
This code live .
가장 흔히 볼 수 있는 해결 방법은 바로 호출되는 함수 표현식을 사용하는 것이다.이것은 코드 블록을 격리시켜 전 세계의 오염을 방지했지만 동시에 코드를 더욱 혼란스럽게 했다.
둘모든 의존은 수동으로 관리하고 해결해야 한다.만약 한 파일이 다른 파일에 의존한다면, 이 파일들을 정확한 순서로 가져와야 한다.예를 들면 다음과 같습니다.log-data.js :
console.log(data);
data.js :
const data = ‘some data’;
display-data.js :
document.html = data;
index.html :
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>File order</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script src="./log-data.js"></script>
    <script src="./data.js"></script>
    <script src="./display-data.js"></script>
  </body>
</html>
보시다시피here 데이터 부분은 예상대로 작동하고 기록 데이터가 실패했습니다.

실행 중인 ES 모듈


만약 우리가 ES 모듈에 대해 같은 일을 한다면 어떤 차이가 있습니까?우선 코드 단계의 의존항을 정의합니다.따라서 한 파일에 다른 파일의 값이 필요하다면 같은 파일에 지정하면 된다.이런 방법은 다른 것을 가져올 수 있다. 특히 코드를 읽을 때, 하나의 파일만 열면, 그것이 사용하는 모든 상하문을 읽을 수 있다.
그렇다면 ES 모듈은 어떻게 사용합니까?data.js :
export const data = "lorem ipsum";
display-data.js :
import { data } from "./data.js";

document.body.innerHTML = data;
index.html :
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Simple modules</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script type="module" src="./display-data.js"></script>
  </body>
</html>
이 코드의 주요 변경 사항:
  • HTML 파일의 type=”module” 가져오기에 <script>를 추가합니다.
  • 모듈을 정의하고 로드하려면 JS 파일의 내보내기 및 가져오기 키워드를 사용합니다.

    Running example .

    • 여러 파일을 동일한 파일로 가져오기


    같은 파일을 두 번 가져오면 예시를 더욱 재미있게 할 수 있습니다.파일마다 다른 파일과 독립해야 하기 때문에, 가져오기는 파일마다 두 번씩 추가됩니다.브라우저는 가져오기를 올바르게 관리하고 파일을 한 번만 로드할 수 있습니다.data.js :
    export const data = "lorem ipsum";
    display-data.js :
    import { data } from "./data.js";

document.body.innerHTML = data;
    log-data.js :
    import { data } from "./data.js";

console.log(data);
    index.html :
    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Shared import</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script type="module" src="./display-data.js"></script>
    <script type="module" src="./log-data.js"></script>
  </body>
</html>

    The example

    불활성 부하


    코드가 필요할 때까지 로드 지연 프로그램의 로드 부분을 지연합니다.이것은 한 번에 모든 내용을 불러오는 것보다 더 복잡한 최적화 기술이지만, 언제 내용을 불러올지 더 잘 제어할 수 있다.다음 예제에서는 데이터가 로드되고 표시되는 데 반 초 정도 지연됩니다.display-data.js :
    setTimeout(
  () =>
    import("./data.js").then(({ data }) => {
      document.body.innerHTML = data;
    }),
  500
);
    data.js :
    export const data = "lorem ipsum";
    index.html :
    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Lazy load</title>
    <link rel="shortcut icon" href="#" />
  </head>

  <body>
    <script type="module" src="./display-data.js"></script>
  </body>
</html>

    Lazy load example

    ES 모듈에는 현대 JS의 모든 요구 사항이 포함됩니까?


    비록 이 기기의 ES 모듈은 이전의include stuff 모델을 현저하게 개선했지만, 그들은 현대 자바스크립트 개발의 일부 기본 기능이 부족하다.이제 다음 작업을 수행할 수 없습니다.
  • JS 이외의 유형을 가져옵니다.다른 일부 파일은 준비 중 JSON 이지만, 브라우저에 넣는 데 시간이 오래 걸립니다.
  • 노드에서 제3자 라이브러리를 가져옵니다.나 이런 거 좋아해.구축 과정에서 파일을 복사한 다음 내부의 어느 위치 node_modules 에서 가져올 수 있지만, 이것은 import “library” 보다 훨씬 복잡합니다.
  • 머리카락이 없어요.많은 현대 JS는 TypeScript와 같은 다른 언어로 작성되었다.순수한 JS라도 오래된 브라우저를 지원하거나 최신 언어 기능을 사용하려면transpilation이 필요합니다.
    • 이러한 이유로 대부분의 프로젝트에서 배치를 위해 제작된 컴파일러인 JS Bundler를 볼 수 있습니다.번들에 관심이 있으시면 댓글로 알려주시고 링크를 확인하세요.

    링크

  • examples repository
  • all examples
  • my video course for esbuild
  • my video course for webpack

    • 요약


    이 문서에서는 ES 모듈의 주요 용례를 설명합니다.다음 단계는 일부 JS 귀속기를 설정하여 본 기기의 모듈의 제한을 극복하는 것이다.
    HIP(ROCm) 구축에 대한 cupy on의 노트
    원본 분석 JDK 동적 에이전트의 본질

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage