Tips and Tricks

このページには開発者がWebExtensionsを開発するのに便利ないろいろなコツや技術が書かれています。

Using advanced JavaScript features from ECMAScript 6 and 7

Firefoxはたくさんの独創的なECMAScript6の特徴を含んでいます。いくつかの新しい、そして実験的な特徴は、デフォルトではWebやWebExtensionでは使用できません。もしあなたがこれらの機能を使いたい場合、Babelのようなトランスパイラを使用するのがベストでしょう。

Babelは大半のES6の特徴に対するtransformationsを提供します 

provides transformations for the vast majority of ES6 features, and enables them by default.

Since Firefox already fully supports most of these, it's best to configure Babel to ignore them.

私達は.babelrcファイルの作成やあなたのpackage.jsonのbabelセクションに以下の設定を含めることを提案します。

{
  "env": {
    "firefox": {
      "sourceMaps": "inline",
      "blacklist": [
        "es5.properties.mutators",
        "es6.arrowFunctions",
        "es6.destructuring",
        "es6.forOf",
        "es6.parameters",
        "es6.properties.computed",
        "es6.properties.shorthand",
        "es6.spec.symbols",
        "es6.spread",
        "es6.tailCall",
        "es6.templateLiterals",
        "es6.regex.sticky",
        "es6.regex.unicode"
      ]
    }
  }
}

Then, to compile an individual script, simply run:

BABEL_ENV=firefox babel <filename>

Or, to compile every JavaScript file under the directory src and place the compiled files in compiled, copying over non-JavaScript files in the process, run:

BABEL_ENV=firefox babel -Dd compiled src