javascript - 使用 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、React DOM 和 React Bootstrap 与 React-tinymce 和我的组件捆绑在一起时，该 bundle 才有效。

当我试图摆脱 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;

/***/ }