Правильный способ реализации jwplayer в реагирующем компоненте с использованием веб-пакета (react-starter-kit)

я создаю компонент реакции VideoPlayer с jwpalyer, и я использую webpack es6 для загрузки модуля, веб-пакет поддерживает загрузку модуля npm, и нет npm для jwplayer

поэтому я пытаюсь включить jwplayer.js с помощью импорта es6, но это дает мне ошибку ReferenceError: окно не определено

так что любой может помочь мне правильно настроить 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;

webpack reactjs jwplayer es6-module-loader jwplayer6
person Anil Gupta    schedule 08.01.2016    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я думаю, это то, что вам нужно сделать:

  1. Определите окно как внешнее по отношению к пакету, чтобы ссылки на него в других библиотеках не искажались.
  2. Предоставьте глобальную переменную jwplayer, чтобы вы могли прикрепить свой ключ
  3. (Необязательно) Создайте псевдоним для вашей библиотеки jwplayer.

Я протестировал это, и эта конфигурация работает для меня, но только на клиенте, а не на сервере или изоморфно/универсально.

веб-пакет.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').

person Ngz    schedule 12.01.2016
comment
я использую react-stater-kit конфигурация по умолчанию - person Anil Gupta; 12.01.2016
comment
@AnilGupta Я обновил свой ответ, дайте мне знать, если это сработает для вас. - person Ngz; 12.01.2016
comment
@AnilGupta Имейте в виду, что это было протестировано только для клиента, а не для сервера. Я знаю, что react-starter-kit изоморфен, поэтому вам нужно это учитывать. - person Ngz; 12.01.2016
comment
я все еще получаю сообщение об ошибке [суть] (gist.github.com/anilGupta/31888417a0eb0fdad7bc) Ошибка : Не удается найти модуль «jwplayer», пожалуйста, посмотрите на мою суть и исправьте меня, спасибо - person Anil Gupta; 12.01.2016
comment
Похоже, этот псевдоним не разрешается. Что произойдет, если вы попытаетесь сделать: import jwplayer from '../src/components/VideoPage/lib/jwplayer.js' - person Ngz; 14.01.2016
comment
Снова это дает мне ошибку ReferenceError: окно не определено - person Anil Gupta; 14.01.2016
comment
Вы уверены, что он не выполняется на сервере, где окно не определено глобально? - person Ngz; 15.01.2016
comment
У меня это не сработало, я продолжаю получать сообщение об ошибке jwplayer.default is not a function, я использую ES6 и веб-пакет, поэтому я предполагаю, что он пытается получить экспорт по умолчанию из jwplayer.js, пожалуйста, что можно исправить? - person Daniel Barde; 27.09.2016
comment
@DanielBarde Похоже, у вас проблемы с преобразованием AMD/CommonJS в модуль ES6. В этом примере я также использовал ES6. Возможно, вы захотите взглянуть на то, как файл jwplayer.js, на который вы ссылаетесь, экспортирует себя. - person Ngz; 29.09.2016
comment
у кого-нибудь есть пример репо использования jwplayer с webpack? - person Sibelius Seraphini; 16.11.2016

arrow_upward
1
arrow_downward

Вероятно, старый вопрос, но недавно я нашел относительно стабильное решение.

Я включаю jwplayer в папку с именем app/thirdparty/jwplayer-7.7.4. Затем добавьте его в exclude в загрузчике 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);
});
person corvid    schedule 05.05.2017