ES6 中 module 備忘清單，你可能知道 module 還能夠這樣用！

做者：Samantha Ming
譯者：前端小智
來源：medium

點贊再看，微信搜索 【大遷世界】關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

這是一份備忘單，展現了不一樣的導出方式和相應的導入方式。 它實際上可分爲3種類型：名稱，默認值和列表 👍

// 命名導入/導出 
export const name = 'value'
import { name } from '...'

// 默認導出/導入
export default 'value'
import anyName from '...'

// 重命名導入/導出 
export { name as newName }
import { newName } from '...'

// 命名 + 默認 | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'

// 導出列表 + 重命名
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'

接下來，咱們來一個一個的看🤓

命名方式

這裏的關鍵是要有一個name。

export const name = 'value';

import { name } from 'some-path/file';

console.log(name); // 'value'

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

默認方式

使用默認導出，不須要任何名稱，因此咱們能夠隨便命名它👏

export default 'value'

import anyName from 'some-path/file'

console.log(anyName) // 'value'

❌ 默認方式不用變量名

export default const name = 'value';  
// 不要試圖給我起個名字！

命名方式 和 默認方式 一塊兒使用

命名方式 和 默認方式 能夠同個文件中一塊兒使用🤝

eport const name = 'value'
eport default 'value'

import anyName, { name } from 'some-path/file'

導出列表

第三種方式是導出列表(多個)

const name1 = 'value1'
const name2 = 'value2'

export {
  name1,
  name2
}

import {name1, name2 } from 'some-path/file'

console.log(
  name1,  // 'value1' 
  name2,  // 'value2' 
)

須要注意的重要一點是，這些列表不是對象。它看起來像對象，但事實並不是如此。我第一次學習模塊時，我也產生了這種困惑。真相是它不是一個對象，它是一個導出列表

// ❌ Export list ≠ Object
export {
  name: 'name'
}

重命名的導出

對導出名稱不滿意？問題不大，可使用as關鍵字將其重命名。

const name = 'value'

export {
  name as newName
}

import { newName } from 'some-path/file'

console.log(newName); // 'value'

// 原始名稱不可訪問
console.log(name); // ❌ undefined

❌ 不能將內聯導出與導出列表一塊兒使用

export const name = 'value'

// 你已經在導出 name ☝️，請勿再導出我
export {
  name
}

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

重命名導入

一樣的規則也適用於導入，咱們可使用as關鍵字重命名它。

const name1 = 'value1'
const name2 = 'value2'

export {
  name1,
  name2 as newName2
}

import {
  name1 as newName1,
  newName2
} from '...'

console.log(newName1); // 'value1'
console.log(newName2); // 'value2'

❌
name1; // undefined
name2; // undefined

導入所有

export const name = 'value'

export default 'defaultValue'

import * as anyName from 'some-path/file'

console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'

命名方式 vs 默認方式

是否應該使用默認導出一直存在不少爭論。 查看這2篇文章。

• Why I've stopped exporting defaults from my JavaScript modules
• GitLab RFC by Thomas Randolph

就像任何事情同樣，答案沒有對錯之分。正確的方式永遠是對你和你的團隊最好的方式。

命名與默認導出的非開發術語

假設你欠朋友一些錢。 你的朋友說能夠用現金或電子轉賬的方式還錢。 經過電子轉賬付款就像named export同樣，由於你的姓名已附加在交易中。 所以，若是你的朋友健忘，並開始叫你還錢，說他沒收到錢。 這裏，你就能夠簡單地向他們顯示轉賬證實，由於你的名字在付款中。 可是，若是你用現金償還了朋友的錢（就像default export同樣），則沒有證據。 他們能夠說當時的 100 塊是來自小紅。 現金上沒有名稱，所以他們能夠說是你本人或者是任何人😵

那麼採用電子轉賬（named export）仍是現金（default export）更好？

這取決於你是否信任的朋友🤔， 實際上，這不是解決這一難題的正確方法。 更好的解決方案是不要將你的關係置於該位置，以避免冒險危及友誼，最好仍是相互坦誠。 是的，這個想法也適用於你選擇named export仍是default export。 最終仍是取決大家的團隊決定，哪一種方式對團隊比較友好，就選擇哪一種，畢竟不是你本身一我的在戰鬥，而是一個團體😄

人才們的 【三連】 就是小智不斷分享的最大動力，若是本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝你們的觀看。

---

原文：https://puppet.com/docs/puppe...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索【大遷世界 】第一時間閱讀，回覆【福利】有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。