使用 webpack 和 jspm 以及外部依赖项

Using webpack and jspm and external dependencies

本文关键字：外部 依赖 webpack jspm 使用      更新时间：2023-09-26

在我的网站的每个页面上，我想包含来自 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 和外部库(，我也尝试了 browserify-shim，但它就是不想工作;它只是一直说 react 没有定义。该捆绑包仅在我将 React、React DOM 和 React Bootstrap 以及 react-tinymce 和我的组件捆绑在一起时才有效。

当我试图摆脱浏览器化时，有人可以为 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>

谢谢！

这就是在我的构建中对我有用的东西。来自 webpack.config.js：

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

它以捆绑形式生成以下内容.js：

/* 1 */
/***/ function(module, exports) {
    module.exports = window.React;
/***/ },

和：

/* 88 */
/***/ function(module, exports) {
    module.exports = window.ReactDOM;
/***/ }
相关文章：