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

我有一些使用ES6箭头函数的Vue.js代码。然而，显然Safari（在一种情况下，它在OSX上出现Chrome）不喜欢这样。这里是代码：如何将此ES6代码重写为与Safari兼容？

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

        }); 
      },

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

我一直在使用通天transpile代码尝试，但似乎引入错误（无法设置属性未定义或空引用“Vue公司”）

来源

2016-07-22 flurpleplurple

您可以使用https://babeljs.io/将您的代码转换为ES5 –

Safari（10）的下一个版本也将支持箭头功能和ES6的所有其他部分。不过，旧版本的浏览器仍然需要ES5代码，可以使用babel等转换程序进行转换（在上面的注释中提到）。 – nils

请参阅我的编辑 - 我曾尝试使用Babel，但它引入了错误。 – flurpleplurple

正如其他人所使用transpiler如巴贝尔会做说明技巧，但因为这并不总是可能的，这里是没有箭头功能的样子。

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

     }); 
},

什么箭头的功能给你基本上是保持它的声明，其中的this范围功能，从而重现，我们只需要在外部范围分配this到一个新的变量，并使用里面的功能。

由于LinusBorg的评论，指出使用vue-resource时，你不必做var that = this;部分，因为该库将在回调改变this为你的外部范围。这是专门针对vue-resource资源，而不是通常如何与承诺完成，所以它通常不会与其他库一起工作。

来源

2016-07-22 13:49:01

这正是我一直在寻找的，谢谢！ – flurpleplurple

虽然你的解释通常是正确的，但在使用vue-resource时，'that = this' closure并不是必须的，因为它将回调函数绑定到了vm的范围。 –

很高兴知道，尽管我会按照它的方式继续回答，因为它不是承诺绑定到外部环境的正常行为。但我会记下它！ –

其实你需要重写你的代码，至少不是手动的。你可以做的就是不断编写类似你给出的例子的代码，并使用像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']); 
});

运行一饮而尽手表，它不停地奔跑，直到手动停止，您对MY-VUE-SOURCE.js将自动transpiled为你进行任何更改后。

来源

2016-07-22 13:53:55

我确实使用Gulp并尝试使用Bower。但是，当我切换到使用Babelified代码时，我开始出现一个错误，这是在Vue.js库代码的开始处发生的：'无法设置未定义或空引用的属性'Vue'。这是使用ES2015 Babel预设。 – flurpleplurple

请看看。 –

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

回答

相关问题