在使用ES2015模組匯入功能的時候你有什麼覺得不爽的地方嗎？反正我有！下面就來說說。
1.命名匯入和自動完成
假設你編寫了一個簡單的JavaScript模組：
// stringUtils.js
export function equalsIgnoreCase(string1, string2) {
return string1.toLowerCase() === string2.toLowerCase();
}
複製程式碼這是一個 stringUtils模組。該模組具有一個名為 equalsIgnoreCase 的匯出，該函式比較兩個忽略大小寫的字串。
到目前為止，一切看起來都不錯。
現在，讓我們嘗試從 stringUtils 模組中匯入 equalsIgnoreCase 函式到另一個JavaScript模組 app 中：
// app.js
import { equalsIgnoreCase } from './stringUtils';
equalsIgnoreCase('Hello', 'hello'); // => true
複製程式碼你很可能會通過以下方式編寫程式碼：
首先，你必須編寫匯入語句 import {}，在此步驟中，IDE無法提供有關要匯入的可用名稱的任何建議。
然後你繼續寫 from './stringUtils'，然後回到花括號，展開自動完成（autocomplete）以選擇要匯入的名稱。
儘管ES2015模組有很多優點，但是 import 模組語法很難使用自動完成。
2. Python 中的模組
現在，讓我們嘗試在Python中匯入命名元件。是否有同樣的問題？
這是用Python實現的相同模組 stringUtils 和 equalsIgnoreCase函式：
# stringUtils.py
def equalsIgnoreCase(string1, string2):
return string1.lower() == string2.lower()
複製程式碼在Python中，你無需明確指出要匯出的函式。
現在，在另一個Python模組應用程式內部，讓我們嘗試從 stringUtils 匯入 equalsIgnoreCase函式：
# app.py
from stringUtils import equalsIgnoreCase
equalsIgnoreCase('Hello', 'hello') # => true
複製程式碼很有可能，你會這樣寫 app 模組：
在Python中，指出您要從中匯入的模組： from stringUtils ，然後寫匯入什麼…
如果你想知道可以匯入的函式，編輯器已經知道了模組名並給出了必要的建議。方法更好!
3.解決方案
我能找到的在JavaScript中對命名匯入啟用自動完成的唯一解決方案是call ide以獲得幫助。
例如，在Visual Studio Code中，你可以安裝JavaScript（ES6）程式碼片段外掛。
啟用外掛後，通過使用 imd 程式碼段並按 tab 鍵，游標首先跳到編寫模組路徑的位置。然後，在按下 tab 鍵後，游標會跳轉回花括號內的匯入位置。它是這樣工作的：
總結
在JavaScript中，匯入語法強制您首先指定要匯入的項(函式、類、變數)，然後指定模組的路徑。這種方法對自動完成是不友好的。
在Python中則相反，首先指定模組名稱，然後指定要匯入的元件，從 stringUtils 匯入 equalsIgnoreCase，使用此語法可以輕鬆自動完成匯入的專案。
使用ES6程式碼片段外掛，您可以減輕在JavaScript中命名匯入自動完成的問題。總比沒有好。
您是否發現在ES模組中使用自動完成有困難？如果是，你知道什麼解決方案？
原文：dmitripavlutin.com/javascript-…
翻譯：杜尼卜
如果對你有所啟發和幫助，可以點個關注、收藏，也可以留言討論，這是對作者的最大鼓勵
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。