如何使用與babel一起編譯並在瀏覽器中使用Webpack導出的類

我有一個基於websocket的庫的項目，該項目的組件需要在Node和瀏覽器中運行。目前該庫的組織和構建如下：如何使用與babel一起編譯並在瀏覽器中使用Webpack導出的類

所有不同的組件都寫入他們自己的es6文件中。
了在瀏覽器中使用的組件transpiled到ES5文件（使用巴貝爾）
的transpiled文件，然後彙總到一個文件（使用的WebPack和巴貝爾裝載機）

如何訪問在瀏覽器中的組件中定義的各種類？（即如何獲得相當於var Client = require("client");的作用？）

P.S. - 我正在使用Gulp來管理所有這些，所以特別讚賞包括吞嚥解決方案在內的答案。

來源

2016-05-29 Huhwha

我希望，我明白你的意思，但是你想要做的是基本上在瀏覽器中打開你的開發工具並輸入client.myFunction()，對不對？

如果是這樣，您需要將庫client附加到全局名稱空間或窗口對象。這需要在您的主入口點文件中發生，其中所有其他子模塊都已導入。

例（client.js）

import {myFunction} from './functions'; 
import {myConstant} from './constants'; 

const Client = { 
    myFunction, // or: myFunction: myFunction (if you do not use ES7) 
    myConstant 
}; 

window.Client = Client; // or global.Client = Client;

現在你將包括通過腳本代碼的HTML網頁腳本捆綁，應該能夠調用window.Client.myFunction()，即Client.myFunction()在瀏覽器中或在網頁上。

是嗎，你在找什麼？讓我知道！

來源

2016-05-30 19:13:28

感謝您的評論，但這不完全是我遇到的問題。我試圖創建一些在Node和瀏覽器上工作的模塊（所以我不能在代碼中引用窗口對象，因爲它沒有在Node中定義）。我可以把所有東西打包並用webpack進行傳輸，但是一旦我做了，就無法引用我的類（我知道）。 – Huhwha

所以你正在尋找你的模塊的同構實現。在這種情況下，您需要爲模塊定義不同的入口點：一個用於節點，一個用於瀏覽器。 https://github.com/matthew-andrews/isomorphic-fetch/blob/master/package.json 例如，您可以看到瀏覽器屬性和isomorphic-fetch的package.json中的main屬性，例如 –

如何使用與babel一起編譯並在瀏覽器中使用Webpack導出的類

回答

相關問題