帶你了解ES6 Module

1.commonjs

在說 es6 模組以前，我們先來看一下後端普遍使用的打包方式，commonjs的一些特性。

仔細閱讀以下**

// module.js
let a =1;
function
foo(
)module.exports =
;// index.js
let=
require
('./module.js');
console.
log(a)
;// 1
foo();
console.
log(a)
;// 1

2.import、export

es6以後出現的import、export很好的實現了模組功能。核心思想是盡量靜態化，使得編譯時就能確定依賴關係，以及輸出和輸入的變數。而commonjs是在執行時確定這些東西。

// commonjs require
let path =
'./module'
let module =
require
(path)
;

// module.js
let a =1;
function
foo(
)export
;// index.js
let=
require
('./module.js');
console.
log(a)
;// 1
foo();
console.
log(a)
;// 2

import foo from
'./module'
;import foo from
'./module'
;

以上**中foo只會被匯入一次

// 與普通輸出的區別
export
default
function
add(
)import add from
'./add'
export
function
add(
)import
from
'./add'

本質上，export default 就是輸出乙個叫 default 的變數或者方法，然後系統允許你為它重新命名。所以下面寫法也是等效的

function
add(
)export
;// 等同於export default add
import
from
'./module'
;// 等同於import foo from './module'

3.export 與 import 的復合寫法

export
from
'module'
;// 等同於
import
from 'module;
export

上面**中，export和import語句可以結合為一行**。但是，寫成一行以後，foo和bar實際上沒有被匯入當前模組，只是相當於當前對外**了這兩個介面，導致當前模組不能直接使用foo，bar。

4.跨模組常量

export
const db =
import
from
'./module'
;

vue專案中props應用，這樣子元件就可以自己修改props中的屬性，而不需要通過呼叫父元件的方法了。
// 父元件
"useriinfo"
/>
data()
}}// 子元件
props:},
created()

5.import()函式

const path =
'./'
+ filename;
const mymodule =
required
(path)
;

因此，引入了import
()函式，返回乙個promise物件
import
(path)
.then
(res=>).
catch
(err=>
)- 這個函式的引入起到的很好的作用，比如我們在做多語言載入的時候，我們需要引入語言包，但是我們又不想一次性將所有語言包全部引入，我們只需要引入需要的語言包就可以了，那麼就用到了import
()函式，下面是乙個按需載入語言包的例子

export
function
loadlanguageasync
(lang))}
return promise.
resolve
(seti18nlanguage
(lang));
}return promise.
resolve
(lang)
;}

6.瀏覽器載入

傳統方法

es6模組載入

"module"
>
import
from
'./module'
;<
/script>

node.js載入

node中原本存在的commonjs與es6的模組載入並不相容。因此node中做了限制

.mjs 檔案總是以es6模組載入； .cjs 檔案總是以commonjs載入， .js 檔案的載入取決於 package.json 中type欄位，若 type=「module」則以es6模組載入，預設commonjs

學習記錄 ES6 module

export 和 import 簡單的例子 a.js export const a i am a index.js import from a.js console.log a i am a export import 嚴格模式 export 的具體使用方式，以及 import 的具體使用方式 de...

ES6 Module 多種用法

使用者需要知道所要載入的變數名或函式名，否則無法載入 export const a 1export const b 1 等價於 const a 1const b 1export export 等價於 const a 1const b 1export import from const a 1cons...

ES6 Module的載入實現

瀏覽器載入傳統方法在html網頁中，瀏覽器通過載入規則瀏覽器載入es6模板，也是使用網頁中插入乙個模組foo.js，由於type屬性設為module，所以瀏覽器知道這是乙個 es6 模組。瀏覽器對於帶有type module 的es6模組允許內嵌在網頁中，語法行為與載入外部指令碼一致外部的模...

帶你了解ES6 Module

學習記錄 ES6 module

ES6 Module 多種用法

ES6 Module的載入實現

相關推薦