JavaScript的import語句可以用來導入被分割到多個文件的代碼功能。而當我們需要從本地引入代碼時，該怎么做呢？本篇文章將會探討如何使用JavaScript的import語句從本地導入代碼。

步驟1: 在本地創建模塊

首先，我們需要在本地創建一個模塊。為了演示方便，我們假設我們要創建一個名為myModule.js的模塊。該模塊會輸出一個函數，來計算兩個數字的和。我們可以這樣編寫代碼：

function add(num1, num2) {
return num1 + num2;
}
export { add };

在這個模塊中，我們定義了一個名為add的函數，并在文件的最后使用export語句導出函數。現在，我們已經準備完了我們的本地模塊。

步驟2: 在主文件中導入模塊

接下來，我們需要在主文件中導入我們的本地模塊。為了演示方便，我們假設我們要在main.js文件中導入myModule.js模塊。我們可以這樣編寫代碼：

import { add } from './myModule.js';
console.log(add(1, 2)); // 3

在這個代碼中，我們使用import語句把add函數導入到主文件中。我們還要指定myModule.js文件的相對路徑。最后，我們在控制臺中輸出了使用add函數計算1和2的和。

步驟3: 在HTML中加載主文件

最后，我們需要在HTML文件中加載我們的主文件。我們可以這樣編寫代碼：

在這個代碼中，我們創建了一個HTML文件，并加載了我們的主文件。我們使用type="module"屬性告訴瀏覽器這是一個ES6模塊。src屬性指定將要加載的主文件的相對路徑。

總結

JavaScript的import語句可以幫助我們將代碼拆分到多個文件中，并且可以輕松從本地導入代碼。在本文中，我們從頭到尾地演示了如何使用import語句從本地導入代碼。希望這篇文章可以幫助你更好地理解JavaScript模塊化編程。