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

이 글은 node 학습을 이어가며 esmodule 모드에서 commonjs 모듈을 호출하는 방법을 소개합니다. 모든 분들께 도움이 되길 바랍니다!

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

이 글에서는 주로 esmodule 모드에서 commonjs 모듈을 사용하는 방법에 대한 문제를 기록하고 해결합니다.

해결책

1. 플러그인을 교체하세요.

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

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

// tailwind.config.js
export default {
  purge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
// postcss.config.js
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindConfig from './tailwind.config.js'

export default {
  plugins: [tailwind(tailwindConfig), autoprefixer],
}
// vite.config.js
css: {
  postcss,
}

2. 유형: "module"), 파일 추가 접미사를 .cjs로 변경한 다음 '*.cjs'에서 기본값 가져오기를 통해 commonjs 모듈을 가져올 수 있습니다. 예를 들어

// utils.cjs
function sum(a, b) {
  return a + b
}
module.exports = {
  sum
}
// index.js
import utils from './utils.js'

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

3을 통해 다른 모듈의 항목 파일을 표시합니다. package.json의 내보내기 필드(대부분의 타사 라이브러리에서도 일반적으로 사용됨) 연습), 예:

// package.json
"exports": {
  "import": "./index.js",
  "require": "./index.cjs"
}

Problem Record

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

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

노드 관련 지식을 더 보려면 nodejs 튜토리얼을 방문하세요!

위 내용은 노드 에스모듈 모드에서 commonjs 모듈을 호출하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!