如何在Aurelia中添加插件

Question

我试图在一个Aurelia项目中使用wavesurfer.js。我无法使用wavesurfer.js。在构建之后，它说Container Element not found.我的app.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没有定义。

谁能说明一下，请问添加这个插件的正确方法是什么。

先谢谢大家了。

Answer 1

如果不看你所有的实际代码，我猜你至少有三个错误。

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();
    });
  }
}