web-dev-qa-db-ja.com

Babel 6でbabel-runtimeを使用する方法は？

私はnpmモジュールを作成しようとしていますが、公式のbeleljsウェブサイトで単一の指示を見つけることができません。 babel-runtimeパッケージはどのように使用しますか？名前から、package.jsonの「dependencies」セクションに配置する必要があると思います。

ここにはまったく情報がありません： https://github.com/babel/babel/tree/master/packages/babel-runtime

ここに1つの例を見つけました： https://strongloop.com/strongblog/javascript-babel-future/ しかし、「babel -h」を実行すると't list-有効なパラメーターとしてオプション。

node.jsbabeljs
25
cosmosb

ランタイムはオプションですが、Babel 6の他のすべてと同様に、プラグインを追加することで主に有効になります。この場合、 http://babeljs.io/docs/plugins/transform-runtime/ が必要です

plugins: ["transform-runtime"]
  • babel-runtimeは、ポリフィルとBabelが参照できる他の多くのものを含むパッケージです。 npm install babel-runtimeを使用してアプリにインストールします
  • transform-runtimeは、ソースコードを処理し、import foo from "babel-runtime"ステートメントを挿入して、babel-runtimeが実際に使用されるようにするBabelプラグインです。これもnpm install babel-plugin-transform-runtimeでインストールします。
7
loganfsmyth

根拠

コードをトランスコンパイルすると、Babelは実際にヘルパーを挿入して、ターゲットとするESバージョンでサポートされていない機能をエミュレートします。

例： _class MyClass {}_ は、インラインヘルパー__classCallCheck_を活用します。これは、require('babel-runtime/helpers/classCallCheck')からもアクセスできます。

デフォルトでは、これらのヘルパーはコンパイル単位（ファイル）間で共有されません。 Babelチームは、それらを1か所に因数分解することは興味深いかもしれませんが、複数回使用するときにスペースを節約できます。

この問題は、_babel-plugin-transform-runtime_プラグインを作成することで解決されました。このプラグインは、ASTを実行し、ヘルパー注入を_babel-runtime_モジュールの適切な要件に置き換えます。コードベース全体で共有され、重複が回避されます。

どうやって使うのですか

実行中のBabel環境 があると仮定します。

  1. _babel-plugin-transform-runtime_ （devDependencyとして）をインストールします。これは、コードを変換してヘルパーを削除し、_babel-runtime_内のヘルパーを使用します。 バベル設定のplugins配列に追加する必要があります
  2. _babel-runtime_ （dependencyとして）をインストールします。これは、実際のライブラリ_babel-plugin-transform-runtime_がdependenciesに含まれることを前提としています。実行時にトランスコードされたコードによって使用されます。 コードのどこにでもそれを要求する必要はありません。

最小スニペット

  • _npm run build_はlibフォルダーをdistにコンパイルします
  • _npm start_はdistフォルダーを開始します（これは_babel-runtime_に依存します）

package.json

_{
  "scripts": {
    "build": "babel lib --out-dir=dist",
    "start": "node dist"
  },
  "dependencies": {
    "babel-runtime": "^6.9.2"
  },
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-plugin-transform-runtime": "^6.9.0"
  },
  "babel": {
    "plugins": [
      "transform-runtime"
    ]
  }
}
_
39
aymericbeaumet