Question

我有一个使用gulp和babel的构建过程，但是babel在我的应用程序中向我扔了这个奇怪的重复函数名称。

Chrome中的错误是：ReferenceError: changeScale is not defined

原始代码：

changeScale = function(value) {
    if (value >= 1000000) return value/1000000 + 'M';

    if (value >= 1000) return value/1000 + 'k';

    return value;
};

gulp和babel之后的代码：

changeScale = function changeScale(value) {
    if (value >= 1000000) return value / 1000000 + 'M';

    if (value >= 1000) return value / 1000 + 'k';

    return value;
};

请注意重复的函数名称？

我的大口任务：

var gulp         = require('gulp');
var gutil        = require('gulp-util');
var bower        = require('bower');
var babel        = require("gulp-babel");
var concat       = require('gulp-concat');

gulp.task('js', function() {
  gulp.src('./www/app/**/*.js')
  .pipe(babel())
  .pipe(concat('app.js')).on('error', errorHandler)
  .pipe(gulp.dest('./www/js/'));
});

我的.babelrc文件：{ "presets": ["es2015"] }

Answer 1

您的代码正在为名为changeScale的变量分配匿名函数，但如果没有var关键字，则表示您正在创建全局变量。 Babel的输出可能设置为使用ES5严格模式，该模式不允许在没有var关键字的情况下定义全局变量，因此Chrome正在抛出ReferenceError，因为该变量从未被定义过。

您可以通过将代码更改为var changeScale =，或者使用变量更改为使用函数声明function changeScale() {}来解决此问题。两者都可以正常工作，你可以阅读差异here。

顺便说一句，你在这里看到的重复函数名称不是问题 - 将命名函数分配给变量是完全有效的，并且它可以使调试代码变得更容易，因为调试器将能够显示该名称，而不是仅将其列为匿名函数。

Answer 2

您可以将babelrc浏览器列表的IE版本设置为11，可以对此进行更改。像["> 5%", "last 2 versions", "IE 11"]

Babel复制了函数名称

2 个答案: