@babel/cliと@babel/registerと@babel/preset-typescriptでTypeScriptを実行する

Babelではバージョン7から@babel/preset-typescriptを使うことでTypeScriptのトランスパイルもできるようになりました。

今回はwebpackbabel-loaderは使わず、@babel/cliを使ってTypeScriptをビルドする、もしくは@babel/registerを使ってTypeScriptを実行するという内容です。

実行環境

$ node -v
v10.14.1
.
|-- .babelrc
|-- src
|   |-- index.ts
|   `-- register.js
`-- package.json

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

package.json

"devDependencies": {
  "@babel/cli": "^7.2.3",
  "@babel/core": "^7.2.2",
  "@babel/preset-env": "^7.2.3",
  "@babel/register": "^7.0.0",
  "typescript": "^3.2.2"
}

実行するTypeScriptファイル

まず、TypeScriptで書かれたsrc/index.tsを用意します。今回はこのファイルを対象とします。

import * as path from 'path';

const add = (x: number, y: number) => x + y;

console.log(path.resolve(__dirname, '../'));
console.log(add(1, 4));

@babel/cliでトランスパイル

package.json

"scripts": {
  "build": "babel src -D -d build --extensions '.js,.ts'"
}

buildコマンドを追加します。srcディレクトリ下のファイルを変換してbuildに出力します。ポイントは拡張子オプション--extensions '.js,.ts'を指定することです。これがないと.tsは変換されません。.tsxを使う場合は--extensions '.js,.jsx,.ts,.tsx'で指定します。

ビルドして実行

$ npm run build
Successfully compiled 1 file with Babel.

$ node build/index.js
/app/sandbox/babel-cli-register-typescript
5

エラーなく実行できました。

@babel/registerで実行

src/register.js

require('@babel/register')({
  extensions: ['.js', '.ts'],
});
require('./index');

nodeコマンドからTypeScriptを実行します。ただし.tsファイルを直接実行するのではなく、@babel/registerをロードしている.jsファイルを実行します。

実行

$ node src/register.js
/app/sandbox/babel-cli-register-typescript
5

動きました。

余談

開発中は@babel/registerを、productionの事前ビルドに@babel/cliを使っているサーバー環境にTypeScriptを導入する機会がありました。

今回のように、@babel/preset-typescriptと拡張子オプションを指定することで問題なくTypeScriptに移行できそうです。

参考