typescript/react環境構築

[rensanrenren]

ESLintとPrettierの設定が終わったら次はTypescriptの環境構築

• tsconfigとWebpackの設定を理解して環境構築 https://www.youtube.com/watch?v=qSHlXcSces8&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=2
• TypeScriptチュートリアル https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103
• asdf で Node.js をバージョン管理する https://qiita.com/ucan-lab/items/0b854cfaa9d7c8ede106

React

• Reactの基礎【環境構築編】 https://zenn.dev/web_tips/articles/abad1a544f3643
• Reactの環境構築 https://future-architect.github.io/typescript-guide/react.html

tsconfigとWebpackの設定を理解して環境構築

• https://github.com/deatiger/ts-basic-demo
• https://www.youtube.com/watch?v=qSHlXcSces8&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=2

解説

用語

• webpack: モジュールバンドラ。コンパイルしたTypeScript(JavaScript)のコードを1つのファイルにまとめる。
• TypeScript: コンパイラを使う。

環境構築

Node.jsのバージョン管理

• 自分の場合はasdfによる管理。
  https://qiita.com/ucan-lab/items/0b854cfaa9d7c8ede106

ディレクトリの作成

mkdir ファイル名
cd ファイル名

ディレクトリの中でnpmのパッケージを使うための初期化
npm init

初期化の質問はすべてyesでok。
ここで"Package.json"というファイルが追加される。

エディタで作業開始

関連パッケージのインストール

npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server

• --save-devは開発環境側のみでしか使わない時に使うオプション。

• インストールされるとpackage.jsonに記述される。

• typescript: TypeScript構文をJavaScript構文に変換するコンパイラ。

• ts-loader: Webpackと連動してTypeScriptコンパイラを起動。コンパイラ後にWebpackを呼び出すために使う。

• webpack: バンドラー。複数のファイルを1つにまとめる。

• webpack-cli: コマンドラインでWebpackを使えるようにする。

• webpack-dev-server: Webpackのビルド。開発用Webサーバーの起動。ホットリロード(ファイル変更の自動検知と再読み込み)

webpack.comfig.jsの作成と設定

const path = require('path');

module.exports = {
    entry: { 
        bundle: './src/index.ts'
    },
    output: {
        path: path.join(__dirname, 'dist'), //ルートディレクトリのPathを取得。
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.ts', '.js'] //ファイルを呼び出す時に拡張子を省略できる
    },
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        open: true
    },
    module: {
        rules: [
            {
                test: /\.ts$/, //「$」は「ファイル名の末であることを示す」
                loader: 'ts-loader'
            }
        ]
    }
};

package.jsonの変更

"scripts"のコマンドを変更する。

"scripts": {
   "build": "webpack --mode=production",
   "start": "webpack-cli serve --mode development"
 },

tsconfig.jsonの作成と設定

tsc --init : コンパイラーの初期化

• tscとはTypeScript Compileの略称。
• コメントアウトで入れたい機能を追加/削除可能。

設定した方がいいリスト

• target: コンパイル後のJavaScriptのバージョン
• module: どの方式でモジュール関連のコードを扱うか。commonjsでNodejsを使う設定になる。
• strict: TypeScriptの基本的なチェックを全てTrueにするか
• esModuleInterop: import文を使って読み込めるようにするか。
• forceConsistentCasingInFileNames: ファイル名の大小を区別するか
• allowjs: JavaScriptファイルを許容するか
• jsx: JSXファイルをどうコンパイルするか
• lib: 使用するJSライブラリ
• outDir: ビルド結果の出力先
• baseUrl: import文のベースパス(絶対パスを使える)

おめでとう。環境構築は終わりだよ。