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
npm install '@babel/core' '@babel/polyfill' '@babel/preset-env' babel-loader

webpack.config.jsを作る

vim webpack.config.js
module.exports = {
    target: 'node',
    mode: 'development',
    entry: path.resolve(__dirname, 'src/app.js'),
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
        ]
    },
    resolve: {
        extensions: ['.js']
    },
    output: {
        filename: 'app.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: /\.ts$/,
+       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/app.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/TypeScript-Express-HelloWorld


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2019-04-23 (火) 18:31:00 (89d)