Parcel 시작 - React, SCSS, ESLint, AirBNB, Stylelint, Prettier

git clone https://github.com/devastion/parcel-start-react <project_name>

npm install && npm start

안녕하세요! 이 문서에서는 새 프로젝트에 대한 자세한 내용을 공유하고 설명my parcel 시작 상용구를 원합니다. 내 목표는 모든 것이 어떻게 작동하는지 이해하도록 돕는 것입니다. 시작하자!

패키지

Parcel - 제로 구성 번들러

Parcel은 설치가 쉽습니다. Here 필요에 따라 더 많은 구획 CLI 매개변수를 찾을 수 있습니다. 가끔 사용하는 몇가지를 보여드리겠습니다.

--public-url // path prefix for absolute urls
--no-source-maps // disables sourcemaps

// Specific to parcel build
--no-optimize // disables minification
--no-content-has // disables hashing of output file names

# fire parcel
npm start

# build for the deployment
npm run build

# delete dist and .parcel-cache folders
npm run clean

ESLint - JS/JSX 린터

// Included packages
eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import
eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

prettier와 통합할 수 있는 추가 구성이 있는 가장 인기 있는 JS 린터입니다. 또한 eslintrc.json 파일에 두 개의 추가 규칙을 추가했습니다.

"rules": {
    // no need to import react
    "react/react-in-jsx-scope": "off",
    // use jsx extension
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  }

다음은 ESLint를 실행하는 CLI 스크립트입니다.

# check which files contain error
npm run eslint

# fix the errors
npm run eslint:fix

Stylelint - CSS 린터

// Included packages
stylelint stylelint-config-prettier-scss stylelint-config-standard-scss
stylelint-scss

여기서 유일한 추가 사항은 scss 호환성입니다. 다음은 stylelint를 실행하는 스크립트입니다.

# run without fix
npm run csslint

# fix scss files
npm run csslint:fix

Prettier - 코드 포맷터

일관성을 유지하도록 코드의 형식을 지정합니다. Styleint 및 ESLint와 통합.

# run prettier
npm run prettier

포함된 나머지 패키지

autoprefixer - css에서 공급업체 접두사를 관리합니다.

postcss-import - 로컬 파일, 노드 모듈 또는 web_modules를 사용합니다. node_modules에 대한 절대 경로를 지정할 필요가 없습니다.

rimraf - nodejs의 경우 rm -rf.

추가/추천 패키지

sass-reset - sass에 대한 css 재설정. javascript 파일에서 "sass-reset"을 가져오거나 scss 파일에서 "~sass-reset"을 가져오십시오.

npm i sass-reset

npm-run-all - 여러 스크립트를 병렬 또는 순차로 실행하기 위한 CLI 도구

npm i npm-run-all

고맙습니다!

읽어 주셔서 감사합니다.

My github profile

Parcel Start - React, SCSS, ESLint, AirBNB, Stylelint, Prettier