外部库变量未定义

Question

我试图包括一个javascript库(WaveSurfer)到我的Angular应用程序(使用Mean.io)。问题是每次我运行grunt:

时都会出现一个警告。

packagestrackspublicservicestracks.js:'WaveSurfer'未定义

下面是我的不同文件的代码:

公共/控制器/tracks.js

angular.module('mean').controller('PlayerController', ['$scope', 'Global', 'Tracks','myWaveSurfer',
function($scope, Global,Tracks, myWaveSurfer) {
    $scope.global = Global;
    //Player WaveSurfer
    var wavesurfer = Object.create(myWaveSurfer);
    wavesurfer.load('music.mp3');

公共/服务/tracks.js

angular.module('mean.tracks').factory('myWaveSurfer', function() {
    return WaveSurfer; /*Warning here*/
});

wavesurfer.min.js的内容如下:

var WaveSurfer = {
   defaultParams: {...}
   init: function(params) {...}
   ...
}

我正确地将库包含到config/assets.json中，因此可以加载库。我可以在Chrome控制台上看到它:

<script type="text/javascript" src="/bower_components/wavesurfer.js/build/wavesurfer.min.js"></script>

它只适用于grunt --force，但有没有一个解决方案，包括正确的这个库没有警告?

Answer 1

我假设您在Node环境中。

把这个添加到全局变量中:

GLOBAL.WaveSurfer = {};

或者你可以用require把它拉进来

GLOBAL.WaveSurfer = require('...');

如果您使用require，请确保库module.exports为全局对象。