프레임워크에 구애받지 않는 web app template . 이 프로젝트는 React가 제거되었다는 점을 제외하면 Create React App과 같습니다.
웹앱을 봅니다.
저장소를 복제합니다.
git clone https://github.com/remarkablemark/web-app-template.git
cd web-app-template
프로젝트 이름을 바꿉니다.
git grep -l web-app-template | xargs sed -i ' ' -e ' s/web-app-template/my-app/g '
git grep -l ' web app template ' | xargs sed -i ' ' -e ' s/ web app template /My App Template/g '
git grep -l ' Web App ' | xargs sed -i ' ' -e ' s/Web App/My App/g '
파일을 업데이트합니다.
README.md
package.json
public/index.html
public/manifest.json
src/index.js
종속성을 설치합니다.
npm install
새 저장소를 초기화합니다.
rm -rf .git
git init
첫 번째 커밋을 수행합니다.
git add .
git commit -m ' feat: initialize project from web-app-template '
커밋 메시지는 릴리스 중에 사용되는 기존 커밋 형식을 따릅니다.
준비가 되면 로컬 저장소를 GitHub(또는 다른 원격 저장소)에 푸시하세요.
git remote add origin < remote-repository-url >
git push origin -u origin master
프로젝트 디렉터리에서 다음을 실행할 수 있습니다.
npm start
개발 모드에서 앱을 실행합니다.
http://localhost:3000을 열어 브라우저에서 확인하세요.
수정하면 페이지가 다시 로드됩니다.
콘솔에도 린트 오류가 표시됩니다.
npm run build
build
폴더에 프로덕션용 앱을 빌드합니다.
프로덕션 모드에서 올바르게 번들링되고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!
자세한 내용은 배포에 대한 섹션을 참조하세요.
npm run release
package.json
버전을 표준 버전으로 변경합니다.
npm run deploy
build
폴더를 원격 저장소의 gh-pages
분기에 강제로 푸시하여 GitHub 페이지에 앱을 배포합니다.
환경 변수는 REACT_APP_
대신 WEB_APP_
으로 시작한다는 점을 제외하면 Create React App과 유사하게 작동합니다.
예를 들어:
# .env
WEB_APP_VERSION=$npm_package_version
WEB_APP_DOMAIN=www.example.com
WEB_APP_FOO=$DOMAIN/foo
테스트는 Create React App처럼 실행됩니다.
npm test
다음을 사용하여 프로덕션 앱을 로컬로 빌드할 수 있습니다.
npm run build
앱이 하위 디렉터리에서 호스팅되는 경우 빌드 디렉터리 이름을 바꿉니다.
mv build web-app-template
또는 앱이 루트에서 호스팅되는 경우 빌드 디렉터리를 입력하세요.
cd build
정적 파일 서버를 시작합니다.
python -m SimpleHTTPServer
Ctrl + C
사용하여 서버를 중지합니다.
http://localhost:8000을 열어 브라우저에서 확인하세요.
앱이 하위 디렉터리에서 호스팅되는 경우 디렉터리 목록에서 폴더를 엽니다.
완료되면 빌드 디렉터리를 정리합니다.
앱이 하위 디렉터리에서 호스팅되는 경우:
rm -rf web-app-template
또는 앱이 루트에서 호스팅되는 경우:
rm -rf build
디렉터리 구조(점 파일은 생략됨):
tree -I ' build|node_modules '
.
├── LICENSE
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js
2 directories, 13 files
@descriptive/web-scripts를 사용하도록 마이그레이션합니다.
npx web-scripts-migration
블로그 게시물 또는 웹 스크립트 마이그레이션을 참조하세요.
MIT