[React][TypeScript] Hello World的なもの(1)(更新！) : プログラミング・メモ

(更新！！)
webpack4にあわせて変更。

-------

最初、webpackを使わずに試してみようと思ったが面倒くさくなってきたので、最新版で学ぶwebpack 4入門を参考にビルド環境を用意した。
こっちにもざっくりと準備することを書いておく。

npm init -y

でpackage.jsonを用意する。

npm install webpack webpack-cli -D

でモジュールのインストールする。

package.jsonのscriptsのところを

  "scripts": {
    "build": "webpack --mode development",
    "build:prod": "webpack --mode production"
  },

に変更する。

これで

npm run build

とすると、とりあえずsrc/index.jsとindex.js内でimportしているモジュールをまとめてdist/main.jsを作ってくれる。

webpackのオプションに--mode developmentを指定すると、開発用のソースマップ有効のjsファイルが作られて、--mode productionで公開用の圧縮(?)されたjsが作られる。

次にtypescriptを使えるようにする。
まずは、モジュールのインストール。

npm install typescript ts-loader -D

tsc --init

でtsconfig.jsonを作る。

tsconfig.jsonのcompilerOptionに次のオプションを変更or追加する。

    "sourceMap": true,
    "target": "es5",
    "module": "es2015"

webpackの設定ファイル(webpack.config.js)を用意する。

module.exports = {   
    entry: "./src/index.ts",

    output: {
        path:`${__dirname}/dist`,
        filename: "main.js"
    },
   
    module: {
      rules: [
        {
          // 拡張子 .ts の場合
          test: /\.ts$/,
          // TypeScript をコンパイルする
          use: "ts-loader"
        }
      ]
    },
    // import 文で .ts ファイルを解決するため
    resolve: {
      extensions: [
        ".ts"
      ]
    }
};

src/index.tsとindex.ts内でimportしているモジュールをjsにコンパイルしたて、まとめてdist/main.jsを作ってくれる。

次にReactを使えるようにする。
Reactのモジュールをインストール。

npm install react react-dom @types/react @types/react-dom -S

tsconfig.jsonに次の項目を追加or変更する。

    "jsx": "react",
    "moduleResolution": "node",
    "lib": [
      "es2017",
      "dom"
    ]

ReactのサイトにあるHello Worldみたいなもののindex.htmlとsrc/index.tsxを用意する。

index.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="root"></div>
    <script src="dist/app.js"></script>
</body>
</html>

src/index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello world!</h1>,
    document.getElementById('root')
);

webpackの設定ファイル(webpack.config.js)を変更する。まるっと、上げておく。

module.exports = {   
    entry: "./src/index.tsx",

    output: {
        path:`${__dirname}/dist`,
        filename: "app.js"
    },
   
    module: {
      rules: [
        {
          // 拡張子 .tsもしくは.tsx の場合
          test: /\.tsx?$/,
          // TypeScript をコンパイルする
          use: "ts-loader"
        }
      ]
    },
    // import 文で .ts ファイルを解決するため
    resolve: {
      extensions: [
        ".ts", ".tsx", ".js", ".json"
      ]
    }
};