開発手順

  • プロジェクト作成(create-react-app使用)【推奨】
    $ create-react-app --scripts-version=react-scripts-ts [プロジェクト名]
    $ cd [プロジェクト名]
    $ npm start
    $ rm -rf src/*
    • create-react-app で --scripts-version=react-scripts-ts オプションを付けて実行
  • プロジェクト作成(昔のやり方?)
    $ mkdir [プロジェクト名]
    $ cd [プロジェクト名]
    $ npm init
    $ npm install --save react react-dom @types/react @types/react-dom
    $ npm install --save-dev webpack webpack-dev-server
    • 実際のアプリケーションで使うモジュールは --save
    • 開発時のみ必要なモジュールは --save-dev
  • [プロジェクトフォルダ]/package.json
        :
    "scripts": {
        "build": "webpack --progress --colors",
        "start": "webpack-dev-server"
    },
        :
  • TypeScript関連パッケージのインストール
    $ npm install --save-dev typescript awesome-typescript-loader source-map-loader
  • [プロジェクトフォルダ]/tsconfig.json
    {
        "compilerOptions": {
            "outDir": "./dist/",
            "sourceMap": true,
            "noImplicitAny": true,
            "module": "commonjs",
            "target": "es5",
            "jsx": "react"
        },
        "include": [
            "./src/**/*"
        ]
    }
  • [プロジェクトフォルダ]/webpack.config.js
    module.exports = {
        entry: "./src/index.tsx",
        output: {
            filename: "bundle.js",
            path: __dirname + "/dist"
        },
        // webpackの出力をデバッグするためのsourcemapsを有効化
        devtool: "source-map",
        resolve: {
            // 解決可能な拡張子に'.ts'と'.tsx'を追加
            extensions: ["*", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
        },
        module: {
            loaders: [
                // '.ts'または'.tsx'の全てのファイルを、'awesome-typescript-loader'で扱う
                { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
            ],
            rules: [
              {
                test: /\.tsx$/,
                exclude: /node_modules/,
                loader: 'awesome-typescript-loader',
              }
            ],
        },
        // インポートしたモジュールのパスが下記のいずれかにマッチする場合、
        // それに相当するグローバル変数が存在するものとしてそれを使用します。
        // 依存性の全てを扱うことを避けることができるようになり、
        // ビルド間でそれらのライブラリがキャッシュ可能になるため重要です。
        externals: {
            "react": "React",
            "react-dom": "ReactDOM"
        },
    };
  • src/index.js(アプリ本体が App.js の場合)... index.js は必須
    import React from 'react';
    import { render } from 'react-dom';
    
    import App from './App';
    
    render(
      (<App />),
      document.getElementById('root')
    );
  • コンパイル・実行
    $ npm run build
    $ npm start

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2023-03-15 (水) 11:48:41 (580d)