모든 주요 브라우저에서 잘 작동하는 웹사이트를 구축하는 것이 공개 웹 생태계를 기대하고 있습니다 그러나 이를 위해서는 작성하는 코드가 타겟팅할 각 브라우저에서 지원됩니다. 만약 새로운 자바스크립트 언어 기능을 사용하려면 이러한 기능을 를 지원하지 않는 브라우저를 위해 이전 버전과 호환되는 형식에 대한 새로운 기능입니다. 있습니다.
Babel은 코드 컴파일에 가장 널리 사용되는 도구입니다.
다양한 브라우저와 환경에 적합한 코드에 새로운 문법을 포함하고 있습니다.
(예: 노드)가 이해할 수 있습니다 이 가이드에서는 Babel을 사용한다고 가정하므로
설정 안내에 따라
아직 포함하지 않은 경우 애플리케이션에 포함하세요. webpack 선택
앱에서 모듈 번들러로 webpack을 사용하는 경우 Build Systems
Babel을 사용하여 사용자에게 필요한 부분만 변환하려면 다음과 같은 작업이 필요합니다.
- 타겟팅할 브라우저를 식별합니다.
- 적절한 브라우저 타겟과 함께
@babel/preset-env를 사용합니다. <script type="module">를 사용하여 트랜스파일된 코드가 필요하지 않은 브라우저로 전송되는 것을 중지합니다.
타겟팅할 브라우저 식별
애플리케이션의 코드가 트랜스파일되는 방식을 수정하기 전에 애플리케이션에 액세스하는 브라우저를 식별해야 합니다. 어떤 브라우저 분석 현재 사용 중인 사용자뿐 아니라 앱을 만들기 위해 타겟팅할 계획인 사용자까지 모두 표시됩니다. 정보에 입각한 결정을 내릴 수 있습니다.
@babel/preset-env 사용
일반적으로 코드를 트랜스파일하면 새로운 형태를 갖출 수 있습니다. 수행하는 컴파일의 양을 최소화하여 번들의 크기를 줄여 웹페이지의 성능을 개선할 수 있습니다
특정 언어를 선택적으로 컴파일하기 위해 특정 플러그인을 포함하는 대신 Babel은 플러그인과 번들로 묶은 다양한 사전 설정을 제공합니다. 있습니다. @babel/preset-env를 사용합니다. 계획하는 브라우저에 필요한 변환 및 폴리필만 포함하도록 있습니다.
Babel의 presets 배열 내에 @babel/preset-env를 포함합니다.
구성 파일 .babelrc을 사용합니다.
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
targets 필드를 사용하여 포함할 브라우저 버전을 지정합니다.
browsers 필드에 적절한 쿼리를 추가하여 쿼리합니다. @babel/preset-env
브라우저 목록과 연동되며 여러 브라우저와
브라우저를 타겟팅하기 위한 도구입니다. 호환되는 쿼리의 전체 목록은
브라우저 목록 문서를 참조하세요.
또 다른 옵션은 .browserslistrc 파일을 사용하여 환경을 나열하는 것입니다.
선택해야 합니다
">0.25%" 값은 변환만 포함하도록 Babel에 지시합니다.
전 세계 인터넷 트래픽의 0.25% 이상을 차지하는 브라우저를
사용합니다 이렇게 하면 번들에 불필요하게 트랜스파일된 파일이 포함되지 않습니다.
극소수의 사용자가 사용하는 브라우저용 코드를 제공합니다.
대부분의 경우 다음을 사용하는 것보다 더 나은 접근 방식입니다. 구성:
"targets": "last 2 versions"
"last 2 versions" 값은
모든 브라우저의 마지막 두 버전
즉, Internet Explorer와 같이 지원 중단된 브라우저에 대해서도 지원이 제공됩니다.
이로 인해 번들의 크기가 불필요하게 증가할 수 있습니다.
애플리케이션에 액세스하는 데 사용할 브라우저를 만듭니다.
궁극적으로는 원하는 데이터 범위를 짐작할 수 있도록 적절한 쿼리 조합을 맞춤설정할 수 있습니다.
최신 버그 수정 사용 설정
@babel/preset-env는 여러 JavaScript 구문 기능을 컬렉션으로 그룹화하고 사용 설정/사용 중지합니다.
변경할 수 있습니다. 이 방법이 효과적이긴 하지만,
대상 브라우저에 하나의 기능만 있는 버그가 있으면 구문 기능이 변환됩니다.
이로 인해 변환된 코드가 필요한 것보다 더 많이 변환되는 경우가 많습니다.
원래 별도의 사전 설정으로 개발되었지만
@babel/preset-env의 bugfixes 옵션
는 일부 브라우저에서 손상된 최신 구문을 가장 가까운 최신 구문으로 변환하여 이 문제를 해결합니다.
해당 브라우저에서 손상되지 않는 동등한 구문을 사용하는 것이 좋습니다. 결과는 거의 동일한 최신 코드입니다.
모든 대상 브라우저에서 호환성을 보장하기 위해 몇 가지 구문을 약간만 수정하면 됩니다. 이
@babel/preset-env 7.10 이상이 설치되어 있는지 확인한 후
bugfixes 속성을 true로 업데이트합니다.
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
Babel 8에서는 bugfixes 옵션이 기본적으로 사용 설정됩니다.
<script type="module"> 사용
JavaScript 모듈, 즉 ES 모듈은 비교적 새로운 기능으로
모든 주요 브라우저에 대해 자세히 알아보기 모듈을 사용하여
다른 모듈에서 가져오고 내보낼 수 있는 스크립트를 만들 수 있지만
또한 @babel/preset-env와 함께 사용하여
있습니다.
특정 브라우저 버전이나 시장점유율을 쿼리하는 대신
.babelrc 파일의 targets 필드 내에 "esmodules" : true를 지정합니다.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Babel로 컴파일된 많은 최신 ECMAScript 기능이 이미 지원되고 있습니다. JavaScript 모듈을 지원하는 환경에서 사용할 수 있습니다. 이렇게 하면 트랜스파일된 코드만 사용하도록 하는 프로세스를 단순화합니다. 실제로 필요한 브라우저에서도 이용할 수 있습니다.
모듈을 지원하는 브라우저는 nomodule 속성이 있는 스크립트를 무시합니다.
반대로 모듈을 지원하지 않는 브라우저는
type="module" 즉, 컴파일된 대체 버전뿐만 아니라 모듈도 포함할 수 있습니다.
이상적으로 애플리케이션의 두 버전 스크립트는 다음과 같습니다.
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
모듈을 지원하는 브라우저는 main.mjs를 가져와 실행하며 compiled.js를 무시합니다.
모듈을 지원하지 않는 브라우저는 그 반대입니다.
webpack을 사용하는 경우 두 가지에 대해 구성에서 서로 다른 타겟을 설정할 수 있습니다. 새 버전을 출시할 수 있습니다
- 모듈을 지원하는 브라우저 전용 버전입니다.
- 모든 기존 브라우저에서 작동하는 컴파일된 스크립트가 포함된 버전입니다. 이 경우 변환 컴파일은 더 광범위한 브라우저를 지원해야 하므로 파일 크기가 더 큽니다.
코너 클라크와 제이슨 밀러의 리뷰에 감사드립니다.