ES6中如何匯入與匯出模組

匯出(export)

可以用export關鍵字將內容給其他模組，在最簡單的例子中，可以將export放在任何變數、函式或類宣告的前面，以將它們從模組中匯出。

usemodule.js如下：

//兩種匯出形式的區別：

//(1)預設形式：不用加任何修飾
//(2)自定義：匯出的內容需要加{}
// 匯出變數
export
var str1=
"red"
;export
let str2=
;export
const number =10;
// 匯出函式
export
function
sum(num1, num2)
// 匯出類
// 類名前加default關鍵字，表示這是乙個預設的匯出
export
default
class
person
know()
}

通過import關鍵字在另乙個模組中訪問。import語句的兩個部分，分別是要匯入的內容和從哪個模組匯入的路徑

書寫格式

: import 匯入指定檔案的指定內容 from 路徑(相對路徑、絕對路徑、網路路徑都可以)
模組化title
>
head
>
>
type
="module"
>
//要使用模組化，需要在標籤中加上type="module" ，類似於開啟模組化的開關,否則是不能使用的
//匯入時依然可以使用as進行重新命名       
//匯入指定內容，如果是*號，則表示引入指定路徑下的所有內容
//單個匯入
import
from
"./js/usemodule.js"
;        console.
log(
sum(10,
20));
// 30
sum =50;
// 報錯  不能給匯入的內容重新賦值
//多個匯入
import person,
from
"./js/usemodule.js"
;let person=
newperson()
;        console.
log(person.name)
;        person.
know()
;script
>
body
>
html
>

從乙個模組匯入變數、函式或者類時，我們不想用原來的名稱了，就可以在匯出過程和匯入過程中改變匯出內容的名稱

比如 export ;就是將左側person修改為右側的per

在當前js中，名字依然是左側的person

(1)匯出過程中修改名稱

//匯出時修改函式名

export
function
sum(num1, num2)
export
;//而在另乙個模組中，匯入時就需要這樣寫，如下：
//函式名稱在匯出之前就被修改過了，所以這裡在匯入時就要使用改後的名字
import
from
"./js/usemodule.js"
;

//匯出時不使用原來的名字，直接在匯入時修改，如下

import
from
"./js/usemodule.js"
;

es6模組匯入匯出

如何在 webpack 構建的專案中，使用 vue 進行開發 複習 在普通網頁中如何使用vue 1.使用 script 標籤 引入 vue 的包 3.通過 new vue 得到乙個 vm 的例項 在webpack 中嘗試使用 vue 注意 在 webpack 中，使用 import vue from...

es6 匯入匯出

1.命名匯出 命名匯出就是明確匯出的變數名稱和值。在src目錄下建立math.js，index.js檔案。math.js內容 case 1 export後面跟變數輸出宣告語句 export var pi 3.14 case 2 export後面直接跟變數定義語句 export var add fun...

es6的模組匯出

在es5中，用module.exports和exports匯出模組，用require引入模組。es6新增export和export default匯出模組，import匯入模組。1.export的使用 案例 檔案a.js的內容 export var num1 10 export var num2 1...