ES modules

了解 JavaScript 的這個新功能 直到最近，我才有幸使用動態匯入，當時我在一個 Next.js 應用程式中使用它們來分割程式碼，並且我必須進行一些研究，因為它們與靜態匯入有些不同。 一個 ES 模組的靜態匯入（預設匯出）的寫法如下： import moment from 'moment' 你可以使用物件解構的方式來取得命名匯出： import { format } from 'date-fns' 靜態匯入有一些限制： 它們限制在檔案的頂層 它們不能在條件判斷（if）內被載入 套件名稱無法在執行時決定 動態匯入可以做到所有這些事情！ 它們的語法略有不同。 並且它們可以在模組內使用。 使用方式如下： const module = await import('module') 而要使用預設匯出，則必須先呼叫 .default()。 以 moment 為例的範例： const moment = (await import('moment')).default() 相反地，命名匯入的使用方式與預期相同： const { format } = await import('date-fns') 你能夠立即使用它們嗎？可以！瀏覽器支援已經相當不錯，並且還有一個Babel 插件可用。

在進行項目開發時，有時會遇到以下錯誤： TypeError: Cannot assign to read only property 'exports' of object '# <Object>' error 該錯誤是由 Webpack 生成的，它表示您試圖在需要使用 ES 模塊 的地方使用了 CommonJS！ 請避免使用 CommonJS 語法： const myfunction = () => {} module.exports = myfunction 改用 ES 模塊語法： const myfunction = () => {} export default myfunction 然後，您可以像這樣導入導出的函數或對象： import myfunction from './myfunction' 您也可以從文件中導出多個函數或對象： myfunctions.js const myfunction1 = () => {} const myfunction1 = () => {} export { myfunction1, myfunction2 } 然後，您可以像這樣導入它們：...

學習如何在當前的 v8 中使用這個新功能 通常只能在異步函數內部使用等待。因此通常要宣告立即調用的異步函數表達式來包裹它： (async () => { await fetch(/* ... */) })() 或者也可以先宣告一個函數然後再調用它： const doSomething = async () => { await fetch(/* ... */) } doSomething() 頂層等待將允許我們簡單地運行： await fetch(/* ... */) 而不需要這麼多樣板代碼。 注意：這僅在ES模塊中運作。 對於單個的 JavaScript 文件，無需打包工具，你只需將其保存為 .mjs 擴展名，就可以使用頂層等待。

如果您正在使用Node.js，並希望停止使用require()，改用ES模塊的import語法，則需要進行以下操作。 在package.json文件中添加"type": "module"，如下所示： { "name": "projectname", "version": "1.0.0", ...剩餘的文件內容 } 改為： { "name": "projectname", "type": "module", "version": "1.0.0", ...剩餘的文件內容 } 就這樣！ 現在您可以使用import來引入模塊，例如： import fs from 'fs'

下面是如何解决“__dirname 未定义在 ES 模块范围內”的錯誤的方法。 在使用 ES 模块時，无法使用 __dirname。 在 Node 脚本中，可以使用 __dirname 获取 当前 JavaScript 文件所在文件夹的路径，许多 Node.js 项目中都会使用它。 但是，如果在 ES 模块中使用它，你将遇到“__dirname 在 ES 模块范围內未定义”的錯誤。 在这种情况下，你可以做什么呢？ 我通过使用在 Node.js GitHub 问题页面中找到的解决方案来解决此问题。 首先，你需要导入 Node.js 的 path 模块 和 url 模块中的 fileURLToPath 函数： import path from 'path'; import { fileURLToPath } from 'url'; 然后，你可以按照以下方式复制 __dirname 的功能： const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); 顺便一提，这也复制了 __filename，它返回正在执行的代码的文件名。 现在，你可以像往常一样使用 __dirname： console.log(__dirname)