reactjs – 使用webpack在react组件中实现jwplayer的正确方法(re

发布时间：2020-12-15 20:12:36 所属栏目：百科来源：网络整理

导读：我正在使用jwpalyer制作VideoPlayer反应组件,我正在使用webpack es6来加载模块 webpack支持npm模块加载 jwplayer没有npm 所以我试图使用es6 import包含jwplayer.js,但它给了我错误 ReferenceError：未定义窗口所以任何人都可以帮我正确设置webpack的jwplaye

我正在使用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;

解决方法

我想这就是你需要做的：

>将窗口定义为包外部,以便不破坏其他库中对它的引用.
>公开全局变量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' }
    ]
}

然后你可以从’jwplayer’和require(‘jwplayer’)导入jwplayer.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!