如何在瀏覽器的JavaScript控制檯中訪問ES6模塊中定義的函數？

我有一個一個ES6模塊（sender.js）中所定義的函數，如下所示：如何在瀏覽器的JavaScript控制檯中訪問ES6模塊中定義的函數？

function send() { 
    // do stuff 
} 
export {send};

該模塊在應用程序的主JavaScript中使用的文件app.js如下：

import {send} from "./sender"

的send功能可在app.js文件中找到，但在Firefox的Javascript控制檯中不是：

> send 
ReferenceError: send is not defined

如何在JavaScript控制檯中導入send函數？

2017-06-04 Chedy2149

ES 6個模塊不受任何瀏覽器的支持，所以我假設你正在使用巴別爾，對吧？ –

是的，我正在使用Babel – Chedy2149

您是否在使用任何打包程序，如webpack，Browserify或Rollup？ –

您可以通過將其指定給全局對象 - 將其設置爲window的瀏覽器來將其設置爲全局對象。

import {send} from "./sender"; 
window.send = send;

注意的是，雖然它可能在調試是有用的，你不應該使用在生產代碼 - 見Why are global variables considered bad practice?

2017-06-04 14:14:03

我想知道的是，因爲'send'是在文件中聲明的，而不是被包裝在任何函數中，不應該是全局的嗎？這是特定於通過'import'加載的文件嗎？ –

@IonicăBizău我認爲這取決於OP所使用的捆綁器。這種行爲對我來說似乎合乎邏輯，因爲不需要應用程序來公開任何函數。例如，[彙總將相關代碼符合空白文件]（https://goo.gl/PM4zOq）。 –

@IonicăBizău是的，它是特定於他們。導入時加載的文件是模塊，模塊有自己的作用域。這就是模塊的目的 - 模塊化，不污染全球範圍。 – estus

回答