>[success] # import 和 export 使用 1. **export**關鍵字將一個模塊中的**變量、函數、類等**導出 2. **import**關鍵字負責從**另外一個模塊中導入內容** >[danger] ##### export 1. 在語句聲明的前面直接加上export關鍵字 2. 將所有需要導出的標識符，放到**export后面的 {}中** 3. 導出時給標識符起一個別名,通過as關鍵字起別名 ~~~ const a = 1 export const b = 1 export function c() {} export { a } export { a as newA } ~~~ >[danger] ##### import 1. **import {標識符列表} from '模塊'** 2. 導入時給標識符起別名,通過**as關鍵字起別名** 3. 通過 * 將模塊功能放到一個模塊功能對象（ module object）上 ~~~ import { a } from './bb.js' import { a as zz } from './bb.js' import * as all from './bb.js' ~~~ >[danger] ##### export和import 組合使用 ~~~ /** * import { a } from './bb.js' * export { a } */ export { a } from './bb.js' ~~~ >[danger] ##### default 1. 默認導出export時可以**不需要指定名字**,在一個模塊中，**只能有一個默認導出** ~~~ const a = 1 export default a ~~~ * 導入 ~~~ import a from './bb.js' ~~~ >[danger] ##### 關于import 導入 注意點 1. 在 import 在導入模塊時，from寫的是導入模塊的路徑，它是一個字符串，在這個字符串當中，必須使用完整的文件名稱，不能省略擴展名，不能省略文件后綴 2. 在原生 ES Modules 中不能自動載入 index.js 例如： import { lowercase } from './utils' -- 這是錯誤示范不能省略index.js import { lowercase } from './utils/index.js' -- 正確寫法 3.如果我們使用的是相對路徑時的’./…'無法省略，如果省略以字母開頭，ES Moudles 會認為是在加載第三方模塊，例如在node_modules有一個loash庫 import _ from 'loash' 4.使用相對路徑甚至是完整的 URL 去加載模塊，當然前提是引入的URL 允許跨域 5.只需要去執行某個模塊，并不需要提取其中的成員--" import ' 路徑 ' " 6.如果一個模塊需要導出的的成員特別多，且在導入時都會用到，則可以使用 -- import * as 對象名 from '路徑' 7.如果在一個模塊中同時導出了命名成員和默認成員，可以簡寫為： import abc, { name, age } from './module.js' >[danger] ##### 具體使用 [看阮一峰老師文章就夠用了](https://es6.ruanyifeng.com/#docs/module)