はじめに
React + TypeScript + Webpackの構成でプロジェクト構築する時の手順になります。
プロジェクトファイルはこちらで公開中💁♂️
ブランチ:topic/basic_template
インストール
まずは、必要なものを順次インストール。
$ yarn add react react-dom
Babel 7からTypeScriptのサポートが導入されていますが、このあたりの情報を読む限り、まだ積極的にBabelによるトランスパイルに移行しなくても良いかなと、個人的には思っています。ちなみに仕事の方でもts-loaderを使っています。
$ yarn add -D @types/react @types/react-dom
$ yarn add -D typescript ts-loader
$ yarn add -D webpack webpack-cli webpack-dev-server
設定
TypeScriptのトランスパイルにts-loaderを指定します。
webpack.config.js
module.exports = {
mode: "development",
entry: "./src/index.tsx",
output: {
filename: "bundle.js"
},
devServer: {
contentBase: "./public",
compress: true,
hot: true,
host: "localhost",
port: 3000,
publicPath: "/"
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [{ loader: "ts-loader" }]
}
]
}
};
TypeScriptのコンパイラオプションは、こんな感じで。
jsx:reactの指定を忘れずに。
tsconfig.json
{
"compilerOptions": {
// 厳格なNullチェックを行う
"strictNullChecks": true,
// 未使用のローカル変数を許可しない
"noUnusedLocals": true,
// 暗黙的なany型のthis使用を許可しない
"noImplicitThis": true,
// strictモードでパースし、出力ファイルに"use strict"を付与
"alwaysStrict": true,
// 対応する.mapファイルを生成
"sourceMap": true,
// 暗黙的なany型を許可しない
"noImplicitAny": true,
// コンパイルに含めるライブラリを列挙
"lib": ["dom", "es2017"],
// 生成されるモジュール形式
"module": "es2015",
// トランスパイル後の対象ECMAScriptバージョン
"target": "es5",
// .tsxファイルのJSXをサポートする際の方式
"jsx": "react",
// default export無しでのdefault importを許可
"allowSyntheticDefaultImports": true
}
}
コード準備
JSを読み込んで表示するhtmlを用意。
public/index.html
<!DOCTYPE html>
<html>
<head>
<title>React Demo</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
とりあえずdivエレメントを表示。
src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
const App = () => <div>app</div>;
ReactDOM.render(App(), document.getElementById("app"));
起動
yarn startでアプリが立ち上がる事を確認。
package.json
{
"name": "demo",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0"
},
"devDependencies": {
"@types/react": "^16.9.11",
"@types/react-dom": "^16.9.4",
"ts-loader": "^6.2.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
まとめ
以上、React + TypeScript + Webpackの構成で、プロジェクト開始する際の流れでした。👷🏻♂️