web-dev-qa-db-ja.com

Chrome拡張機能でES6を使用できますか？

Chrome拡張機能の作成を開始したばかりで、ES6を使用できるかどうか知りたいと思っていました。

次の 互換性テーブル 、Chrome= 41は、現在41％の互換性があることを示しています。classのようないくつかの主要な機能はその41に含まれていません。 ％なので、他のオプション、たとえば、積み重ねなどがあるかどうか気になりました。

私はES6トランスパイラーである Babel をすでに使用しており、Ember CLIを使用しています。

しかし、chrome拡張機能を開発するときは、ビルドプロセスが少し異なります。たとえば、開発中の拡張機能をテストするときは、「解凍された拡張機能を読み込む」を介してブラウザーに読み込みますソースコードを直接指すオプション。

私が作成している拡張機能では、ベースとして yeoman chrome extension generator を使用しています。理想的には、ある種の設定を行えるようにしたいと思いますdebugタスクにフックし、別のディレクトリに変更されるたびにコードをトランスパイルするgruntタスク。そこから、load unpacked extensionオプションを介してそのディレクトリのコンテンツをロードできます。ただし、これを行う方法や、代わりに他のオプションがあるかどうかは正確にはわかりません。

javascriptgoogle-chromegoogle-chrome-extensiongruntjsecmascript-6
27
John Kelly Ferguson

更新この回答は2015年に最初に作成されました。互換性表のリンクは、Chrome、FF、Edge、およびSafariがBabelより多く互換性があることを示しています。

Chrome 49以降、FF 45以降では、Babelのメリットが得られない場合があります。その他のブラウザでは、トランスパイルが必要になる場合があります。

オリジナル

私は現在、Chrome ES6の拡張機能も開発しています。質問はより一般的であると思われるので、私の経験に基づいてこれに答えようとします。

次の 互換性テーブル 、Chrome 41は、現在41％の互換性があることを示しています。classのようないくつかの主要な機能はその41に含まれていません。 ％なので、トランスパイルなどの他のオプションがあるかどうか気になりました。

これは本当です。心配する必要がなく、既存のES6のすべての機能を簡単に使用できます。すべての新しいChromeリリースにはいくつかの機能が追加されているため、待つのはとてもエキサイティングです;）Chrome 44はclassを含めて48％をカバーするようになりました。

ただし、完全なES6に移行したい場合は、コンパイラが最適です。サポートされている機能について心配する必要はありません。適切なES5コードにコンパイルされるES6コードを記述するだけです。

私の現在のセットアップは Babelify をコンパイラとして使用してBrowserify（-- grunt-browserify 経由）です。 Browserifyを使用すると、ES6の全機能を利用できるES6モジュールを使用することもできます。

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.

つまり、私の拡張機能はまだES5コードで実行されますが、ES6で書くことができるので、私にとってはそれほど重要ではありません。

使用可能なES6機能を使用したい場合（以前に使用しました）、Chromeで可能なことを常に検索する必要があり、ほとんどの場合、新しいChromeリリース。

しかし、chrome拡張機能を開発するときは、ビルドプロセスが少し異なります。たとえば、開発中の拡張機能をテストするときは、「解凍された拡張機能を読み込む」を介してブラウザーに読み込みますソースコードを直接指すオプション。

まあそれは私が思う他のどのプロジェクトとも実際に違いはありません。使用しているChrome特定の機能に応じて、プロジェクトを開発し、後でブラウザーにロードしてテストするか、「解凍された拡張機能をロードする」パスを生成されたdist/build/publicにリンクするだけです。フォルダを作成します。これを行うと、常に現在の状態になります。これが私にとって最適です。

それが少し役立つことを願っています:)

19
morkro