babel-loader+webpackでreact開発環境を整える(ただし型チェック...)

$ npm install --save-dev \
  @babel/cli \
  @babel/core \
  @babel/preset-env \
  @babel/preset-react \
  @babel/preset-typescript \
  @types/react \
  @types/react-dom \
  babel-loader \
  typescript \
  webpack \
  webpack-cli
$ npm install --save \
  react \
  react-dom

// babel.config.js
'use strict';

const presets = [
  // 必要に応じて browserslist(対象のブラウザ) とか useBuiltIns (polyfill) の設定を入れていこうな
  // ['@babel/preset-env', {browserslist: '> 0.25%, not dead'}]的な
  ['@babel/preset-env'],
  ['@babel/preset-typescript', {
    // 強制的にjsxのパースを行うオプション。
    // e.g: var hoge = <string>fuga; みたいなコードがパースできる
    isTSX: true,
    // isTSX: trueにするときは常に必須のオプション
    allExtensions: true
  }],
  ['@babel/preset-react', {
    // WIP: 後半でここ、NODE_ENVで切り替えられるように変更します
    development: true
  }]
];

module.exports = {presets}

// src/Index.tsx
import * as React from 'react';
import {render} from 'react-dom';

render(
  <h1>Hello World!!</h1>,
  document.querySelector('#root')
);

$ babel src/Index.tsx -o dist/index.js

// webpack.config.js
'use strict';

const path = require('path');

module.exports = {
  target: 'web',
  // entry pointをrepository root からの src/Index.tsxを想定
  context: path.join(__dirname, 'src'),
  entry: './Index',
  // 出力先は dist/index.js です
  output: {
    path: path.join(__dirname, 'dist'),
    filename: './index.js'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    }]
  }
};

// src/Index.tsx
import * as React from 'react';
import {render} from 'react-dom';

// number型にstringを入れてる
const content: number = 'Hello World!!';

render(
  <h1>{content}</h1>,
  document.querySelector('#root')
);

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "allowJs": false,
    "jsx": "react",
    "declaration": false,
    "noEmit": true,
    "strict": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

// node_modules/react/index.js
'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

// babel.config.js
'use strict';

// NODE_ENVがproductionかどうかの判定
const isDev = process.env.NODE_ENV !== 'production'

const presets = [
  ['@babel/preset-env'],
  ['@babel/preset-typescript', {
    isTSX: true,
    allExtensions: true
  }],
  ['@babel/preset-react', {
    development: isDev
  }]
];

module.exports = {presets}

"scripts": {
  "build:production": "NODE_ENV=production; tsc && webpack --mode=production",
  "build:development": "tsc && webpack --mode=development"
}