Vite가 JS 라이브러리를 구축 할 때 ES6 코드가 ES5로 변환되지 않는 이유는 무엇입니까?

Vite Builds JS 라이브러리 : ES6 코드 용 솔루션은 ES5로 변환되지 않습니다.

VITE를 사용하여 JS 라이브러리를 구축 할 때 개발자는 종종 ES6 코드가 ES5로 변환되지 않는 문제에 직면하여 이전 브라우저 환경에서 호환 오류로 이어집니다. 이 기사는 사례를 분석하고 솔루션을 제공합니다.

이 경우 개발자는 VITE를 사용하여 JS 라이브러리를 만들었고 ES6의 NULL 값 병합 연산자 (??)를 사용했지만 패키지 코드에는 여전히 ES6 구문이 포함되어 오류가 발생했습니다. vite.config.js 구성은 다음과 같습니다.

 "vite"에서 {defuleconfig} 가져 오기;
"@Rollup/Plugin-Babel"에서 Babel을 가져옵니다.

내보내기 DefuleConfig ({
  짓다: {
    lib : {
      항목 : "./lib/main.js",
      이름 : "FastCodetest",
      filename : (format) =>`fastcodetest. $ {format} .js`,
      형식 : [ "ES", "UMD"],
    },
  },
  롤업 : {
    플러그인 : [
      바벨({
        Babelhelpers : "번들",
        제외 : "node_modules/**",
        사전 설정 : [
          [의 뜻
            "@babel/preset-env",
            {
              대상 : {
                브라우저 : "> 0.25%, 죽지 않음", // 대상 브라우저 설정},
              UseBuiltins : "Entry",
              Corejs : 3,
            },
          ],,
        ],,
      }),
    ],,
  },
});

문제의 근본 원인은 targets: { browsers: "> 0.25%, not dead" } . 이 구성은 대상 브라우저를 0.25% 이상의 공유로 브라우저로 설정하고 유지 보수가 중지되지 않았습니다. 현대식 브라우저는 기본적으로 ES6을 지원하므로 Babel은 번역하지 않습니다.

해결책:

ES5 호환성을 보장하려면 targets 구성을 수정하여 더 낮은 버전 브라우저를 명시 적으로 지정해야합니다.

 대상 : {
  브라우저 : [ "IE> = 11", "마지막 2 버전", "죽은 자"] // 또는 더 많은 특정 버전 번호}

또는보다 세분화 된 제어를 위해 browserslist 에서 제공하는 구성과 같은보다 포괄적 인 브라우저 호환성 목록을 사용하는 것을 고려하십시오. 또한 노드 환경 버전 차이와 같은 오류를 유발할 수있는 다른 이유를 배제해야합니다. 다른 요인이 제외 된 후에 만 ​​바벨 구성이 조정됩니다. @babel/preset-env 플러그인이 올바르게 설치되어 있는지 확인하십시오.

targets 구성을 수정함으로써 Babel은 ES6 코드를 ES5로 올바르게 변환하여 호환성 문제를 해결합니다. 올바른 targets 구성을 선택하는 것은 대상 브라우저의 지원 범위에 따라 다릅니다.

위 내용은 Vite가 JS 라이브러리를 구축 할 때 ES6 코드가 ES5로 변환되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!