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
