Как добавить плагин в Aurelia - PullRequest
Новая
       73

Как добавить плагин в Aurelia

1 голос
/ 08 мая 2020

Я пытаюсь использовать волны. js в проекте Aurelia. Я не умею пользоваться вейсерфером. js. После сборки он сообщает, что элемент контейнера не найден. мое приложение. js выглядит так 

import * as wavesurfer from '../node_modules/wavesurfer/dist/wavesurfer.js';

export class App {
  wavesurferObj = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    scrollParent: true,
  });

  constructor() {
    wavesurferObj.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

    wavesurferObj.on(ready, function () {
      wavesurferObj.play();
    });
  }
}

и мой main. js выглядит так 

// regenerator-runtime is to support async/await syntax in ESNext.
// If you target latest browsers (have native support), or don't use async/await, you can remove regenerator-runtime.
import * as wavesurfer from '../node_modules/wavesurfer/dist/wavesurfer.js';
// import * as timeline from '../node_modules/wavesurfer/plugin/wavesurfer.timeline.js';
// import * as regions from '../node_modules/wavesurfer/plugin/wavesurfer.regions.js';
import 'regenerator-runtime/runtime';
import * as environment from '../config/environment.json';
import {
  PLATFORM
} from 'aurelia-pal';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  aurelia.use.plugin(PLATFORM.moduleName('wavesurfer'));
  // aurelia.use.plugin(PLATFORM.moduleName('timeline'));
  // aurelia.use.plugin(PLATFORM.moduleName('regions'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
и только секция сборки в Aurelia. json выглядит так 

  "build": {
    "options": {
      "server": "dev",
      "extractCss": "prod",
      "coverage": false
    },
    "bundles": [{
      "name": "vendor-bundle.js",
      "dependencies": [{
          "name": "wavesurfer",
          "path": "../node_modules/wavesurfer/dist",
          "main": "wavesurfer"
        },
        {
          "name": "wavesurfer.timeline",
          "path": "../node_modules/wavesurfer/plugin",
          "main": "wavesurfer.timeline",
          "deps": [
            "wavesurfer"
          ]
        },
        {
          "name": "wavesurfer.regions",
          "path": "../node_modules/wavesurfer/plugin",
          "main": "wavesurfer.regions",
          "deps": [
            "wavesurfer"
          ]
        }
      ]
    }]
  },

Вот ошибка:

WaveSurfer не определен.

Кто-нибудь может указать, как правильно добавить этот плагин, пожалуйста .

Заранее большое спасибо.

1 Ответ

1 голос
/ 09 мая 2020

Не глядя на весь ваш реальный код, я предполагаю, что у вас есть как минимум 3 ошибки:

  1. Первая использует другие имена переменных: волновой серфер импортируется как wavesurfer, но способ его использования - WaveSurfer, обратите внимание на случай.

  2. Использование прямого пути к файлу dist в пакете node_modules: 

import * as wavesurfer from '../node_modules/wavesurfer/dist/wavesurfer.js';

Должно быть: 

import * as wavesurfer from 'wavesurfer';
3-й нацелен на элемент через строку селектора CSS #waveform. Если он не будет готов к моменту создания экземпляра класса App, он не будет работать должным образом. Где #waveform? из документа? с app.html? Если это из документа, это нормально, но если это app.html, вам нужно будет изменить этот код на что-то вроде этого 
<template>
  ....
  <div ref="waveformElement"></div>
</template>

И в коде вашего приложения: 

import * as WaveSurfer from 'wavesurfer';

export class App {

  bind() {
    this.wavesurferObj = WaveSurfer.create({
      container: this.waveformElement,
      waveColor: 'violet',
      progressColor: 'purple',
      scrollParent: true,
    });

    this.wavesurferObj.load( 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

    this.wavesurferObj.on(ready, () => {
      this.wavesurferObj.play();
    });
  }
}
...