隨著 ES6 模組的引入，JavaScript 發生了重大變化，為開發人員提供了一種現代且高效的方式來組織和重用程式碼。然而，使用這些模組時出現的一個常見錯誤是可怕的：「無法在模組外部使用import 語句。」 這個問題可能會令人沮喪，特別是對於新接觸ES6 模組的開發人員來說。在本部落格中，我們將深入探討此錯誤的含義、發生的原因以及解決方法。
錯誤是什麼意思？
當 JavaScript 嘗試在預設不支援 ES6 模組的環境中解釋 ES6 import 語句時，會出現 「無法在模組外部使用 import 語句」 錯誤。
要理解這個錯誤，我們需要區分 ES6 模組 和 CommonJS 模組:
發生此錯誤的原因通常是環境（例如 Node.js 或瀏覽器）未設定為處理 ES6 模組，或配置不正確。
錯誤的常見原因
要解決錯誤，了解其根本原因很重要。以下是最常見的原因：
如何解決錯誤
根據您的環境和用例，有多種方法可以解決「無法在模組外部使用 import 語句」 錯誤。
1。在package.json中加入 "type": "module"
要明確告訴 Node.js 您的專案使用 ES6 模組，請將以下內容加入 package.json 檔案：
json
複製程式碼
{
「類型」：「模組」
}
這個簡單的變更將使 Node.js 將專案中的 .js 檔案視為 ES6 模組。
2。使用 .mjs 檔案副檔名
或者，重新命名您的 JavaScript 檔案以使用 .mjs 副檔名。 Node.js 預設將 .mjs 檔案視為 ES6 模組。
3。更新您的環境
確保您使用的是最新版本的 Node.js 或其他支援 ES6 模組的工具。執行以下命令檢查您的 Node.js 版本：
狂歡
複製程式碼
節點-v
如果已過時，請更新至最新版本。
4。使用 Babel 轉譯代碼
如果您需要支援較舊的環境或瀏覽器，您可以使用 Babel 將 ES6 模組程式碼轉譯為 CommonJS。安裝 Babel 並使用必要的預設進行配置以確保相容性：
狂歡
複製程式碼
npm install @babel/core @babel/cli @babel/preset-env --save-dev
使用以下配置建立 .babelrc 檔案：
json
複製程式碼
{
"預設": ["@babel/preset-env"]
}
運行 Babel 轉譯你的程式碼：
狂歡
複製程式碼
npx babel src --out-dir dist
5。檢查您的捆綁器配置
如果您使用 Webpack 或 Rollup 等捆綁器，請確保模組設定配置正確。例如，在 Webpack 中，將 output.libraryTarget 選項設為 module:
javascript
複製程式碼
module.exports = {
輸出：{
庫目標：「模組」
},
實驗：{
輸出模組：true
}
}；
範例場景與修復
讓我們來看一些實際範例，以便更好地了解如何解決此錯誤。
範例 1：在 Node.js 中使用 import
您嘗試在 Node.js 中執行以下程式碼：
javascript
複製程式碼
從'express'進口快遞；
const app = express();
如果你的 package.json 不包含 "type": "module"，這會拋出錯誤。若要修復此問題，請將以下內容新增至 package.json 中：
json
複製程式碼
{
「類型」：「模組」
}
範例 2：在舊版瀏覽器中執行導入
您嘗試在本機不支援 ES6 匯入的舊版瀏覽器中使用它們。這裡的解決方案是使用 Babel 來轉譯程式碼，並使用像 Webpack 這樣的捆綁器來捆綁它以實現瀏覽器相容性。
除錯技巧
如果您在嘗試上述修復後仍然遇到錯誤，請考慮以下額外的偵錯策略：
使用模組的最佳實務
為了避免遇到此錯誤並確保順利開發，請遵循以下最佳實踐：
結論
「無法在模組外部使用 import 語句」 錯誤對 JavaScript 開發人員來說是一個常見但易於解決的問題。無論您使用 Node.js、瀏覽器或建置工具，請了解原因並套用正確的修復方法都將幫助您無縫地使用 ES6 模組。透過遵循本指南中概述的步驟和最佳實踐，您可以避免此錯誤並提高 JavaScript 專案的效率。
以上是無法在模組外部使用導入語句：如何解決此常見錯誤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
