在react组件中使用webpack (react-starter-kit)实现jwplayer的正确方法
在react组件中使用webpack (react-starter-kit)实现jwplayer的正确方法
提问于 2016-01-08 20:32:04
我正在用jwpalyer制作VideoPlayer react组件，我正在使用webpack es6加载模块，webpack支持npm模块加载& jwplayer没有npm。
因此，我尝试使用es6导入来包含jwplayer.js，但它给出了错误ReferenceError:窗口未定义
因此，任何人都可以帮助我正确设置jwplayer与webpack
import React, { PropTypes, Component } from 'react';
import $ from 'jquery';
import Player from "./lib/jwplayer/jwplayer.js";
import styles from './VideoPayer.css';
import withStyles from '../../decorators/withStyles';
import Link from '../Link';
@withStyles(styles)
class VideoPlayer extends Component {
static propTypes = {
className: PropTypes.string,
};
static defaultProps = {
file: '',
image: ''
};
constructor(props) {
super(props);
this.playerElement = document.getElementById('my-player');
}
componentDidMount() {
if(this.props.file) {
this.setupPlayer();
}
}
componentDidUpdate() {
if(this.props.file) {
this.setupPlayer();
}
}
componentWillUnmount() {
Player().remove(this.playerElement);
}
setupPlayer() {
if(Player(this.playerElement)) {
Player(this.playerElement).remove();
}
Player(this.playerElement).setup({
flashplayer: require('./lib/player/jwplayer.flash.swf'),
file: this.props.file,
image: this.props.image,
width: '100%',
height: '100%',
});
}
render() {
return (
<div>
<div id="my-player" className="video-player"></div>
</div>
)
}
}
export default VideoPlayer;回答 2
Stack Overflow用户
发布于 2016-01-12 13:27:31
我认为这就是你需要做的：
- 将window定义为捆绑包的外部，这样在其他库中对它的引用就不会成为全局变量
jwplayer，这样您就可以附加密钥 - (可选)为jwplayer库创建别名
我已经测试过了，这个配置对我来说是有效的，但只在客户端上，而不是在服务器上，或者同构/通用。
webpack.config.js：
// Declare window as external
externals: {
'window': 'Window'
},
// Create an easy binding so we can just import or require 'jwplayer'
resolve: {
alias: {
'jwplayer':'../path/to/jwplayer.js'
}
},
// Expose jwplayer as a global variable so we can attach the key, etc.
module: {
loaders: [
{ test: /jwplayer.js$/, loader: 'expose?jwplayer' }
]
}然后，您可以使用import jwplayer from 'jwplayer'和require('jwplayer')。
Stack Overflow用户
发布于 2017-05-05 22:16:51
可能是一个老问题，但我最近找到了一个相对稳定的解决方案。
我将jwplayer包含在一个名为app/thirdparty/jwplayer-7.7.4的文件夹中。接下来，将它添加到babel加载器的exclude中，这样它就不会被解析。
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /(node_modules|thirdparty)/,
}然后我使用dynamic import来引导我的组件并加载jwplayer。
async function bootstrap(Component: React.Element<*>) {
const target = document.getElementById('root');
const { render } = await import('react-dom');
render(<Component />, target);
}
Promise.all([
import('app/components/Root'),
import('app/thirdparty/jwplayer-7.7.4/jwplayer.js'),
]).then(([ { default: Root } ]) => {
window.jwplayer.key = "<your key>";
bootstrap(Root);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34677234
复制相关文章
相似问题
腾讯云开发者
