我正在使用 jwpalyer 制作 VideoPlayer 反应组件,并且使用 webpack es6 来加载模块
webpack 支持 npm 模块加载 & jwplayer 没有 npm
所以我尝试使用 es6 import 包含 jwplayer.js 但它给了我错误
ReferenceError:窗口未定义
所以任何人都可以帮助我使用 webpack 正确设置 jwplayer
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;
我认为这就是你需要做的:
- 将 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'
and require('jwplayer')
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)