Create React App (TypeScript) 環境構築

セットアップ

code:setup.sh

yarn add react-router-dom lodash validator

# typescript

yarn add @types/react-router-dom

npx sb init

yarn add @storybook/addon-storyshots --dev

yarn add react-test-renderer --dev

yarn add @storybook/addon-jest --dev

@babel/plugin-transform-react-jsx

autoprefixerがもともとセットアップされている。browserslistに追記するだけ。

CSS Modules

jestももともとセットアップされている

TypeScript設定

tsconfig

typescript設定

tsconfig.json

ソースディレクトリの設定

paths

モジュールインポート方法解決

Path aliases with TypeScript in Node.js

@types

自前の型ファイル用に、@typesフォルダを作成しておく。

tsconfigの設定で自動的に読み込んでくれるみたい。

パッケージ用？

---

flow

型チェックツール

typescriptの場合は不要なので入れない。

---

Create React App 設定

環境変数

環境変数ファイルは以下、←の順で、変数が優先されるので注意。

npm start:.env.development.local, .env.local, .env.development, .env

npm run build: .env.production.local, .env.local, .env.production, .env

npm test: .env.test.local, .env.test, .env (note .env.local is missing)

Publicフォルダ

imagesやcssなどwebpackで管理しない外部モジュール

再利用するならwebpackを使用する。

-----

config/paths.js

appBuild: resolveApp('')

ビルド先

public/index.html

ページ名設定

"homepage": "http://mywebsite.com/relativepath",

ビルドされたhtmlのパスを解決できるようにする。

CSS Modules

import styles from './Button.module.css'とcssをimportする

code:css

import React, { Component } from 'react';

import styles from './Button.module.css'; // Import css modules stylesheet as styles

import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {

render() {

// reference as a js object

return <button className={styles.error}>Error Button</button>;

}

-------------------------------------------------------------

validator

TypeScript style guide, formatter, and linter

gtsを入れると競合するのかエラー発生する。

Browserslist

----

以下で、コンパイルエラー発生

./node_modules/@react-leaflet/core/esm/path.js 10:41

const options = props.pathOptions ?? {};

以下の対応をした

code:json

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

],

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

},

を以下に変更

code:json

"browserslist": [

">0.2%",

"not dead",

"not op_mini all"

],

------

create-react-appは

babel-loader 8.1.0に依存しているようなので、バージョンを明示的に指定した。

"babel-loader": "8.1.0",