Js模組化匯入匯出

2021-10-14 21:54:07 字數 2926 閱讀 3805

// 1.js

var a =1;

varb

=function()

module.exports =

// 1-1.js

var m1 =

require

("./1.js"

)console.

log(m1.a)

;// 1

m1.b()

;// 1

// 1-2.js

import m1 from

'./1.js'

console.

log(m1.a)

;// 1

m1.b()

;// 1

// or

import

from

'./1.js'

console.

log(a)

;// 1b(

);// 1

// 2.js

var a =2;

varb

=function()

exports.a = a;

exports.b = b;

// exports = // 不能這麼寫,這樣就改變了exports的指向為乙個新物件而不是module.exports

// 2-1.js

var m1 =

require

("./2.js"

)console.

log(m1.a)

;// 2

m1.b()

;// 2

// 2-2.js

import m1 from

'./2.js'

console.

log(m1.a)

;// 2

m1.b()

;// 2

// or

import

from

'./1.js'

console.

log(a)

;// 2b(

);// 2

// 匯出單個特性

export

let name1, name2, …, namen;

// also var, const

export

let name1 = …, name2 = …, …, namen;

// also var, const

export

function

functionname()

export

class

classname

// 匯出列表

export

;// 重新命名匯出

export

;// 解構匯出並重命名

export

const

= o;

// 預設匯出

export

default expression;

export

default

function

(…)// also class, function*

export

default

function

name1

(…)// also class, function*

export

;// 匯出模組合集

export

*from …;

// does not set the default export

export

*as name1 from …;

// draft ecmascript® 2o21

export

from …;

export

from …;

export

from …;

// name-從將要匯入模組中收到的匯出值的名稱

// member, membern-從匯出模組,匯入指定名稱的多個成員

// defaultmember-從匯出模組,匯入預設匯出成員

// alias, aliasn-別名,對指定匯入成員進行的重新命名

// module-name-要匯入的模組。是乙個檔名

// as-重新命名匯入成員名稱(「識別符號」)

// from-從已經存在的模組、指令碼檔案等匯入

import defaultmember from

"module-name"

;// 不加{}即匯入export default

import

*as name from

"module-name"

;import

from

"module-name"

;// 匯入export 按需匯入

import

from

"module-name"

;import

from

"module-name"

;// 匯入export

import

from

"module-name"

;import defaultmember,

from

"module-name"

;import defaultmember,

*as name from

"module-name"

;import

"module-name"

;// 將執行模組中的全域性**, 但實際上不匯入任何值。

es模組化匯入匯出

在es6中每乙個模組即是乙個檔案,在檔案中定義的變數,函式,物件在外部是無法獲取的。如果你希望外部可以讀取模組當中的內容,就必須使用export來對其進行暴露 輸出 先來看個例子,來對乙個變數進行模組化。我們先來建立乙個test.js檔案,來對這乙個變數進行輸出 export let myname ...

前端模組化 匯入匯出

1 commonjs實現匯入匯出 匯出 通過乙個物件匯出 module.exports demo a,b 匯入 let require modulea 等價於let ma require modulea let test ma.test 2 es的匯入匯出 1 export的基本使用 export指...

js模組化 預設匯出 export default

在使用 export 匯出後,import 匯入時需要使用花括號對應模組。使用 export default 後,可以省略花括號。defaultmyclass.js class myclass myclass.prototype.hello function export jstestdefault...