使用 webpack 和 jspm 以及外部依赖

Question

在我网站的每个页面上，我都想包含来自 cdnjs.com 的 React、React DOM 和 React Bootstrap。我已经 npm 安装了 react-tinymce。我要做的是编写一个组件，使用 react-tinymce 来显示一个 tinymce 编辑器；当它通过 gulp 捆绑时，我只想将 react-tinymce 和我的组件捆绑在我的 dist.js 中；我不希望 React、React DOM 和 React Bootstrap 捆绑在 dist.js 中。

所以我尝试了外部 (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>

谢谢！

Answer 1

这在我的构建中对我有用。来自 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;

/***/ }