使用browserify请求外部库时出错(this = undefined)

Error while requiring external library with browserify (this = undefined)

本文关键字:this undefined 出错 browserify 请求 外部 使用      更新时间:2023-09-26

我试图要求图书馆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

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

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

  • Browserify-shim ->同样的错误
  • 以不同的方式要求脚本,比如试图在一个对象{ }中要求它,试图做一个var whatever = new require('./vendors/chart'),但像一只被斩首的鸡试图去洗手间一样悲惨地失败了。

我猜,不知何故,我必须将该脚本附加到一个对象或一些东西,所以this不会在执行时未定义,但我没能找到方法。

我已经解决了。问题是一个叫做Babelify的浏览器化转换。我仍然不知道为什么Babel会这样做,但我不需要它,所以我就把它禁用了,就是这样。只是把它贴在这里,以防别人也遇到这种情况。