このES6コードをSafari互換にするにはどうすればよいですか？

Question

ES6の矢印機能を使用するVue.jsコードがあります。しかし、明らかにSafari（これはOSX上のChromeのように見える）はこれを好まない。コードは次のとおりです。

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

        }); 
      }, 

私は矢印の構文を使用するいくつかの関数を持っています。どのように私はそれらを使用することを避けるためにそれらを書き直すことができますか？他の人がそのようバベルとしてtranspilerを使用して述べてきたように

Answer 1

私は、コードをtranspileするバベルを使って試してみましたが、それはエラー（未定義またはnull参照のプロパティを設定できません「ヴュー」）を導入しているようだ

を行うだろうトリックですが、それは矢印機能を持たないように見える方法です。

矢印機能は、私たちは、単に新しい変数に外側のスコープで thisを割り当て、内部でそれを使用する必要があることを再現するために、あなたは基本的にそれが宣言されていますどこの this範囲を保つ機能である与えるもの

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

     }); 
}, 

関数。

コメントでLinusBorgが指摘したように、vue-resourceを使用する場合、ライブラリはthisが外側スコープに変更されるので、var that = this;部分を実行する必要はありません。これはvue-resourceリソースに特有ですが、一般的には約束どおりに行われていないため、通常は他のライブラリとはうまく動作しません。

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']); 
}); 

あなたはそれを手動で停止するまで走り続けているゴクゴク時計を、実行した後、MY-VUE-SOURCE.jsに変更した内容が自動的にtranspiledされます。