在使用ES2015模組匯入功能的時候你有什麼覺得不爽的地方嗎？反正我有！下面就來說說。

1.命名匯入和自動完成

假設你編寫了一個簡單的JavaScript模組：

// stringUtils.jsexport function equalsIgnoreCase(string1, string2) {  return string1.toLowerCase() === string2.toLowerCase();}

這是一個 stringUtils 模組。該模組具有一個名為 equalsIgnoreCase 的匯出，該函式比較兩個忽略大小寫的字串。

到目前為止，一切看起來都不錯。

現在，讓我們嘗試從 stringUtils 模組中匯入 equalsIgnoreCase 函式到另一個JavaScript模組 app 中：

// app.jsimport { equalsIgnoreCase } from './stringUtils';equalsIgnoreCase('Hello', 'hello'); // => true

你很可能會通過以下方式編寫程式碼：

首先，你必須編寫匯入語句 import {}，在此步驟中，IDE無法提供有關要匯入的可用名稱的任何建議。

然後你繼續寫 from './stringUtils'，然後回到花括號，展開自動完成（autocomplete）以選擇要匯入的名稱。

儘管ES2015模組有很多優點，但是 import 模組語法很難使用自動完成。

2. Python 中的模組

現在，讓我們嘗試在Python中匯入命名元件。是否有同樣的問題？

這是用Python實現的相同模組 stringUtils 和 equalsIgnoreCase函式：

# stringUtils.pydef equalsIgnoreCase(string1, string2):  return string1.lower() == string2.lower()

在Python中，你無需明確指出要匯出的函式。

現在，在另一個Python模組應用程式內部，讓我們嘗試從 stringUtils 匯入 equalsIgnoreCase函式：

# app.pyfrom stringUtils import equalsIgnoreCaseequalsIgnoreCase('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模組中使用自動完成有困難？如果是，你知道什麼解決方案？

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。