VSCodeでNode.jsとJavascript、Typescriptを始める

他環境で同じ物を作るための備忘録として。

資材の用意

以下のものをインストールしておきます。

• Node.js
• VSCode
• Git

すべて最新バージョンでOK。インストールも推奨構成です。

Node.jsの確認

VSCodeのターミナルを開き、Node.jsのバージョンを確認。

$ node -v 
v16.14.0

$ npm -v
8.3.1

$ npx -v
8.3.1

以下のサンプルコードを走らせます。

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

$ node hello-world.js 
Server running at http://127.0.0.1:3000/

localhost:3000に接続するとHello,World!と表示されます。

Typescript環境の導入

Gitコンソールで以下を実行します。

npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev

名称	説明
typescript	TypeScriptコンパイラ
ts-loader	TypeScript用のローダー。Webpackと連動してTypeScriptコンパイラを動作させる
webpack	JavaScript用のビルドツール
webpack-cli	コマンドプロンプトからWebpackを動作させるためのツール。
webpack-dev-server	Webpackのビルド、開発用Webサーバー、ソースコードの変更検知、ブラウザの自動リロードを一括して提供するサーバー

package.jsonファイルに以下を追記します。

"scripts": {
    "build": "webpack --mode=development",
    "start": "webpack serve --mode=development"
  }