メインコンテンツへスキップ

@babel/standalone

@babel/standalone は、ブラウザや他の Node.js 環境以外で使用するための Babel のスタンドアロンビルドを提供します。

@babel/standalone を使用する（しない）場合​

Babel を本番環境で使用している場合、通常は @babel/standalone を使用すべきではありません。代わりに、Webpack、Rollup、Parcel などの Node.js 上で実行されるビルドシステムを使用して、事前に JS をトランスパイルする必要があります。

ただし、@babel/standalone にはいくつかの有効なユースケースがあります。

  • Babel を使用したプロトタイピングを簡単かつ便利に行うことができます。@babel/standalone を使用すると、HTML のシンプルな script タグだけで Babel を使い始めることができます。
  • JSFiddle、JS Bin、Babel サイトの REPL、JSitor など、ユーザーが提供した JavaScript をリアルタイムでコンパイルするサイト。
  • V8 などの JavaScript エンジンを直接埋め込み、コンパイルに Babel を使用したいアプリ。
  • 最新の ES が提供するすべての優れた機能を含め、JavaScript をアプリ自体を拡張するためのスクリプト言語として使用したいアプリ。
  • その他の Node.js 環境以外の環境 (ReactJS.NET、ruby-babel-transpiler、php-babel-transpilerなど)。

インストール​

@babel/standalone のコピーを入手する方法はいくつかあります。好きなものを選んでください。

  • UNPKG 経由で使用します。これは、他のセットアップを行うことなく、Webページに埋め込む簡単な方法です。 
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  • 手動でインストールします。 
    npm install --save @babel/standalone

スクリプトタグ​

ブラウザで読み込まれると、@babel/standalone は、text/babel または text/jsx タイプのすべての script タグを自動的にコンパイルして実行します。

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
  const getMessage = () => "Hello World";
  document.getElementById("output").innerHTML = getMessage();
</script>

属性​

data-type​

追加: v7.10.0

ブラウザの ES モジュールに対するネイティブサポートを使用したい場合は、通常、スクリプトタグに type="module" 属性を設定する必要があります。

@babel/standalone では、代わりに data-type="module" 属性を設定します。次のようにします。

<script type="text/babel" data-type="module">

data-presets​

組み込みの Babel プリセットを有効にするには、data-presets 属性を使用します。複数の値はカンマで区切られます。

<script type="text/babel" data-presets="env,react">

最も人気のあるプリセットは、env、react、typescript、flow です。また、Babel.availablePresets を使用して利用可能なプリセットを照会することもできます。

追加のオプションを渡したい場合は、カスタムプリセットセクションを参照してください。

data-plugins​

組み込みの Babel プラグインを有効にするには、data-plugins 属性を使用します。複数の値はカンマで区切られます。

<script type="text/babel" data-plugins="transform-class-properties">

@babel/standalone の組み込みプラグインのリストについては、こちらを参照してください。また、Babel.availablePlugins からリストにアクセスすることもできます。

カスタムプラグインを追加したい場合は、カスタムプラグインセクションを参照してください。

src​

src 属性を介した外部スクリプトの読み込みもサポートされています。

<script type="text/babel" src="foo.js"></script>

async​

外部スクリプトには async 属性も設定できます。

<script type="text/babel" src="foo.js" async></script>

API​

環境に babel.js または babel.min.js をロードします。これにより、Babel オブジェクトに Babel の API が公開されます。

JavaScript
var input = 'const getMessage = () => "Hello World";';
var output = Babel.transform(input, { presets: ["env"] }).code;

設定ファイルはファイルシステムアクセスが利用できないため、@babel/standalone では機能しないことに注意してください。使用するプリセットやプラグインは、Babel.transform に渡されるオプションで指定する必要があります。

内部パッケージ​

@babel/standalone は、いくつかの内部 Babel パッケージを Babel.packages オブジェクトで公開します。

  • Babel.packages.generator
  • Babel.packages.parser
  • Babel.packages.template
  • Babel.packages.traverse
  • Babel.packages.types

カスタマイズ​

カスタムプラグイン​

カスタムプラグインとプリセットは、それぞれ registerPlugin および registerPreset メソッドを使用して追加できます。

JavaScript
// Simple plugin that converts every identifier to "LOL"
function lolizer() {
  return {
    visitor: {
      Identifier(path) {
        path.node.name = "LOL";
      },
    },
  };
}
Babel.registerPlugin("lolizer", lolizer);

登録すると、インラインスクリプトでカスタムプラグインを使用できます。

<script type="text/babel" data-plugins="lolizer">

または、Babel.transform でプラグインを使用できます。

JavaScript
var output = Babel.transform("function helloWorld() { alert(hello); }", {
  plugins: ["lolizer"],
});
// Returns "function LOL() { LOL(LOL); }"

カスタムプリセット: 組み込みプリセット/プラグインにオプションを渡す​

組み込みプラグインおよびプリセットにオプションを渡したい場合は、新しいプリセットを作成し、プリセット内にこれらのオプションを渡すことができます。

JavaScript
// Define a preset
Babel.registerPreset("env-plus", {
  presets: [[Babel.availablePresets["env"], { loose: true }]],
  plugins: [
    [
      Babel.availablePlugins["proposal-decorators"],
      { version: "2023-01" },
    ],
  ],
});

登録すると、インラインスクリプトでこのプリセットを使用できます。

<script type="text/babel" data-presets="env-plus">