/ts-babel-practice

Primary LanguageJavaScript

TypeScriptをBabelでES5に変換するやつ

npm install

npm install --save-dev \
  @babel/cli \
  @babel/core \
  @babel/preset-env \
  @babel/preset-typescript \
  tslint \
  typescript

workspaceの設定

  • babel/tscコマンドが使えるように環境変数のPathに追記
{
	"folders": [{
		"path": "."
	}],
	"settings": {
		"terminal.integrated.env.windows": {
			"PATH": "${env:PATH};${workspaceRoot}\\node_modules\\.bin"
		}
	}
}

TypeScript & Babelの設定ファイル

babel.config.js

const presets = [
  ["@babel/preset-env"],
  ['@babel/preset-typescript']
];
module.exports = { presets }

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "rootDir": "./src"
  }
}

変換コマンド

  • 型チェックはtscでやる
tsc -noEmit && babel src -x .ts --out-dir dist

package.json にコマンドを登録

{
  ...
  "scripts": {
    "dist": "tsc -noEmit && babel src -x .ts --out-dir dist"
  },
  ...
}
  • 登録したコマンドを使用
npm run dist