TypeScript - Visual Studio を使わずにトランスパイルする
公開日：2019-01-14
更新日：2019-05-14
更新日：2019-05-14
1. 概要
Visual Studio を使わずに TypeScript をトランスパイルします。
node.js のインストールと環境変数の設定は完了しているものとします。
node.js のインストールと環境変数の設定は完了しているものとします。
2. 環境構築
プロジェクト用のフォルダを作成します。
今回は d:\nodejs_test を作成しました。以降、パスを適宜、変更してください。
コマンドプロンプトで以下を実行します。
以下4つのファイルを、作成したフォルダ配下に作成します。
test.ts
test.html
webpack.config.js
.tsファイルを、.jsファイルにトランスパイルします。
また、「-t ES5」にすると、ES5 の形式でトランスパイルされます。
次に、以下のコマンドを実行して、ブラウザで実行できるようにします。
実行すると、app.js ファイルが出力されます。これを html で読み込んで使用します。
ブラウザで test.html にアクセスして、ボタンをクリックして背景色が変われば完了です。
今回は d:\nodejs_test を作成しました。以降、パスを適宜、変更してください。
コマンドプロンプトで以下を実行します。
cd d:\nodejs_test
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev typescript
npm install --save-dev @types/jquery
以下4つのファイルを、作成したフォルダ配下に作成します。
test.ts
export function test() {
$("body").css("background-color", "lightblue");
$("#msg").html("Hello, World");
}
$("#btn").on("click", test);
test.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>TypeScript</title></head>
<body>
<input type="button" id="btn" value="click" />
<div id="msg"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './test.js',
output: {
path: __dirname,
filename: 'app.js'
}
};
.tsファイルを、.jsファイルにトランスパイルします。
npx tsc -t ES6 test.ts
また、「-t ES5」にすると、ES5 の形式でトランスパイルされます。
次に、以下のコマンドを実行して、ブラウザで実行できるようにします。
実行すると、app.js ファイルが出力されます。これを html で読み込んで使用します。
npx webpack
ブラウザで test.html にアクセスして、ボタンをクリックして背景色が変われば完了です。
