TypeScript ESLint Prettier를 설정하기 위해 bash 스크립트로 Expo 프로젝트 준비

내가 만들고자 하는 모든 프로젝트에 일반적으로 필요한 새로운 엑스포 프로젝트를 설정하는 방법을 단계별로 공유했습니다. 그러나이 지침을 여러 번 전달한 후 나는 그것이 매우 짜증나고 시간을 낭비한다는 것을 알았습니다. 그래서 한 번에 모든 단계를 수행하는 스크립트를 작성하기로 결정했습니다.

디렉토리와 스크립트 파일을 생성하자

mkdir -p automation/bin
cd automation/bin
touch quickstart

따라서 quickstart는 실행 파일이 될 것입니다. 계속해서 이 파일에 스크립트를 작성하십시오.

#!/usr/bin/env bash

이는 기본적으로 실행 파일이 bash 에 의해 실행됨을 의미합니다.

프로젝트 이름을 매개변수로 사용하여 명령을 실행하고 싶습니다.

quickstart your-project-name-param

그리고 프로젝트 이름이 제공되지 않으면 스크립트를 종료하고 싶습니다.

if [ -n "$1" ]; then
  echo $1
else
  echo "Error! Please enter project name!" 1>&2
  exit 1
fi

$1는 첫 번째 스크립트 매개변수입니다. 이제 TypeScript 템플릿으로 엑스포 프로젝트를 만들 수 있습니다.

expo init -t expo-template-blank-typescript $1

그런 다음 프로젝트 디렉토리로 이동하여 종속성을 설치하십시오.

DIR="$(pwd)"
cd "$DIR/$1"

yarn add -D eslint prettier @react-native-community/eslint-config @typescript-eslint/eslint-plugin eslint-config-prettier

만들기 및 채우기.eslintrc.js

cat > .eslintrc.js <<EOF
module.exports = {
  extends: ['@react-native-community', "eslint-config-prettier"],
}
EOF

json 파일 업데이트는 nodejs 스크립트 내에서 더 쉽게 수행할 수 있습니다automation/patch-json.js.

const fs = require('fs');

const args = process.argv.slice(2);
const getFilepath = (filename) => `${args[0]}/${filename}`
// console.log(args)

let fileName = getFilepath('tsconfig.json');
let file = require(fileName);

file.compilerOptions.module = "es6";

fs.writeFile(fileName, JSON.stringify(file), function writeJSON(err) {
  if (err) return console.log(err);
  console.log(JSON.stringify(file));
  console.log('writing to ' + fileName);
});

fileName = getFilepath('package.json');
file = require(fileName);

if (file.resolutions) {
  file.resolutions["@types/react"] = "^17"
} else {
  file.resolutions = {
    "@types/react": "^17"
  }
}

fs.writeFile(fileName, JSON.stringify(file), function writeJSON(err) {
  if (err) return console.log(err);
  console.log(JSON.stringify(file));
  console.log('writing to ' + fileName);
});

그리고 이 노드 스크립트를 다음과 같이 실행할 수 있습니다.

SCRIPTS_DIR="$(dirname -- "${BASH_SOURCE[0]}")/.."
node "$SCRIPTS_DIR/patch-json.js" "$DIR/$1"

SCRIPTS_DIR - patch-json.js 스크립트가 있는 디렉토리입니다. "$DIR/$1" - 새로 만든 프로젝트의 경로입니다.

WebStorm을 사용하고 있으므로 업데이트하고 싶습니다.gitignore.

echo ".idea" >> ".gitignore"

내 모든 규칙을 prettier에 적용

./node_modules/prettier/bin-prettier.js --write .

그리고 변경 사항을 git에 커밋합니다.

git add .
git commit -m 'expostart script updates'

그리고 마지막 단계 - 모든 디렉토리에서 명령을 실행할 수 있으려면 내 bin 디렉토리를 터미널 PATH 변수에 추가해야 합니다. 나는 zsh을 사용하고 있으므로 ~/.zshrc에 다음을 추가하겠습니다.

export PATH=$PATH:$HOME/scripts/expo/bin

사용하기 전에 구성을 소싱하는 것을 잊지 마십시오.

source ~/.zshrc

이제 다음 명령으로 새 프로젝트를 만들 수 있습니다.

quickstart your-project-name

repository에서 전체 스크립트를 찾을 수 있습니다.