노드 에스모듈 모드에서 commonjs 모듈을 호출하는 방법에 대한 간략한 분석

VUE3.0을 빠르게 시작하는 방법: 학습 시작.

최근 nodejs 스크립트를 많이 작성하다가 문제가 발생했습니다. package.json의 "module" 유형을 수정하면 일부 도구(예: postcss-cli)를 정상적으로 사용할 수 없습니다.

이 글에서는 주로 esmodule 모드에서 commonjs 모듈을 사용할 때 발생하는 문제를 해결하는 방법을 기록했습니다.

해결 방법

1.

말도 안 되는 것처럼 보이지만 그렇지 않습니다. postcss를 예로 들어보겠습니다. 실제로 후속 조치가 필요한 문제가 있었지만 아직 업데이트되지 않았습니다. postcss-es-modules와 같은 재구현을 본 적이 있습니다.(다운로드량이 많지 않아 아직 시도해보지 않았습니다.)

또는 vite/rollup 프레임워크 자체의 지원을 통해 플러그인을 사용합니다(프레임워크 자체가 이를 처리하는 방법은 나중에 설명하겠습니다). 예:

// tailwind.config.js
기본값 내보내기 {
  제거: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  darkMode: false, // 또는 'media' 또는 'class'
  주제: {
    연장하다: {},
  },
  변형: {
    연장하다: {},
  },
  플러그인: [],
}
// postcss.config.js
'tailwindcss'에서 tailwind 가져오기
'autoprefixer'에서 autoprefixer 가져오기
'./tailwind.config.js'에서 tailwindConfig 가져오기

기본값 내보내기 {
  플러그인: [tailwind(tailwindConfig), autoprefixer],
}
// vite.config.js
CSS: {
  포스트 CSS,
}

2. nodejs에서 지원하는 확장 방법(유형: "module")을 통해 파일 접미사를 .cjs로 변경한 후 import default from '*.cjs'를 통해 commonjs 모듈을 가져올 수 있습니다. 예:

// utils.cjs

함수 합계(a, b) {
  a + b를 반환
}
모듈.수출 = {
  합집합
}
// index.js
'./utils.js'에서 유틸리티 가져오기

console.log(utils.sum(1, 2))

3. package.json의 내보내기 필드를 통해 다양한 모듈의 항목 파일을 표시합니다(이는 대부분의 타사 라이브러리에서도 일반적입니다.

// package. JSON
"내보내기": {
  "가져오기": "./index.js",
  "require": "./index.cjs"
}

질문 기록

1. nodejs는 .mjs/.cjs 접미사 파일을 어떻게 처리합니까?

Nodejs는 항상 esmodule 모듈로 .mjs 파일을 로드하고 commonjs로 .cjs 파일을 로드합니다. package.json이 "module" 유형으로 설정되면 .js 파일은 항상 esmodule로 로드됩니다.