有没有办法使用 webpack 将 cdn 文件与 reactjs 一起使用？答案

【问题标题】：Is there a way to use cdn files with reactjs using webpack?有没有办法使用 webpack 将 cdn 文件与 reactjs 一起使用？
【发布时间】：2017-09-24 21:22:34
【问题描述】：

我无法在 reactjs 中使用 npm 配置 pusher 和 fetch。另外，有没有办法在你的 react 代码中使用 cdn？

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以使用 react-async-script-loader 作为高阶组件：https://github.com/leozdgao/react-async-script-loader

只需通过 npm 安装即可：

npm install --save react-async-script-loader

然后导入它并使用 scriptLoader 扩展需要 cdn javascripts 的组件，为其提供您希望包含在组件中的 url。

import scriptLoader from 'react-async-script-loader';

// Your component code:
class YourComponent extends React.Component {
  render() {
    return <p>{
      this.props.isScriptLoadSucceed ? 'Scripts loaded.' : 'Loading...'
    }</p>;
  }
}

export default scriptLoader([
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js',
  'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'
])(YourComponent);

这样，文件只会加载到您真正需要的地方。加载后，它们不会再次被包含（如果您更新组件）。

如果您喜欢装饰器 (ES7) 语法而不是 HOC 实现，它也可以工作，这在项目 README 中有记录。

【讨论】：

我的类已经扩展了 React.Component。那么如何在同一个类中扩展 scriptloader？我认为它不支持多重继承
HOC 不是通常的类继承，所以即使你是从 React.Component 扩展的，你也可以使用它。有关此模式的更多信息，请参见此处：stackoverflow.com/documentation/reactjs/9819/…。注意“export default scriptLoader”中没有extends，更多的是一个函数调用让YourComponent类通过。
如果你能写一个短代码sn-p那将是很大的帮助。我被卡住了
我更新了答案中的代码。请查看github.com/leozdgao/react-async-script-loader，还有一个例子。

【解决方案2】：

最后我想出了一个非常简单的答案

安装 npm pusher-js、es6-promise 和 isomorphic-fetch 并将其导入为

var Pusher=require('pusher-js');
var fetch=require('isomorphic-fetch');
require('es6-promise').polyfill();

【讨论】：

如何将其用于 CDN 链接（库）？