Tidak Boleh Menggunakan Penyata Import di Luar Modul: Cara Menyelesaikan Ralat Biasa Ini

JavaScript telah melihat perubahan ketara dengan pengenalan modul ES6, menawarkan pembangun cara moden dan cekap untuk menyusun dan menggunakan semula kod. Walau bagaimanapun, satu ralat biasa yang timbul apabila bekerja dengan modul ini ialah yang ditakuti: "Tidak boleh menggunakan pernyataan import di luar modul." Isu ini boleh mengecewakan, terutamanya untuk pembangun yang baru menggunakan modul ES6. Dalam blog ini, kami akan menyelami maksud ralat ini, sebab ia berlaku dan cara menyelesaikannya.

Apakah Maksud Ralat?

Ralat "Tidak boleh menggunakan pernyataan import di luar modul" berlaku apabila JavaScript cuba mentafsir pernyataan import ES6 dalam persekitaran yang tidak menyokong modul ES6 secara lalai.

Untuk memahami ralat ini, kita perlu membezakan antara modul ES6 dan modul CommonJS:

• CommonJS: Sistem modul lama yang digunakan oleh Node.js, tempat anda menggunakan require() untuk mengimport dependensi.
• Modul ES6: Sistem moden yang diperkenalkan dengan ES6, di mana anda menggunakan import dan eksport untuk modulariti.

Ralat ini biasanya berlaku kerana persekitaran (seperti Node.js atau penyemak imbas) sama ada tidak disediakan untuk mengendalikan modul ES6 atau dikonfigurasikan secara salah untuk berbuat demikian.

Punca Biasa Ralat

Untuk menyelesaikan ralat, adalah penting untuk memahami puncanya. Berikut adalah sebab yang paling biasa:

1. Persekitaran yang salah: Jika anda menjalankan modul ES6 dalam persekitaran Node.js tanpa mengkonfigurasinya untuk modul, anda akan menghadapi ralat ini. Secara lalai, Node.js menggunakan CommonJS.
2. Isu Sambungan Fail: Fail dengan sambungan .js dianggap sebagai modul CommonJS dalam Node.js melainkan anda mengkonfigurasi persekitaran secara eksplisit untuk mengendalikannya sebagai modul ES6.
3. Peralatan Lama: Alat binaan atau pengikat yang lapuk (seperti Webpack atau Babel) mungkin tidak dikonfigurasikan untuk mengendalikan sintaks modul moden dengan betul.

Cara Menyelesaikan Ralat

Bergantung pada persekitaran dan kes penggunaan anda, terdapat beberapa cara untuk menyelesaikan ralat "Tidak boleh menggunakan pernyataan import di luar modul".

1. Tambahkan "type": "modul" dalam package.json

Untuk memberitahu Node.js secara eksplisit bahawa projek anda menggunakan modul ES6, tambahkan perkara berikut pada fail package.json anda:

json

Salin kod

{ 

  "jenis": "modul" 

} 

Perubahan mudah ini akan menjadikan Node.js menganggap fail .js dalam projek anda sebagai modul ES6.

2. Gunakan Sambungan Fail .mjs

Sebagai alternatif, namakan semula fail JavaScript anda untuk menggunakan sambungan .mjs. Node.js memperlakukan fail .mjs sebagai modul ES6 secara lalai.

3. Kemas Kini Persekitaran Anda

Pastikan anda menggunakan versi terkini Node.js atau alatan lain yang menyokong modul ES6. Jalankan arahan berikut untuk menyemak versi Node.js anda:

bash

Salin kod

nod -v 

Jika ia sudah lapuk, kemas kini kepada versi terkini.

4. Kod Transpile Menggunakan Babel

Jika anda perlu menyokong persekitaran atau penyemak imbas yang lebih lama, anda boleh menggunakan Babel untuk mentranspile kod modul ES6 anda ke CommonJS. Pasang Babel dan konfigurasikannya dengan pratetap yang diperlukan untuk memastikan keserasian:

bash

Salin kod

npm pasang @babel/teras @babel/cli @babel/preset-env --save-dev 

Buat fail .babelrc dengan konfigurasi berikut:

json

Salin kod

{ 

  "preset": ["@babel/preset-env"] 

} 

Jalankan Babel untuk transpile kod anda:

bash

Salin kod

npx babel src --out-dir dist 

5. Semak Konfigurasi Pengikat Anda

Jika anda menggunakan pengikat seperti Webpack atau Rollup, pastikan tetapan modul dikonfigurasikan dengan betul. Contohnya, dalam Webpack, tetapkan pilihan output.libraryTarget kepada modul:

javascript

Salin kod

module.eksport = { 

  keluaran: { 

    perpustakaanSasaran: 'modul' 

  }, 

  percubaan: { 

    outputModul: benar 

  } 

}; 

Contoh Senario dan Pembetulan

Mari lihat beberapa contoh praktikal untuk lebih memahami cara menangani ralat ini.

Contoh 1: Menggunakan import dalam Node.js

Anda cuba jalankan kod berikut dalam Node.js:

javascript

Salin kod

import ekspres daripada 'ekspres'; 

aplikasi const = ekspres(); 

Jika package.json anda tidak termasuk "type": "module", ini akan menimbulkan ralat. Untuk membetulkannya, tambahkan yang berikut pada package.json anda:

json

Salin kod

{ 

  "jenis": "modul" 

} 

Contoh 2: Menjalankan import dalam Penyemak Imbas Lama

Anda cuba menggunakan import ES6 dalam penyemak imbas lama yang tidak menyokongnya secara asli. Penyelesaian di sini ialah menggunakan Babel untuk mentranspile kod dan pengikat seperti Webpack untuk menggabungkannya untuk keserasian penyemak imbas.

Petua Nyahpepijat

Jika anda masih mengalami ralat selepas mencuba pembetulan di atas, pertimbangkan strategi penyahpepijatan tambahan ini:

• Semak Versi Node.js: Pastikan versi Node.js anda menyokong modul ES6 (versi 12 dan ke atas).
• Semak Fail Konfigurasi: Semak semula package.json anda dan bina konfigurasi alat untuk tetapan modul yang betul.
• Periksa Alat Binaan: Sahkan bahawa pengikat atau transpiler anda disediakan untuk mengendalikan sintaks moden.

Amalan Terbaik untuk Bekerja dengan Modul

Untuk mengelak daripada menghadapi ralat ini dan untuk memastikan pembangunan lancar, ikuti amalan terbaik ini:

• Sentiasa pastikan Node.js, penyemak imbas dan alatan anda dikemas kini.
• Gunakan .mjs untuk fail modular atau nyatakan "jenis": "modul" dalam projek anda.
• Gunakan Babel dan pengikat untuk memastikan keserasian dengan persekitaran yang lebih lama.
• Gunakan alat linting untuk mengetahui isu konfigurasi lebih awal.

Kesimpulan

Ralat "Tidak boleh menggunakan pernyataan import di luar modul" ialah isu biasa tetapi mudah diselesaikan untuk pembangun JavaScript. Sama ada anda menggunakan Node.js, penyemak imbas atau alat binaan, memahami punca dan menggunakan pembetulan yang betul akan membantu anda bekerja dengan lancar dengan modul ES6. Dengan mengikut langkah dan amalan terbaik yang digariskan dalam panduan ini, anda boleh mengelakkan ralat ini dan meningkatkan kecekapan projek JavaScript anda.

Atas ialah kandungan terperinci Tidak Boleh Menggunakan Penyata Import di Luar Modul: Cara Menyelesaikan Ralat Biasa Ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!