Kann ES6 in einer Chrome-Erweiterung verwendet werden?

Question

Ich habe gerade mit dem Aufbau einer Chrome-Erweiterung begonnen und war neugierig, ob ich ES6 damit verwenden könnte.

In den folgenden compatibility table zeigt Chrome 41, dass es derzeit 41% Kompatibilität hat. Ein paar Schlüsselfunktionen wie class sind in diesen 41% nicht enthalten und so war ich neugierig, ob es andere Optionen gab, wie das Transpilieren.

Ich habe bereits Babel, ein ES6 transpiler, mit Ember CLI verwendet und es hat super funktioniert.

Allerdings finde ich den Build-Prozess ein bisschen anders bei der Entwicklung einer Chrome-Erweiterung. Wenn ich zum Beispiel eine Erweiterung, die ich entwickle, teste, lade ich sie über die Option "Entpackte Erweiterung laden" in den Browser, die direkt auf den Quellcode zeigt.

Für die Erweiterung, die ich baue, verwende ich die yeoman chrome extension generator als Basis. Im Idealfall möchte ich in der Lage sein, eine Art Grunt-Aufgabe zu erstellen, die sich in die debug-Aufgabe einklinkt und den Code dann bei jeder Änderung in ein separates Verzeichnis transpiliert. Von dort konnte ich den Inhalt dieses Verzeichnisses über die Option load unpacked extension laden. Ich weiß jedoch nicht genau, wie ich das machen soll oder ob es andere Möglichkeiten gibt.

Answer 1

aktualisiert Diese Antwort ursprünglich im Jahr 2015. Der Link Kompatibilitätstabelle geschrieben wurde, zeigt Chrome, FF, Edge und Safari ist mehr kompatibel als jetzt Babel.

Chrome 49+, FF 45+ kann nicht von Babel profitieren. Andere Browser müssen möglicherweise transpiliert werden.

Original-

ich auch bin derzeit eine Chrome-Erweiterung in ES6 zu entwickeln. Ihre Fragen scheinen allgemeiner zu sein, deshalb versuche ich, dies basierend auf meinen Erfahrungen zu beantworten.

Im folgenden compatibility table, Chrome 41 zeigt, dass es derzeit 41% Kompatibilität hat. Ein paar Schlüsselfunktionen wie class sind nicht in diesem 41% enthalten und so war ich neugierig, ob es andere Optionen gab, wie zum Beispiel transpilieren.

Das stimmt. Sie können problemlos alle vorhandenen ES6-Funktionen verwenden, ohne sich Sorgen machen und transpilieren zu müssen. Jede neue Chrome-Version verfügt über einige weitere Funktionen, weshalb es ziemlich aufregend ist zu warten;) Chrome 44 umfasst jetzt 48%, einschließlich class.

Wenn Sie jedoch volle ES6 gehen wollen, dann ist ein Compiler immer noch die beste Option. Sie müssen sich keine Gedanken über unterstützte Funktionen machen und einfach ES6-Code schreiben, der in den richtigen ES5-Code kompiliert wird.

Meine aktuelle Konfiguration ist Browserify (über grunt-browserify) mit Babelify als Compiler. Mit Browserify können Sie auch ES6-Module verwenden, die Ihnen die volle Leistung von ES6 bieten.

Gruntfile.js

browserify: { 
    dist: { 
     options: { 
      transform: [ 
       ['babelify', { loose: 'all' }] 
      ], 
      browserifyOptions: { debug: true }, 
      exclude: '' 
     }, 
     files: { 
      'path/to/es5/app.js': ['path/to/es6/**/*.js'] 
     } 
    } 
} 
// Then it will be uglified and copied to dist. 

Das ist meine Erweiterung bedeutet, läuft immer noch mit ES5 Code zwar, aber das macht die Sache nicht für mich sehr, wie ich noch in ES6 schreiben kann.

Wenn Sie wirklich die verfügbaren ES6-Funktionen nutzen möchten (was ich vorher getan habe), kann es ziemlich frustrierend/ärgerlich sein, da Sie in Chrome immer nachsehen müssen und meistens auf eine neue Chrome-Version warten.

Allerdings finde ich den Build-Prozess ein bisschen anders bei der Entwicklung einer Chrome-Erweiterung. Zum Beispiel, wenn ich eine Erweiterung testen Ich bin Entwicklung, ich lade es in den Browser über die Option "Entpackte Erweiterung laden", die direkt auf den Quellcode zeigt.

Nun, es ist nicht wirklich anders als jedes andere Projekt, denke ich. Je nachdem, welche Chrome-spezifischen Funktionen Sie verwenden, können Sie Ihr Projekt entweder entwickeln und später testen, indem Sie es in den Browser laden oder einfach den Pfad "Entpackte Erweiterung laden" mit dem generierten Ordner dist/build/public verknüpfen. Das ist immer der aktuelle Zustand. Das funktioniert für mich am besten.

Hoffnung, das hilft ein wenig :)