使用browserify需要外部库时出错(this = undefined)

时间:2015-08-29 14:51:50

标签: javascript node.js requirejs gulp browserify

我正在尝试使用Browserify库Chart.js(使用gulp,browserify和其他一些我几乎不知道它是如何工作的开发环境):

'use strict';
var angular = require('angular');
require('angular-ui-router');
require('./templates');
require('./controllers/_index');
require('./services/_index');
require('./directives/_index');
window.gauge = require('./vendors/gauge');

//this is what i'm trying to require
window.chartjs = require('./vendors/chart');

angular.element(document).ready(function() {
  var requires = [
    'ui.router',
    'templates',
    'app.controllers',
    'app.services',
    'app.directives'
  ];
  window.app = angular.module('app', requires);
  angular.module('app').constant('AppSettings', require('./constants'));
  angular.module('app').config(require('./routes'));
  angular.module('app').config(require('./PostFix'));
  angular.module('app').run(require('./on_run'));
  angular.bootstrap(document, ['app']);
});

它确实适用于window.gauge = require('./vendors/gauge');,但当我需要vendors/chart.js时,它会抛出此错误:

undefined                                                     // chart.js:4 
Uncaught TypeError: Cannot read property 'Chart' of undefined // chart.js:4 

以下是chart.js文件中的那些行:

(function(){

 "use strict";

  console.log(this); <------ outputs the "undefined"

  var root = this,
    previous = root.Chart; <----- fails, as "root" doesn't exist

这很奇怪,因为当我使用chart.js添加<script></script>时,console.log(this)输出窗口对象/范围,但是当从browserify执行时,它是未定义的,这就是为什么{{1失败。

我是浏览器/ node / gulp的新手,但我尝试了不同的东西,例如:

  • Browserify-shim - &gt;同样的错误
  • 以不同的方式要求脚本,例如在对象chart.js内尝试要求它,尝试做{ }但是却像斩首的鸡试图去洗手间一样失败。

我猜不知道我不得不将该脚本附加到一个对象或其他东西上,以便在执行时var whatever = new require('./vendors/chart')不会被定义,但我找不到方法。

1 个答案:

答案 0 :(得分:0)

我已经解决了。问题是名为Babelify的浏览器变换。我仍然不知道为什么Babel会这样做,但我还是不需要它,所以我只是禁用它,就是这样。只需将其发布在此处以防万一发生在其他人身上。