롤업 및 바벨 구성을 조정하여 Node_Modules의 특정 코드를 올바르게 변환하는 방법은 무엇입니까?

롤업이 패키지 될 때 Node_Modules에서 특정 코드를 변환 할 수있는 Babel 팁

프론트 엔드 프로젝트 포장 프로세스 중에 롤업은 모듈 처리를 담당하며 Babel은 코드 번역을 담당합니다. 그러나 Babel은 때때로 node_modules 의 특정 패키지를 올바르게 처리하지 못합니다. 이 기사는이 문제를 해결하는 방법을 설명합니다.

문제 : Babel은 node_modules 에서 특정 코드를 변환하지 못했습니다

우리가 롤업에 패키지를 사용하고 @xyflow 을 사용하여 node_modules 에서 @xyflow 패키지를 변환해야한다고 가정 해 봅시다 ?? 번역 할 수 없습니다.

롤업 구성 파일 ( rollup.config.mjs )의 Babel 구성은 다음과 같습니다.

 바벨({
  확장 : [ '.js', '.jsx', '.mjs'],
  사전 설정 : [ '@babel/preset-env'],
  Babelhelpers : '런타임',
  [ 'src/**/*', 'node_modules/@xyflow/**/*'],
}),

babel configuration 파일 ( babel.config.json )은 다음과 같습니다.

 {
  "사전 설정": [
    [의 뜻
      "@babel/preset-env",
      {
        "모듈": 거짓,
        "UseBuiltins": "사용법",
        "Corejs": "3",
        "대상": {
          "IE": 11
        }
      }
    ],,
    "@babel/preset-react"
  ],,
  "플러그인": [
    [의 뜻
      "@babel/plugin-transform-runtime",
      {
        "Corejs": 3,
        "도우미": 사실,
        "재생기": 사실,
        "Babelhelpers": "런타임"
      }
    ],,
    [ "@babel/plugin-proposal-class-class-croperties"],
    [ "@babel/plugin-proposal-nullish-coalescing-operator"]]]
  ]]
}

버전 정보 :

 <code>"rollup": "4.22.5", "@babel/core": "7.25.2", "@babel/plugin-proposal-class-properties": "7.18.6", "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-transform-react-jsx": "7.25.2", "@babel/plugin-transform-runtime": "7.25.4", "@babel/preset-env": "7.25.4", "@babel/preset-react": "7.24.7", "@babel/runtime-corejs3": "7.25.6",</code>

해결책 : 규칙 include 개선

문제는 include 규칙의 일치가 충분히 정확하지 않다는 것입니다. 원래 구성은 @xyflow 패키지의 모든 파일과 정확히 일치 할 수 없습니다.

개선 된 구성 include :

 [ 'src/**/*', /node_modules \/((?:.................................: :/\ \담) .*)/],],],],],],],],],],].

정규 표현식을 사용하여 node_modules/@xyflow 디렉토리의 모든 파일을보다 유연하게 일치시켜 Babel이 @xyflow 패키지에서 코드를 올바르게 변환하고 번역되지 않은 문제를 해결할 수 있도록하십시오 ?? 운영자.

이 경우를 통해 롤업 및 바벨 구성의 세부 사항은 특히 node_modules 의 특정 패키지를 처리 ​​할 때 정확한 include 이 핵심 인 경우 특히 그렇습니다.

위 내용은 롤업 및 바벨 구성을 조정하여 Node_Modules의 특정 코드를 올바르게 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!