如何重写此 ES6 代码以与 Safari 兼容？

Question

我有一些使用 ES6 箭头函数的 Vue.js 代码。然而，显然 Safari（在一种情况下它出现在 OSX 上的 Chrome）不喜欢这个。代码如下：

fetchItemCount: function(){
                this.$http.get('/api/fetchItemCount')
                    .then(response => {
                        this.itemCount = response.data;
                    })
                    .catch(response => {

                    });
            },

我有几个使用箭头语法的函数。我怎样才能重写它们以避免使用它但仍然执行相同的工作？

我曾尝试使用 Babel 转译代码，但这似乎会引入错误（无法设置未定义或空引用的属性 'Vue'）

Answer 1

正如其他人所指出的那样，使用诸如 babel 之类的转译器可以解决问题，但由于这并不总是可行的，因此这里是没有箭头函数的情况。

fetchItemCount: function(){
    var that = this;
    this.$http.get('/api/fetchItemCount')
        .then(function(response) {
            that.itemCount = response.data;
        })
        .catch(function(response) {

        });
},

箭头函数给你的本质上是一个函数，它保持this 范围的声明它，所以要重现我们只需将外部范围内的this 分配给一个新变量并在内部使用它功能。

正如 LinusBorg 在 cmets 中指出的那样，当使用 vue-resource 时，您不必执行 var that = this; 部分，因为库会在回调中为您更改 this。这是特定于 vue-resource 资源的，而不是它通常如何使用 Promise 完成的，因此它通常不适用于其他库。

Answer 2

实际上你需要重写你的代码，至少不需要手动。您可以做的就是继续编写您提供的示例代码并使用转译器（例如 Babel）将您的 ES6 代码重写为 ES5。

您可以使用Gulp 或Grunt 等任务管理器使其对自己几乎透明。

如果您需要了解如何使用任务管理器，请查看this article。它为您提供了有关如何使用 Gulp 的简短而集中的概述。

读完之后，您会发现通过一些 Gulp 脚本自动监视文件并简化其内容是多么容易。因此，只需使用 Gulp Babel plugin 自动为您执行此转换任务。

例如：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('transpile', () => {
    return gulp.src('src/MY-VUE-SOURCE.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('SOME_DESTINATION'));
});

gulp.task('watch', function() {
    gulp.watch(['src/**/*'], ['transpile']);
});

运行 gulp watch 后，它会一直运行直到您手动停止它，您对 MY-VUE-SOURCE.js 所做的任何更改都将自动为您转译。