TypeScript + Express.js で Hello WorldNPM 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 |
|