@babel/cli

Babelには、コマンドラインからファイルをコンパイルするために使用できる組み込みのCLIが付属しています。

さらに、さまざまなエントリポイントスクリプトが@babel/cli/binのトップレベルパッケージにあります。シェル実行可能なユーティリティスクリプトbabel-external-helpers.jsと、メインのBabel cliスクリプトbabel.jsがあります。

手順

Babel CLIをマシンにグローバルにインストールすることはできますが、プロジェクトごとにローカルにインストールすることを強くお勧めします。

これには主に2つの理由があります。

1. 同じマシン上の異なるプロジェクトでは、異なるバージョンのBabelに依存しているため、個別にアップデートできます。
2. 作業環境に暗黙的な依存関係がないため、プロジェクトの移植性が高まり、セットアップが容易になります。

Babel CLIをローカルにインストールするには、次のコマンドを実行します。

npm

npm install --save-dev @babel/core @babel/cli

Yarn

yarn add --dev @babel/core @babel/cli

pnpm

pnpm add --save-dev @babel/core @babel/cli

メモ

package.jsonがない場合は、インストール前に作成します。これにより、npxコマンドとの適切な連携が確保されます。

インストールが完了すると、package.jsonファイルに以下が含まれるようになります。

{
  "devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.0.0"
  }
}

使用方法

メモ

最初に @babel/cli と @babel/core をインストールしてから npx babel を実行してください。そうしないと npx が古い babel 6.x をインストールします。 npx 以外の方法としては、 npm ランスクリプト 内にドロップするか、または代わりに相対パス、./node_modules/.bin/babel を実行することもできます。

シェル

npx babel script.js

使用法の表示

シェル

npx babel --help

ファイルのコンパイル

ファイル script.js をコンパイルし、標準出力に出力します。

シェル

npx babel script.js
# output...

ファイルに出力する場合は --out-file または -o を使用できます。

シェル

npx babel script.js --out-file script-compiled.js

ファイルを 変更するたびにコンパイルするには、--watch または -w オプションを使用します。

シェル

npx babel script.js --watch --out-file script-compiled.js

ソースマップでコンパイル

メモ

v7.19.3 以降、このパラメーターが指定されていない場合、@babel/cli は 構成ファイル に従います。

さらに ソースマップファイル を追加する場合は --source-maps または -s を使用できます。

シェル

npx babel script.js --out-file script-compiled.js --source-maps

または、インラインソースマップ を使用する場合は、代わりに --source-maps inline を使用します。

シェル

npx babel script.js --out-file script-compiled.js --source-maps inline

ディレクトリのコンパイル

--out-dir または -d のいずれかを使用して、src ディレクトリ全体をコンパイルして lib ディレクトリに出力します。これによって、lib 内の他のファイルやディレクトリが上書きされることはありません。

シェル

npx babel src --out-dir lib

src ディレクトリ全体をコンパイルして、単一の連結ファイルとして出力します。

シェル

npx babel src --out-file script-compiled.js

TypeScript ファイルを含むディレクトリ

src ディレクトリ全体をコンパイルするときに Babel が処理するファイル拡張子を指定するには、--extensions オプションを使用します。デフォルトの --extensions には Babel.DEFAULT_EXTENSIONS からアクセスできます。

シェル

npx babel src --out-dir lib \
  --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs \
  --presets=@babel/preset-typescript,@babel/preset-env,@babel/preset-react

ファイルを無視する

仕様ファイルとテストファイルを無視する

シェル

npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"

ファイルをコピーする

コンパイルされないファイルをコピーする

シェル

npx babel src --out-dir lib --copy-files

無視された JavaScript ファイルをコピーしたくない場合

履歴

バージョン	変更点
v7.8.0	--copy-ignored を追加しました。
v7.8.4	copyeIgnored オプションのデフォルトを true に変更しました。 --no-copy-ignored で無効にすることができます。

シェル

npx babel src --out-dir lib --copy-files --no-copy-ignored

ファイルをパイプする

stdin 経由でファイルをパイプし、script-compiled.js に出力します。

シェル

npx babel --out-file script-compiled.js < script.js

プラグインを使用する

コンパイルで使用するプラグインを指定するには、--plugins オプションを使用します。

シェル

npx babel script.js --out-file script-compiled.js --plugins=@babel/transform-class-properties,@babel/transform-modules-amd

プリセットを使用する

コンパイルで使用するプリセットを指定するには、--presets オプションを使用します。

シェル

npx babel script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/flow

構成ファイルを使用する

.babelrc.json または .babelrc を無視する

プロジェクトの.babelrcまたは.babelrc.jsonファイルからの構成を無視し、カスタムビルドなどの cli オプションを使用する

シェル

npx babel --no-babelrc script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/preset-react

カスタム構成パス

シェル

npx babel --config-file /path/to/my/babel.config.json --out-dir dist ./src

こちらで構成ファイルの詳細を参照してください。

ファイル拡張子の設定

追加:v7.8.0

transpiled ファイルはデフォルトで.js拡張子を使用します。

出力ファイルの拡張子は--out-file-extensionで制御できます

シェル

npx babel src --out-dir lib --out-file-extension .mjs

--keep-file-extensionで入力ファイルの拡張子を保持することもできます

シェル

npx babel src-with-mjs-and-cjs --out-dir lib --keep-file-extension

--keep-file-extensionと--out-file-extensionを一緒に使用できないことに注意してください。

詳細な使用方法

利用可能なオプションは他にも数多くあります。オプション、babel --help、およびその他のセクションで詳細を参照してください。