javascript - ES6 import {} from '..' 접미사 이름 문제

Question

최근에 나는 Ruan Yifeng의 ES6 소개를 읽고 있었습니다. 아래 사진에 동그라미 친 부분은 잘 이해가 안가네요.

기사에 .js 접미사를 생략할 수 없다고 언급되어 있습니다.
그런데 아래에 다음과 같은 글이 나옵니다.

으아악

여기import { counter, incCounter } from './lib';不是省略了.js접미사가 있나요?
다른 사람이 작성한 일부 반응 코드와 비교:

으아악

import React from "react";这里也省略了.js后缀，但是import App from "./containers/App.jsx";근데 접미사 이름은 아예 안썼어요.

전문가에게 질문에 대한 답변을 요청하세요. import..from 후에 어떤 상황에서 .js를 써야 하며, 언제 를 쓰지 말아야 합니까? 아니면 다른 사람이 도구를 사용하여 무언가를 구성했기 때문에 접미사 이름을 쓸 필요가 없습니다.
정말 감사합니다! ! !

Answer 1

브라우저 기본 구문 분석과 패키징 도구 전처리를 구별하세요.

브라우저 네이티브

import 문을 구문 분석할 때 브라우저는 접미사가 필요합니다. 더 정확하게 말하면 브라우저는 가져온 후의 문자열을 URL 주소로 인식합니다. 이는 CSS 파일에 background-image: url(./path/to/a.jpg)를 쓰는 것과 같습니다. 브라우저는 현재 파일과 페이지의 BaseURL을 기반으로 종속 리소스의 URL 주소를 얻은 다음 서버에 HTTP 요청을 보냅니다. HTTP 요청의 URL 주소에서 접미사는 그다지 중요하지 않습니다. 브라우저는 js 또는 이미지를 호스팅하는 리소스 서버가 브라우저의 HTTP 요청에 올바르게 응답할 수 있는 한 HTTP 응답 헤더에서 Content-Type을 인식합니다. 접미사를 임의로 정의할 수 있습니다. (물론 일반 리소스 서버는 파일 확장자에서 HTTP 응답 헤더 MIMEType으로의 매핑을 갖습니다. 서버가 올바르게 응답할 수 있도록 다른 사용자 지정 접미사를 추가할 수 있지만 구성하는 것이 가장 좋습니다. URL은 http://a.com/b.jpg입니다. 반환된 콘텐츠는 응답 헤더
application/javascript가 있는 텍스트 문자입니다.

포장 도구

패키징 도구의 경우 호환성을 위해 js의 import 문은 webpack의 __webpack_require__, 浏览器最后加载的是打包后的 bundle 文件，并没有执行 import 语句（大部分浏览器至今尚未实现import）。 这个时候，我们写的 import 后面到底要不要后缀，全凭工具自己定义规则啊，只要工具在编译打包时能找到被依赖模块。比如webpack可以设定先找 .ts 如果没有再找 .es 再找 .js, 如果是一个文件夹，就看文件夹里有没有 index.js，甚至从node_modules 디렉터리에서 검색하는 등 ES5를 사용하여 구현된 모듈 관리를 위한 import 문으로 변환됩니다...

요약:

1. 번역 및 패키징 도구: 작성할 필요가 없습니다

2. 기본적으로 ES6 노드를 지원하므로 작성할 필요가 없습니다

3. 기본적으로 ES6를 지원하는 브라우저: URL을 통해서만 서버에서 찾을 수 있으면 됩니다. HTTP2가 실제로 인기를 얻고 ES6가 브라우저에 의해 완전히 구현되고 파일을 패키징할 필요가 없다면 패키징 도구는 쉽게 처리할 수 있는 방법.

요약: 쓰지 마세요

Answer 2

개인 의견:

1. 예를 들어, React, React-dom, Vue 등은 모두 기여자에 의해 릴리스되었습니다 NPM package(즉, modules 패키지). NPM을 사용하여 설치한 후 node_modules 디렉터리에 저장됩니다. 모듈

2. JS 파일은 모듈이 아닙니다. (여기서 말하는 내용은 완전하지 않습니다.)

   • 은 ES6에서 제공됩니다(모듈을 정의하려면 가져오기 및 내보내기를 사용하세요)模块化

   • Node.js에서는 CommonJS 사양을 사용하여 모듈을 정의합니다

3. 기사 추천

Answer 3

1. .js不能省略，主要是为了可读，以及区分。假设你目录下有个自己写的模块test，还有一个自己写的js文件test.js。模块是以文件夹形式存在的，然后你用import './test'，你无法确定你加载的是模块还是test.js (단, ES6에서는 JS 파일도 모듈로 간주됩니다).

2. 여기 보이는 코드import React from "react"，并不是省略了.js，而是直接省略了/index.js。这是一个由npm安装的包，在node_modules文件夹下面，其实它导入的是node_modulesreactindex.js，是整个包的入口文件，然后由index.js再去加载react需要用到的其他子js파일

3. node.js에서는 노출된 패키지 중 ES6의 import语法，所以需要通过require()引入包，用module.exports和exportsimportable 부분이 아직 지원되지 않습니다.

자세한 내용은 MDN 문서를 참조하세요