Reactjs 使用Web包（react starter kit）在react组件中实现jwplayer的正确方法

我正在用jwpalyer制作VideoPlayer react组件，并使用WebpackES6加载模块 网页包支持npm模块加载&jwplayer没有npm

因此，我试图使用es6导入包含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;

import React，{PropTypes，Component}来自'React'；
从“jquery”导入美元；
从“/lib/jwplayer/jwplayer.js”导入播放器；
从“/VideoPayer.css”导入样式；
从“../../decorators/with样式”导入with样式；
从“../Link”导入链接；
@样式（样式）
类VideoPlayer扩展组件{
静态类型={
类名：PropTypes.string，
};
静态defaultProps={
文件：“”，
图像：“”
};
建造师（道具）{
超级（道具）；
this.playerElement=document.getElementById（'my-player'）；
}
componentDidMount（）{
if（this.props.file）{
这个.setupPlayer（）；
}
}
componentDidUpdate（）{
if（this.props.file）{
这个.setupPlayer（）；
}
}
组件将卸载（）{
Player（）.移除（此.playerElement）；
}
setupPlayer（）{
if（玩家（此玩家元素））{
Player（this.playerElement）.remove（）；
}
播放器（此.playerElement）。设置({
flashplayer:require（'./lib/player/jwplayer.flash.swf'），
文件：this.props.file，
图像：这个.props.image，
宽度：“100%”，
高度：“100%”，
});
}
render（）{
返回(
)
}
}
导出默认视频播放器；

我认为这就是你需要做的：

将窗口定义为捆绑包的外部，以便不会损坏其他库中对它的引用

公开一个全局变量

jwplayer

，以便可以附加密钥

（可选）为jwplayer库创建别名

我已经对它进行了测试，这个配置对我来说是有效的，但只在客户端上，而不是在服务器上，或者同构/通用

webpack.config.js：

//将窗口声明为外部
外部：{
“窗口”：“窗口”
},
//创建一个简单的绑定，这样我们就可以只导入或需要“jwplayer”
决心：{
别名：{
“jwplayer”：“../path/to/jwplayer.js”
}
},
//将jwplayer公开为全局变量，以便我们可以附加密钥等。
模块：{
装载机：[
{test:/jwplayer.js$/，加载程序：'expose？jwplayer'}
]
}

---

然后您可以

从“jwplayer”导入jwplayer

和

require（'jwplayer'）

可能是一个老问题，但我最近找到了一个相对稳定的解决方案

我将jwplayer包含在名为

app/thirdparty/jwplayer-7.7.4

的文件夹中。接下来，将其添加到babel加载程序中的

排除

，这样它就不会被解析

{
  test: /\.jsx?$/,
  use: 'babel-loader',
  exclude: /(node_modules|thirdparty)/,
}

然后我使用以引导我的组件并加载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);
});

异步函数引导（组件：React.Element）{ const target=document.getElementById（'root'）； const{render}=await import（'react-dom'）； 渲染（，目标）； } 我保证([ 导入（'app/components/Root'）， 导入（'app/thirdparty/jwplayer-7.7.4/jwplayer.js'）， ]).then（（[{default:Root}]）=>{ window.jwplayer.key=“”； 引导（根）； });

---

我正在使用默认值configuration@AnilGupta我已经更新了我的答案，请让我知道这是否适合您。@AnilGupta请记住，这只针对客户端而不是服务器端进行了测试。我知道Enter启动工具包是同构的，所以这是你需要考虑的。我仍然有错误[GIST]（）错误：找不到模块“JWPPLAYER”，请看我的主旨并纠正我，感谢有人使用JWPoPE与WebPACK的一个重复例子吗？