blog.mahoroi.com

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

-

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

今回は webpack と babel-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 を用意します。今回はこのファイルを対象とします。

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 に移行できそうです。

参考