webpack + babel + TypeScript + React 環境構築メモ

init
- npm init -y
Babel
- npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
- .babelrc か babel.config.json を作成する(.babelrcはディレクトリ単位、babel.config.jsonはプロジェクト全体)
webpack
- npm i -D webpack webpack-cli babel-loader ts-loader
- webpack.config.js
React、TypeScript
- npm i -S react react-dom
- npm i -D typescript @types/react @types/react-dom
- npx tsc init
- tsconfig.json
- src/index.ts
webpack-dev-server
- npm i -D webpack-dev-server html-webpack-plugin
- src/index.html
- package.json
- npm start

コマンドの説明

npm	yarn
`npm init`	`yarn init`	package.json を作成
`npm i -S` , `npm i`, `npm install --save` , `npm install`	`yarn add`	package.json の dependenciesに追加
`npm i -D` , `npm install --save-dev`	`yarn add -D`	package.json の devDependenciesに追加

babel

.babelrc

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"
  ]
}

webpack

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "dist/"),
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: ["ts-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  devServer: {
    contentBase: "./dist",
    hot: true,
  },
};

React + TypeScript

src/index.tsx

import React from "react";
import { render } from "react-dom";

const App = () => {
  return <h1>Hello World! React x TypeScript</h1>;
};
render(<App />, document.getElementById("app"));

src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react"
  },
  "include": ["src"]
}

webpack-dev-server

package.json

{
  // 省略
  "scripts": {
    "start": "webpack serve",
    "watch": "webpack --watch",
    "build": "webpack --mode production"
  },
  // 省略
}

npm start

http://localhost:8080/ を開く。

参考
https://tech.playground.style/javascript/babel-webpack/
https://tech.playground.style/javascript/babel-webpack-build/