Create React App(Type Script) + SWC+MUI v5 환경 구축

개시하다

Create React App(Type Script) + SWC+ MUI v5의 SPA 환경 구축 프로세스를 기사로 기술했습니다.

프레임 활용

본 글에서 사용한 프레임워크의 공식 사이트는 다음과 같다.

Create React App

React 응용의 개발 환경 구축

SWC

Jest의 빠른 전송 도구

MUI

React UI Library

독자 대상

로컬 개발 환경에서 node.개발 환경을 구축하기 위해 jsversion을 지정한 사람들을 대상으로 한 보도입니다.

기술을 이용하다

저자의 로컬 개발 환경의 각 포장 버전은 다음과 같다.

Mac: 10.15.7

nodevnv: 1.4.0

node: 14.17.0

npm: 8.5.2

yarn: 1.22.10

로컬 개발 환경 준비

로컬 개발 환경의 노드 버젼을 14 계열로 만들었다.
저자는 14학과의 이유로 vercelorFirebse Hosting나 http://localhost:3000를 사용할 계획이기 때문에 각 서비스의 문서에 기재된 운행시간 버전을 대조했다.
참고 문헌

vercel 공식

https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version

Firebse

https://firebase.google.com/docs/functions/manage-functions?hl=ja

로컬 개발 환경의 node version을 14 계열로 바꾸다

$ node -v
14.17.0

$ npm -v
8.5.2

$ yarn -v
1.22.10

각 개발 환경의 패키지의 버전이 확인되었기 때문에 실제 응용 프로그램의 패키지를 설치하고 싶습니다.

Create React Apps(Type) 설치

적절한 작업 디렉토리에서 다음 명령을 실행합니다.
참고 문헌

Adding TypeScript | Create React App

$ yarn create react-app project-name --template typescript

インストール実行
Happy hacking!
✨  Done in xx.xxs.

$ cd project-name && yarn start

브라우저.eslintrc.js에서 React 응용 프로그램을 시작하면 설치가 완료됩니다.

링크 설정

그런 다음 라이트를 설정하려고 합니다.

$ npx eslint --init

? How would you like to use ESLint? …
❯ To check syntax and find problems

? What type of modules does your project use? …
❯ JavaScript modules (import/export)

? Which framework does your project use? …
❯ React

? Does your project use TypeScript?
Yes

? Where does your code run? …
✔ Browser
✔ Node

? What format do you want your config file to be in? …
❯ JavaScript # ここはお好みでいいと思います

? Would you like to install them now with npm?
Yes

.eslintrc.js를 프로젝트 디렉터리에 출력하는 루트입니다.
.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

Proettier 설치

$ yarn add -D prettier eslint-config-prettier

prettier의 설정 파일을 만듭니다.

$ touch prettier.config.js

항목 등에 따라 취향에 따라 설정 내용을 기입하십시오.
prettier.config.js

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  singleQuote: true,
  trailingComma: 'none',
  semi: false,
  parser: 'typescript'
}

업데이트Speedy Web Compiler.
.eslintrc.js

module.exports = {
	...
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'  // <追記
  ],
	...
};

eslint 플러그인 설치

eslint-import-resolver-typescript

eslint-plugin-react-hooks

$ yarn add -D eslint-import-resolver-typescript eslint-plugin-react-hooks

.eslintrc.js

module.exports = {
  ...
  // settingsに追記
  settings: {
    'import/resolver': {
      typescript: {
        project: './tsconfig.json'
      }
    }
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'react-hooks' // 追記
  ],
  ...
};

규칙을 설정합니다.
.eslintrc.js

module.exports = {
...
// ルールの設定これはプロジェクト等で話し合って設定がいいと思います
rules: {
    // Enable
    quotes: ['warn', 'single'],
    'no-extra-semi': 'warn',
    '@typescript-eslint/no-unused-vars': ['error'],
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',

    // Disable
    'no-unused-vars': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/no-empty-function': 'off'
  }
...
};

package.json 수정
package.json

{
  ...
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint:eslint": "eslint --fix src/**/*.{ts,tsx}", // < 追記
    "eject": "react-scripts eject" // 削除
  },
  ...
}

다음 작업을 수행하여 확인합니다.

$ yarn lint:eslint

@swc/jest 설치

SWC

