วิธีเริ่มต้นอย่างรวดเร็วด้วย VUE3.0: เข้าสู่การเรียนรู้
ฉันเขียนสคริปต์ nodejs มากมายเมื่อเร็ว ๆ นี้และประสบปัญหา หลังจากแก้ไขประเภท: "โมดูล" ของ package.json แล้ว เครื่องมือบางอย่างไม่สามารถใช้งานได้ตามปกติ (เช่น postcss-cli)
บทความนี้บันทึกวิธีแก้ปัญหาการใช้โมดูล commonjs ในโหมด esmodule เป็นหลัก
1. เปลี่ยนปลั๊กอิน
ดูเหมือนไร้สาระ แต่ก็ไม่เป็นเช่นนั้น มาดู postcss เป็นตัวอย่าง จริงๆ แล้วมีปัญหาที่ต้องติดตาม แต่ยังไม่ได้รับการอัปเดต ฉันได้เห็นการใช้งานซ้ำ เช่น postcss-es-modules (ปริมาณการดาวน์โหลดไม่สูง ฉันจึงยังไม่ได้ลองใช้)
หรือใช้ปลั๊กอินผ่านการสนับสนุนของ vite/rollup framework (เราจะพูดถึงวิธีที่กรอบงานจัดการในภายหลัง) เช่น
// tailwind.config.js
ค่าเริ่มต้นการส่งออก {
ล้างข้อมูล: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx,css}'],
darkMode: เท็จ // หรือ 'สื่อ' หรือ 'คลาส'
ธีม: {
ขยาย: {},
-
ตัวแปร: {
ขยาย: {},
-
ปลั๊กอิน: [],
-
// postcss.config.js
นำเข้า tailwind จาก 'tailwindcss'
นำเข้าคำนำหน้าอัตโนมัติจาก 'คำนำหน้าอัตโนมัติ'
นำเข้า tailwindConfig จาก './tailwind.config.js'
ค่าเริ่มต้นการส่งออก {
ปลั๊กอิน: [tailwind(tailwindConfig), คำนำหน้าอัตโนมัติ],
-
// vite.config.js
ซีเอสเอส: {
โพสต์,
} 2. ด้วยวิธีการขยายที่ nodejs รองรับ (ประเภท: "โมดูล") ให้เปลี่ยนส่วนต่อท้ายไฟล์เป็น .cjs จากนั้นคุณสามารถนำเข้าโมดูล commonjs ผ่านทางค่าเริ่มต้นการนำเข้าจาก '*.cjs' เช่น
// utils.cjs
ผลรวมฟังก์ชัน (a, b) {
ส่งคืน a + b
-
โมดูล.ส่งออก = {
ผลรวม
-
//index.js
นำเข้ายูทิลิตี้จาก './utils.js'
console.log(utils.sum(1, 2)) 3. ทำเครื่องหมายไฟล์รายการของโมดูลต่างๆ ผ่านฟิลด์ส่งออกของ package.json (นี่เป็นวิธีปฏิบัติทั่วไปสำหรับไลบรารีบุคคลที่สามส่วนใหญ่ เช่น
// package)
json.json
"ส่งออก": {
"นำเข้า": "./index.js",
"ต้องการ": "./index.cjs"
} 1. nodejs จัดการไฟล์ส่วนต่อท้าย .mjs/.cjs อย่างไร
Nodejs จะโหลดไฟล์ .mjs ด้วยโมดูล esmodule และไฟล์ .cjs ด้วย commonjs เสมอ เมื่อตั้งค่า package.json เป็นประเภท: "module" ไฟล์ .js จะถูกโหลดเป็น esmodule เสมอ