8

我正在用 jwpalyer 制作 VideoPlayer 反应组件，我正在使用 webpack es6 加载模块 webpack 支持 npm 模块加载 & jwplayer 没有 npm

所以我尝试使用 es6 import 包含 jwplayer.js 但它给了我错误 ReferenceError: window is not defined

所以任何人都可以帮助我用 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;
4

2 回答 2

6

我认为这是你需要做的：

  1. 将 window 定义为 bundle 的外部，以便其他库中对它的引用不会被破坏。
  2. 公开一个全局变量jwplayer，以便您可以附加您的密钥
  3. （可选）为您的 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')。

于 2016-01-12T05:27:31.217 回答
1

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

我将 jwplayer 包含在一个名为app/thirdparty/jwplayer-7.7.4. 接下来，将其添加到excludebabel loader 中，使其不被解析。

{
  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);
});
于 2017-05-05T14:16:50.943 回答