使用webpack和jspm以及外部依賴關係

在我網站的每個頁面上，我想包括來自cdnjs.com的React，React DOM和React Bootstrap。我已經安裝了npm反應 - tinymce。我想要做的是編寫一個使用react-tinymce來顯示tinymce編輯器的組件;當它通過吞噬捆綁時，我只想在我的dist.js中捆綁react-tinymce和我的組件;我不想在dist.js中捆綁React，React DOM或React Bootstrap。使用webpack和jspm以及外部依賴關係

所以我嘗試了外部（Webpack and external libraries），我也嘗試了browserify-shim，但它只是不想工作;它只是一直說反應沒有被定義。如果我將React，React DOM和React Bootstrap與react-tinymce和我的組件捆綁在一起，該捆綁僅適用。

由於我試圖擺脫browserify，有人可以爲webpack和jspm提供示例配置來完成此操作嗎？基於谷歌搜索它很簡單，但與所有的JavaScript工具一樣，它從來沒有像你想的那麼簡單。我的組件很簡單：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactTinyMCE from 'react-tinymce'; 

Then I just try to display using <ReactTinyMCE>

謝謝！

來源

2016-02-01 Herman

發生在運行時錯誤或建造時間？運行時間爲 –

。它建立良好。我甚至檢查了這個包，它沒有包含反應，這很好，因爲我已經在browserify和browserify-shim中聲明瞭它作爲外部依賴。 – Herman

值得檢查的事情：（1）'window.React'是否在控制檯上產生任何東西？（2）CDN腳本是否包含在HTML源代碼中的捆綁腳本之前？（3）如果你檢查你的編譯代碼，你的React變量是否被賦值爲'window.React'？ –

這是在我的構建中爲我工作。從webpack.config.js：

externals: { 
    react: 'window.React', 
    'react-dom': 'window.ReactDOM' 
}

它產生以下的bundle.js：

/* 1 */ 
/***/ function(module, exports) { 

    module.exports = window.React; 

/***/ },

和：

/* 88 */ 
/***/ function(module, exports) { 

    module.exports = window.ReactDOM; 

/***/ }

來源

2016-02-01 23:06:31

我堅持使用webpack :)我一定在jspm上做錯了什麼，但是我不能讓它工作。謝謝！ – Herman

使用webpack和jspm以及外部依賴關係

回答

相關問題