瀏覽器端模塊化方式es module詳解

在es module出現之前還有社區推出amd和cmd的規范，這兩者還有其特定的編寫方式，使用起來不算很方便。es module被官方推出來就成為了瀏覽器端實現模塊化的一個很好的方案。

 

想要在瀏覽器端使用 es module ，首先在 html 當中引入 js 文件的時候，就需要將script標簽中的type設置為module

index.html  
<script src="b.js" type="module"></script>

 

這樣瀏覽器才能執行使用es module的js文件，定義之后就可以在對應的js文件中使用模塊化的方式來編寫文件，導出和導入的方式有幾種，但都是相同的關鍵字，export 與 import，一起來看看可以如何定義導入導出。

 

第一種，直接導出定義的變量，這種方式導出的內容互不關聯，適用於導出自己定義的常量，redux中定義action就經常使用這種導出

a.js
export const name = 'alice'
export const age = 16
 
b.js
import { name, age } from "./a.js";
console.log(name, age) // alice 16

 

第二種，先定義變量，再使用 export 一起導出，導入方式可以使用上面的方式，也可以通過一個 * 來將所有的導出內容定義為一個對象，從對象中再去取值 ，redux中定義的reducer、action在 index.js 中導出會經常使用這種方式

a.js
const name = 'alice'
const age = 16
export { name, age }
 
b.js
import * as obj from "./a.js";
console.log(obj.name, obj.age) // alice 16

 

第三種，給導出的變量取別名，導入的變量同樣可以取別名，當名字發生沖突時、導出變量名太長時，都可以取個別名，取完別名之后，原先的名字就不可用了

a.js
const name = 'alice'
const age = 16
 
export { name as myName, age as myAge }
 
b.js
import { myName as aliceName, myAge } from "./a.js";
 
console.log(aliceName, myAge)  // alice 16

 

第四種，默認導出，默認導出在一個js文件中只允許存在一個，默認導出可以不用定義變量名，在導入的時候可以隨意起名，並且導入的時候不需要加 {} ，這樣的定義方式在編寫redux中的reducer函數時很常見

a.js
export default function(){
    return 'hello world'
}
 
b.js
import foo from './a.js'
 
console.log(foo()) // hello world

 

第五種，合並導出，在b.js文件導入a.js文件中導出的內容，b.js文件不對導入的內容做任何操作，直接導出，最后由index.js導入b.js並進行處理

a.js
export const name = 'alice'
 
b.js
export { name } from './a.js'
 
index.js
import { name } from './b.js'
 
console.log(name) // alice

 

以上是es module的具體的語法表現，導入導出的方式有很多，可以根據具體需要的場景進行判斷和使用，另外，es module 還有一些特點。

1、異步加載，當script標簽中定義 type="module"之后，相當於給js標簽加上了 async 的標識，代表異步加載資源，不會阻塞其它內容的執行，按照如下代碼，打印的hi有可能是在引入的index.js文件之前，要根據 index.js 的執行速度來判斷。

<script src="index.js" type="module"></script>
<script type="text/javascript">
    console.log('hi')
</script>
 

 

2、編譯時解析，簡單來說javascript的執行過程需要將原代碼編譯成抽象語法樹，運行的時候再轉成機器可識別的語言，在編譯階段解析數據，並不知道該不該加載此js文件，只有等到文件運行時，才知道文件里具體邏輯的執行過程，所以不能夠在編譯時解析的模塊化方式出現類似條件判斷，動態引入等代碼

const flag = true
if(flag){
    import xxx from './a.js'
 }

如果真的需要根據一些條件才執行代碼，可以通過 require 函數來動態的引入，require函數執行完是一個promise對象，可以通過then方法來獲取所需要的數據

const flag = true
 
if(flag){
  import('./b.js')
  .then(({name})=>{
    console.log(name)
  })
}

 

3、export 關鍵字后面跟的大括號並不是代表對象，在對象中也沒有通過 as 取別名這樣的方式，如果我們嘗試以下把它當成對象來導出，一定是會報錯的

let name = 'alice'
export {
    name: name
}

 

 export 導出的 name 就對應着 name 這個變量，如果修改 name 的值，export 導出的內容會發生變化，import 導入的內容也會發生變化

a.js
let name = 'kiki', age = 18
 
setTimeout(()=>{
  name = '嘻嘻嘻'
}, 1000)
 
export {
  name,
    age
}
 
b.js
import { name, age } from './a.js'
 
console.log(name)
 
setTimeout(()=>{
  console.log(name)
},2000)
 
// 依次打印 kiki 嘻嘻嘻

 

export 導出的內容有一個模塊環境記錄，用來記錄導出時更改的變量，當變量更改時，使用新的變量值替換舊變量值

 

但是不可以反向的修改，因為 import 導入的內容是一個通過 const 定義的常量，常量是不可以被修改的，以下操作是不可行的

import { name } from './a.js'
name = '哈哈哈哈'

  

一般而言，我們都是在瀏覽器端使用 es module，如果想要在 node 端編寫es module代碼，可以有兩種方式，一種是在 package.json 中配置 type：module，另一種是直接把js文件的后綴名為改為 .mjs

 

 

node端常用的模塊化方式是 commonjs，同樣是模塊化，那么 es module 和 commonjs 之間是否能互相調用呢，看看如下代碼

a.mjs
const name = 'alice'
const age = 18
 
export {
  name,
  age
}
 
b.js
const a = require('./a.mjs')
 
console.log(a)

以上代碼執行會報錯 Must use import to load ES Module，而如下的方式在高版本的nodejs中是可以的

a.js
const name = 'alice'
const age = 18
 
module.exports = {
  name,
  age
}
 
b.js
import b from './b.js'
 
console.log(b) // { name: 'alice', age: 18 }

以上就是瀏覽器端模塊方式es module的概念與用法，模塊化能夠更好的將代碼分塊並復用，nodejs端也有常用實現模塊化的方式，即commonjs，如果不熟悉可以看看這篇文章 -> nodejs端模塊化方式comomjs詳解