Vanilla JS- 모듈 사용 방법

2162 단어
나는 지금 책을 읽고 있다You Don't Know Javascript. 나는 정말 내가 이전에 배우지 못했던 것을 연습하는 데 시간을 좀 쓰고 싶다.나는 Modules 에 관한 책을 읽고 있다. 왜냐하면 나는 Vanilla JS 프로젝트에서 그것들을 사용한 적이 없기 때문에, 나는 그것이 어떻게 작동하는지 보고 싶다. (나는 항상 React에서 그것을 사용한다.)
나는 MDN guide를 따랐기 때문에 script.js 파일과 module.js 파일을 만들었다.HTML 파일에는 일반<script src="script.js"></script> 태그가 있습니다.
내 HTML 파일:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="but">Click me</button>
    <div id="container"></div>
    <script src="script.js"></script>
  </body>
</html>
내 script.js 파일:
import { text } from "./module.js";

const target = document.getElementById("but");
const container = document.getElementById("container");

target.addEventListener("click", () => {
  container.textContent = text;
});
내 module.js 파일:
const text = "Yay";

export { text };
응, 내가 실수를 했어: Uncaught SyntaxError: Cannot use import statement outside a module.내 생각엔
연구를 통해 솔루션을 찾았습니다. 스크립트 탭에 추가해야 합니다type=module.
<script type="module" src="script.js"></script>
해석here도 했다.
남은 디스크 공간 확보
Nodejs Buffer 처리 그림

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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