使用 webpack 和 jspm 以及外部依赖

Question

在我网站的每个页面上，我想包括 React、React DOM 和来自 cdnjs.com 的 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;

/***/ }

使用 webpack 和 jspm 以及外部依赖

Using webpack and jspm and external dependencies

javascript

reactjs

webpack

jspm