React+TypeScript+webpack – 1

最近はReactというモジュールを使ったWebページ作成が流行っているらしいのでチュートリアルをやってみる。
過去にちょっとやってみたもののあまりTypeScriptもNode.jsも詳しくないので、Node.jsのインストールから。

また、TypeScriptで生成した各種JavaScriptをまとめるツールも、以前使ったGulpではなくwebpackを今回利用する。

NVMを利用したNode.jsのインストール

システム組み込みのNode.jsがあり、それを利用する場合この手順は不要。
NVM: Node Version Manager

# GitHubにセットアップスクリプトが公開されているのでそれを利用する。
curl -o - https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

# 有効化
. ~/.nvm/nvm.sh

# 特定バージョンのNode.jsのインストールと標準利用に設定
nvm install 8.15.0
nvm use 8.15.0             # 一時的にバージョンを指定する場合
nvm alias default 8.15.0   # 恒久的に(どのShellでも)特定のバージョンを標準的に使う場合

プロジェクトの作成およびReact等のインストール

Nodeモジュール

mkdir ReactTutorialProject
cd ${_}

npm init


# プロジェクト自体が関与するモジュールは--saveで
# プロジェクトのビルド等、開発だけに関与するモジュールは--save-devでインストールする
npm install --save react{,-dom} @types/react{,-dom}
npm install --save-dev webpack{,-cli,dev-server}
npm install --save-dev typescript awesome-typescript-loader
npm install --save-dev source-map-loader
npm install --save-dev path

ディレクトリ作成

以下の構成になるようディレクトリを作る。

./node_modules/
  src/            # ts/tsxファイル置き場
  public/         # ts/tsxのトランスパイルで生成されたjs + index.htmlの置き場

tsconfig.js

TypeScriptのトランスパイル設定

{
    "compilerOptions": {
        "outDir": "public",
        "sourceMap": true,
        "strictNullChecks": true,
        "strictPropertyInitialization": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx"
    ]
}

webpack.config.js

webpackの設定ファイル

const path = require('path');


module.exports = {
    mode: 'development',

    entry: './src/main.tsx',

    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },

    resolve: {
        extensions: [
            ".ts",
            ".tsx",
            ".js",
            ".json"
        ]
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                enforce: 'pre',
                loader: 'source-map-loader'
            },
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            }
        ]
    },

    devtool: 'source-map',

    devServer: {
        contentBase: path.join(__dirname, 'public'),
        open: true,
        openPage: 'index.html',
        port: 8080,
        disableHostCheck: true,
        inline: true,
        historyApiFallback: true
    }
};

Hello World

public/index.html

JavaScriptをロードするhtmlファイル。
アプリケーションを展開する先のDIV要素は、IDをappとしている。

<!doctype html>
<html lang="ja">
    <head>
        <title>HelloWorld.TSX</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="/bundle.js"></script>
    </body>
</html>

src/main.tsx

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


class Main extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
    }


    public render() {
        return (
            <div>Hello, World</div>
        );
    }
}


const app = document.getElementById('app');
ReactDOM.render(<Main />, app);

ビルド

ビルドは普通、webpackを実行する。
また、ブラウザから動作確認をするため開発用サーバを立てる場合にはwebpack-dev-serverを実行する。

./node_modules/.bin/webpack
./node_modules/.bin/webpack-dev-server &

ただし、package.jsonのscriptsにbuildという名前でコマンドを書けば、npm run buildと打てば実行できる。
同様に、npm run startと打てば開発用サーバが開始できるよう設定を加える。

@@ -5,6 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "start": "webpack-dev-server --hot --watch-content-base"
   },
   "repository": {
     "type": "git",
# 単発のビルド
npm run build

# 開発サーバを立てて、変更があったら都度ビルドする場合
npm run start

開発サーバを立てると自動でブラウザが起動し、index.htmlが開く。
Hello, Worldが表示されれば完成。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です