使用 browserify 需要外部库时出错(this = undefined)
Error while requiring external library with browserify (this = undefined)
我正在尝试使用 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']);
});
Tbh 它与 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(this) 输出 window object/scope,但是当从 browserify 执行时,它是未定义的,这就是 chart.js
失败的原因。
我是 browserify/node/gulp 的新手,但我尝试了不同的东西,例如:
- Browserify-shim -> 同样的错误
- 以不同的方式要求脚本,比如试图在一个对象中要求它
{ }
,试图做一个 var whatever = new require('./vendors/chart')
但像一只试图去洗手间的被斩首的鸡一样悲惨地失败了。
我猜想我必须以某种方式将该脚本附加到一个对象或其他东西上,这样 this
在执行时不会未定义,但我找不到方法。
我已经解决了。问题是一个名为 Babelify 的 browserify 转换。我仍然不知道为什么 Babel 会那样做,但我并不需要它,所以我只是禁用它,仅此而已。只是张贴在这里以防其他人发生。
我正在尝试使用 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']);
});
Tbh 它与 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(this) 输出 window object/scope,但是当从 browserify 执行时,它是未定义的,这就是 chart.js
失败的原因。
我是 browserify/node/gulp 的新手,但我尝试了不同的东西,例如:
- Browserify-shim -> 同样的错误
- 以不同的方式要求脚本,比如试图在一个对象中要求它
{ }
,试图做一个var whatever = new require('./vendors/chart')
但像一只试图去洗手间的被斩首的鸡一样悲惨地失败了。
我猜想我必须以某种方式将该脚本附加到一个对象或其他东西上,这样 this
在执行时不会未定义,但我找不到方法。
我已经解决了。问题是一个名为 Babelify 的 browserify 转换。我仍然不知道为什么 Babel 会那样做,但我并不需要它,所以我只是禁用它,仅此而已。只是张贴在这里以防其他人发生。