javascript - 使用 browserify 需要外部库时出错(this = 未定义)

Question

我正在尝试请求库 Chart.js使用 Browserify(说实话，它是一个带有 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 执行时，它是未定义的，这就是 chart.js 的原因失败。

我是 browserify/node/gulp 的新手，但我尝试了不同的东西，例如:

• Browserify-shim -> 相同的错误
• 以不同的方式请求脚本，例如尝试在对象内请求它 { } ，尝试做 var whatever = new require('./vendors/chart')但就像一只被斩首的鸡想要上厕所一样惨遭失败。

我猜我必须以某种方式将该脚本附加到一个对象或其他东西上 this执行时不会是未定义的，但我找不到方法。

Answer 1

我已经解决了。问题是一个名为 Babelify 的 browserify 转换。我仍然不知道 Babel 为什么要这样做，但无论如何我不需要它，所以我只是禁用它，仅此而已。只是将其发布在这里，以防其他人发生这种情况。