SWC is an extensible Rust-based platform for the next generation of fast developer tools. It's used by tools like Next.js, Parcel, and Deno, as well as companies like Vercel, ByteDance, Tencent, Shopify, and more.
SWC는 jest.config.js의 약칭으로 제스트의 실행 속도를 높이는 TRANSER를 활용해 봤다.

$ yarn test

PASS  src/App.test.tsx
  ✓ renders learn react link (30 ms)

SWC 관련 패키지를 설치합니다.

$ yarn add -D @swc/core @swc/jest 

에는 SVG 파일 사용과 Jest-dom 관련 패키지도 설치됐다.

$ yarn add -D jest-svg-transformer @testing-library/jest-dom

Jest의 구성 파일 정의

$ yarn jest --init

? Would you like to use Jest when running "test" script in "package.json"?
no

? Would you like to use Typescript for the configuration file?
no

? Choose the test environment that will be used for testing
jsdom (browser-like)

? Do you want Jest to add coverage reports?
yes

? Which provider should be used to instrument code for coverage?
babel

? Automatically clear mock calls, instances and results before every test?
yes

react-app-rewired를 프로젝트 디렉터리에 출력하는 루트입니다.
jest.config.js

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: 'coverage',
  moduleNameMapper: {
    // Aliasの設定
    '^@/(.+)': '<rootDir>/src/$1',
    // Jest で svgファイルを扱えるようにする
    '^.+\\.svg$': 'jest-svg-transformer'
  },
  roots: ['.'],
  testEnvironment: 'jsdom',
  testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
  testPathIgnorePatterns: ['/node_modules/'],
  transform: {
    '.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        sourceMaps: true, 
        module: {
          type: 'commonjs'
        },
        jsc: {
          parser: {
            syntax: 'typescript', 
            tsx: true
          },
          transform: {
            react: {
              runtime: 'automatic'
            }
          }
        }
      }
    ]
  },
  transformIgnorePatterns: ['/node_modules/']
}

rewired Create React App

customize-cra, package.json 가방으로 적어 놓을게요.

$ yarn add -D react-app-rewired customize-cra

$ touch config-overrides.js

config-overrides.js

const {
  override,
  addWebpackResolve
} = require('customize-cra')
const path = require('path')

module.exports = override(
  addWebpackResolve({
    alias: {
      '@': path.resolve(__dirname, './src/')
    }
  })
)

수정react-app-rewired은 config-overrides.js로 수행됩니다.
package.json

{
  ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest test --coverage",
    "lint:eslint": "eslint --fix src/**/*.{ts,tsx}"
  },
  ...
}

리액트 어플에 살짝 가벼운 느낌을 줍니다.
App.tsx

import logo from './logo.svg'

function App() {
  return (
    <div>
      <img src={logo} className="App-logo" alt="logo" />
    </div>
  )
}

export default App

App.test.tsx

import { render } from '@testing-library/react'

import App from './App'

describe('App Component', () => {
  test('renders main page correctly', async () => {
    render(<App />)
  })
})

ject 돌려봐.

$ yarn test

 PASS  src/App.test.tsx
  App Component
    ✓ renders main page correctly (46 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 App.tsx  |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.252 s
Ran all test suites.
✨  Done in 5.62s.

에슬린트에서 욕을 먹어서 만들었다.eslintignore.

touch .eslintignore

.eslintignore

config-overrides.js

MUIv5 설치

$ yarn add @mui/material @emotion/react @emotion/styled

MCI 버튼의 스타일을 적용해 봅니다.
App.tsx

import logo from './logo.svg'
import Button from '@mui/material/Button' //テストで追記

function App() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
      <img src={logo} className="App-logo" alt="logo" />
    </div>
  )
}

export default App

MUI 스타일이 올바른지 확인합니다.

$ yarn start

버튼이 모양이 있으면 완성됩니다.

Emotion 스타일 사용

MUI에서 Emotion 스타일을 적용할 수 있으므로 미리 설정할 수도 있습니다.

yarn add @emotion/css

yarn add -D @babel/preset-react @emotion/babel-plugin

config-overrides.js

const {
  override,
  addWebpackResolve,
  addBabelPresets, // 追記
  addBabelPlugins //  追記
} = require('customize-cra')
const path = require('path')

module.exports = override(
  addBabelPresets(['@babel/preset-react']), //追記
  addBabelPlugins(['@emotion/babel-plugin']),  //追記
  addWebpackResolve({
    alias: {
      '@': path.resolve(__dirname, './src/')
    }
  })
)

나는 당분간 여기까지만 하면 골격이 완성될 것 같다.