使用Webpack在React组件中实现jwplayer的正确方法(react-starter-kit)

本文介绍了使用Webpack在React组件中实现jwplayer的正确方法(react-starter-kit)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使VideoPlayer与jwpalyer反应组件，并且我正在使用webpack es6加载模块webpack支持npm模块加载和jwplayer没有npm

i am making VideoPlayer react component with jwpalyer and i am using webpack es6 for loading modulewebpack support npm module loading & there is no npm for jwplayer

所以我正在尝试使用es6 import包含jwplayer.js，但这给了我错误ReferenceError:未定义窗口

so am trying to include jwplayer.js using es6 import but it giving me errorReferenceError: window is not defined

所以任何人都可以帮助我通过webpack正确设置jwplayer

so any one can help me to properly setup jwplayer with 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;

推荐答案

我认为这是您需要做的:

I think this is what you need to do:

将窗口定义为包的外部，这样就不会破坏其他库中对该窗口的引用.
公开全局变量jwplayer，以便您可以附加密钥
(可选)为您的jwplayer库创建一个别名

Define window as external to the bundle so that references to it in other libraries are not mangled.
Expose a global variable jwplayer so that you can attach your key
(Optional) Create an alias to your jwplayer library

我已经对其进行了测试，并且此配置对我有效，但仅在客户端而不在服务器上或同构/通用.

I've tested it and this configuration works for me, but only on the client and not on the server or isomorphically/universally.

// 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').

这篇关于使用Webpack在React组件中实现jwplayer的正确方法(react-starter-kit)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Starter