使用React和Webpack編寫嵌入式Javascript插件

我希望能夠將我的React應用程序與Webpack捆綁在一起，以便將放入CDN的分佈式副本發送，調用並用一組與客戶端相關的配置進行初始化。使用React和Webpack編寫嵌入式Javascript插件

閱讀this和this後，我設置了我的WebPack項文件如下：

// ... React requires etc. 

(() => { 
    this.MyApp = (config) => { 
    // some constructor code here 
    } 

    MyApp.prototype.init =() => { 
    ReactDOM.render(<MyReactApp config={MyApp.config} />, someSelector); 
    } 
})();

的想法是，在我的客戶，我可以做類似如下：

<script src="./bundle.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    MyApp.init({ 
    some: "config" 
    }); 
</script>

而我的MyApp#init函數會在客戶端的某個容器中呈現我的React應用程序。

我以正確的方式思考這個問題嗎？有沒有更簡單或更有效的方法來解決這個問題？

我的錯誤是Uncaught TypeError: Cannot set property 'MyApp' of undefined，因爲this裏面的IIFE是undefined。我真的很想了解爲什麼會發生這種情況以及如何解決問題的建議。

在此先感謝！

來源

2016-05-15 mattsch

讓我有種找到了解決這一點，因爲描述here

如果我改變我的webpack.config.js文件下列屬性添加到output對象，即

var config = { 
    // ... 
    output: { 
    // ... 
    library: 'MyApp', 
    libraryTarget: 'umd', 
    umdNamedDefine: true, 
    } 
}

這指定的文件我與UMD模塊綁定的webpack，所以如果我有一個在該文件中的功能，並將其導出...

export const init = (config) => { 
    ReactDOM.render(<MyReactApp config={config} />, someSelector); 
}

然後，我可以在我的客戶端執行以下操作。

<script src="./bundle.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    MyApp.init({ 
    some: "config" 
    }); 
</script>

而我的React應用程序呈現。

如果有人認爲這是一個愚蠢的做法，我很樂意聽到它！

來源

2016-05-16 21:31:21 mattsch

嗨，mattsch。這是一個很好的解決方案。我唯一的問題是如何檢查小部件是否集成在客戶的網站上。所以說，有一個應用程序，並建立一個小部件。我會在應用程序中檢查某個用戶（通過id或主機名）在他們的網站上嵌入了一個小部件。 –

@To_wave我猜想作爲'init'函數的一部分，你可以用客戶端的詳細信息將請求發送回服務器 - 這可能有效嗎？ – mattsch

我曾考慮過這個問題，但該解決方案不允許我檢查客戶是否從他們的網站中刪除了一個小部件。因此，回調我可以唯一的檢查是小部件集成，但不能刪除 –

你的課堂周圍有圍欄。

MyApp需要導出或附加到全局窗口對象，然後才能像這樣調用它。

在你的情況下，你實際上並沒有調用MyApp.init（），而是調用window.MyApp.init（），但是全局對象窗口沒有附加MyApp對象。

// ... Simple attaching MyApp to the window (as a function) 
window.MyApp = (config) => { 
    ... 
} 

// ... Using class and export 
class MyApp { 
    constructor(config){...} 
} 
export default MyApp 

// or simply attach to the window 
window.MyApp = MyApp

我寧願使用導出來創建類和導出模塊。然後創建另一個文件只是爲了附加到窗口。因爲將類添加到窗口中並不被認爲是最佳實踐。

// Import module and attach it to the window 
import MyApp from '.my-app' 
window.MyApp = MyApp

你可以尋找出口模塊，UMD，AMD的高級選項...

來源

2016-05-16 21:49:47

使用React和Webpack編寫嵌入式Javascript插件

回答

相關問題