TypeScript + Express.js で Hello World

NPM package.json 初期化

 npm init -y

Webpack インストール

Webpack関連のモジュールをインストールする

 npm install -D webpack webpack-cli '@webpack-cli/init'
 npm install -D webpack-node-externals
 npm install -D rimraf mkdirp

webpack.config.jsを作る

 vim webpack.config.js
 const path = require('path');
 
 module.exports = {
     target: 'node',
     mode: 'development',
     module: {
         rules: [
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 use: {
                     loader: 'babel-loader',
                     options: {
                         presets: ['@babel/preset-env']
                     }
                 }
             }
         ]
    },
     resolve: {
         extensions: ['.js']
     },
     output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist')
     }
 };

TypeScirpt インストール

TypeScript関連のモジュールをインストールする

 npm add -D typescript ts-node @types/node core-js ts-loader
 npx tsc --init

WebpackでTSをビルドできるようにwebpack.config.jsを書く

 vim webpack.config.js
 -----
   module: {
     rules: [
 +     {
 +       test: /\.tsx?$/,
 +       use: 'ts-loader',
 +       exclude: /node_modules/
 +     },
 
   resolve: {
 +   extensions: ['.ts', '.js']
   },
 -----

Express.js インストール

 npm install express
 npm install -D '@types/express'

Git リポジトリ初期化

.gitignore を書く

 vim .gitignore
 -----
 node_modules/
 package-lock.json
 -----

Gitリポジトリを作成して、初回コミットする

 git init
 git add .
 git commit -m 'Initial commit'

Express.js アプリケーション作成

npmでビルドとアプリケーション起動できるようにする

 vim package.json
 -----
   "scripts": {
 +   "build": "rimraf ./dist && mkdirp ./dist && npx webpack",
 +   "start": "node ./dist/bundle.js",
    "test": "echo \"Error: no test specified\" && exit 1"
   },
 -----

Express.js を使ったアプリケーションを書く

 vim src/index.ts
 -----
 import express from 'express';
 
 const app = express();
 
 app.get('/', (req, res) => res.send('Hello World'));
 
 app.listen(3000, () => console.log('Example app listening on port 3000'));
 
 export default app;
 -----

ビルドとアプリケーション起動

 npm run build
 npm run start

参考

https://github.com/yanoryuichi/ExpressJS-HelloWorld


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS