ViteでReact環境を構築

最近流行りのViteで折角だからReact(TypeScript)の環境を構築するのを試してみる。

 npm init @vitejs/app
 //or
 yarn create @vitejs/app

Viteの初期構築を実行する。

準備が完了すると、対話形式でセットアップが始まる。

Project nameはそのままフォルダ名になる。

Select a frameworkはどのフレームワークを使うか、選択式で選ぶ事ができる。

今回はReactを使いたいので、Reactを選ぶ。

Select a variantで、ReactでTypeScript環境を使うかの選択式で選ぶ事ができる。
TypeScriptも使いたいので、react-tsを選ぶ。

セットアップが完了し、実行パス配下にProject name名のフォルダが作成される。

Renoa

脱線

Rome

去年あたりに登場し、話題になった統合ツールチェーン。
今までESLintとかPrettierとかwebpackとかBabelなど、バラバラのツールを組み合わせて環境構築を行っていたのを、1つにまとめて行うのが目的のプロジェクト。
2021年10月5日時点で機能は実装済み。
ただし、Testingだけは機能としてあるものの、公式ガイドには詳細を記載されていない。
まだそこらへんは開発中と推測される。

最近になってRustで作り直すとのこと

ROME

Renoa

ESLint / Prettier

コーディング規約や構文エラーなどの静的解析ツールであるeslint
コード整形ツールであるPrettier
これらの導入を行う。

yarn add -D eslint eslint-config-prettier prettier

まずは基本的なのを導入。

yarn add -D eslint-plugin-react eslint-plugin-react-hooks

次にreact周りのeslintプラグインを導入

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

TypeScript周りのeslintプラグインを導入

Renoa

Jest + React Test Library

2021年11月10日時点だと、Viteにはまだテスト周りをサポートしていない。
そのため、Viteを使わずにBabel環境を整えてJestの導入を行う必要がある。

yarn add -D jest babel-jest

次にReact Testing Libraryを導入する。
TypeScript環境なので、型情報も一緒に導入する.

yarn add -D @testing-library/react @testing-library/react-hooks @testing-library/jest-dom @types/testing-library__jest-dom

これだけでも、babel自体がTypeScriptをトランスコンパイラしてくれるけど、型情報まではチェックしないので、型情報まで厳密に行いたい場合はts-jestを導入する。

yarn add -D ts-jest

次に設定を行っていく。
まず最初に.babelrcを作成し、以下の設定を行う。

{
    "presets": ["env", "react"]
}

jest側の設定も行う。
jest.config.jsを作成し、以下の設定を行う。

module.exports = {
    setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
    testMatch: [
        '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
        '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
    ],
    transform: {
        '\\.(ts|tsx)?$': 'ts-jest',
    },
    testEnvironment: 'jest-environment-jsdom',
    moduleNameMapper: {
        '\\.(css|sass|scss)$': 'identity-obj-proxy',
    },
};

Renoa

Tailwind

CSSフレームワークの一つである、Tailwindを導入する。

yarn add -D tailwindcss postcss autoprefixer

Renoa

これで最低限の開発環境の構築が出来ると思われる。
不具合や不都合が起きたらまた更新して修正していくつもり。