تحليل موجز لكيفية استدعاء وحدة commonjs في وضع esmodule للعقدة

كيفية البدء بسرعة مع VUE3.0: الدخول في التعلم

لقد قمت بكتابة الكثير من نصوص Nodejs مؤخرًا وواجهت مشكلة. بعد تعديل النوع: "الوحدة النمطية" لـ package.json، لا يمكن استخدام بعض الأدوات بشكل طبيعي (على سبيل المثال، postcss-cli).

تسجل هذه المقالة بشكل أساسي كيفية حل مشكلة استخدام الوحدة النمطية commonjs في وضع esmodule.

الحل

1. يبدو أن استبدال المكون الإضافي

هراء، لكنه ليس كذلك. لنأخذ postcss كمثال، في الواقع، كانت هناك مشكلة يجب متابعتها، ولكن لم يتم تحديثها بعد. لقد رأيت عمليات إعادة تنفيذ مثل وحدات postcss-es (حجم التنزيل ليس مرتفعًا، لذا لم أجربه بعد).

أو استخدم المكونات الإضافية من خلال دعم إطار عمل vite/rollup نفسه (سنتحدث عن كيفية تعامل إطار العمل نفسه معه لاحقًا)، على سبيل المثال

// tailwind.config.js
التصدير الافتراضي {
  التطهير: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
  darkMode: خطأ، // أو "وسائط" أو "فئة"
  سمة: {
    يمتد: {}،
  },
  المتغيرات: {
    يمتد: {}،
  },
  الملحقات: []،
}
// postcss.config.js
استيراد الريح الخلفية من "tailwindcss"
استيراد البادئة التلقائية من "البادئة التلقائية"
استيراد tailwindConfig من "./tailwind.config.js"

التصدير الافتراضي {
  المكونات الإضافية: [tailwind(tailwindConfig)، autoprefixer]،
}
// vite.config.js
المغلق: {
  ,
}

2. من خلال طريقة التوسيع التي تدعمها العقدة (النوع: "الوحدة النمطية")، قم بتغيير لاحقة الملف إلى .cjs، ومن ثم يمكنك استيراد الوحدة النمطية commonjs من خلال الاستيراد الافتراضي من '*.cjs'؛ على سبيل المثال

// utils.cjs
مجموع الدالة (أ، ب) {
  العودة أ + ب
}
وحدة التصدير = {
  مجموع
}
//index.js
استيراد الأدوات المساعدة من "./utils.js"

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

3. حدد ملفات الإدخال الخاصة بوحدات مختلفة من خلال حقل التصدير الخاص بـ package.json (وهذا أيضًا ممارسة شائعة لمعظم مكتبات الطرف الثالث، على سبيل المثال

// package. json
"الصادرات": {
  "استيراد": "./index.js"،
  "تتطلب": "./index.cjs"
}

سجل الأسئلة

1. كيف تتعامل عقدة Nodejs مع ملفات اللاحقة ‎.mjs/.cjs؟

يقوم Nodejs دائمًا بتحميل ملفات .mjs باستخدام الوحدة النمطية esmodule وملفات .cjs باستخدام commonjs. عندما يتم تعيين package.json على النوع: "module"، يتم دائمًا تحميل ملفات .js كـ esmodule.