Question

我无法在reactjs中使用npm配置pusher和fetch。还有什么方法可以在你的反应代码中使用cdn？

Answer 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);

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

如果您喜欢它，那么除非您喜欢HOC实现，否则

Decorator（ES7）语法也可以使用，这在项目自述文件中有记录。

Answer 2

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

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

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

有没有办法使用webpack使用带有reactjs的cdn文件？

2 个答案: