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

问题描述:

我无法在reactjs中配置推送器和使用npm进行获取。另外,有没有办法在你的反应代码中使用cdn?有没有办法使用webpack使用reactjs的cdn文件?

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

安装NPM推-JS,ES6-承诺,同构取并导入它作为

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

可以使用反应 - 异步脚本加载器作为一个高阶组件这个: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中有记录。

+0

我的类已经扩展React.Component.So如何我是否将scriptloader扩展到同一个类中?我不认为它支持多重继承 –

+0

HOC不是通常的类继承,所以即使从React.Component继承,也可以使用它。请参阅此处了解有关此模式的更多信息:http://*.com/documentation/reactjs/9819/higher-order-components。请注意,“export default scriptLoader”中没有扩展,它更像是一个传递YourComponent类的函数调用。 –

+0

如果你可以写一个简短的代码片断它将失去很大的帮助。我卡住了 –