- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-04-23T14:24:47+09:00","default:ryuichi","ryuichi")
** NPM package.json初期化 [#xa85a3cd]
#author("2019-04-23T18:31:00+09:00","default:ryuichi","ryuichi")
* TypeScript + Express.js で Hello World [#vb3e1bbe]
** NPM package.json 初期化 [#xa85a3cd]
npm init -y
** Webpack インストール [#y4ba9355]
*** Webpack関連のモジュールをインストールする [#c22abc26]
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
- rimraf & mkdirp : https://stackoverflow.com/questions/41451884/how-to-run-rm-command-on-windows-10
*** webpack.config.jsを作る [#xe2b1cb1]
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')
}
};
-----
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')
}
};
- https://github.com/babel/babel-loader
** TypeScirpt インストール [#za569842]
*** TypeScript関連のモジュールをインストールする [#t46b33e5]
npm add -D typescript ts-node @types/node core-js ts-loader
npx tsc --init
*** WebpackでTSをビルドできるようにwebpack.config.jsを書く [#k7fe8348]
vim webpack.config.js
-----
module: {
rules: [
+ {
+ test: /\.tsx?$/,
+ test: /\.ts$/,
+ use: 'ts-loader',
+ exclude: /node_modules/
+ },
resolve: {
+ extensions: ['.ts', '.js']
},
-----
- https://github.com/TypeStrong/ts-loader#configuration
** Express.js インストール [#m81f1a3a]
npm install express
npm install -D '@types/express'
** Git リポジトリ初期化 [#ma4de9ef]
*** .gitignore を書く [#z4b5a828]
vim .gitignore
-----
node_modules/
package-lock.json
-----
*** Gitリポジトリを作成して、初回コミットする [#v922660f]
git init
git add .
git commit -m 'Initial commit'
** Express.js アプリケーション作成 [#x4d9b3df]
vim package.json
-----
"scripts": {
+ "build": "rimraf ./dist && mkdirp ./dist && npx webpack",
+ "start": "node ./dist/bundle.js",
*** npmでビルドとアプリケーション起動できるようにする [#j7fecf0a]
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 を使ったアプリケーションを書く [#v90da990]
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;
** ビルドとアプリケーション起動 [#ceb56d46]
npm run build
npm run start
** 参考 [#p9096698]
https://github.com/yanoryuichi/TypeScript-Express-HelloWorld
