게임에 이미지와 동영상을 추가하기 위해 데이터 URI인 base64를 사용하는데, 여러 개의 동영상으로 게임을 만들려면 각 동영상의 코드가 500줄이 넘을 텐데 좋은 방법이 없을까요? 이런 유형의 파일을 처리하는 것이 좋습니다. 제가 실제로 한 일은 Mixin 파일을 만들고 base64를 반환하는 여러 함수를 만드는 것이었습니다.
export default{
stage1(){
return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
},
stage2(){
return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
},
} 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
저는 (webpack, Parcel, Rollup, Browserify 등)과 같은 번들러 를 사용하는 것이 좋습니다. 여러 파일로 프로그래밍할 수 있으며 배포하기 전에 번들러는 모든 파일을 하나의 파일로 병합(및 축소) 합니다.
webpack과 같은 번들러를 사용하면 다음과 같은 모든 데이터 URL을 포함하는 json 파일을 만들 수 있습니다.
으아악응용 프로그램 스크립트 내:
으아악그리고 애플리케이션 파일에서 json 파일을 가져올 수 있으며 이는 번들러 빌드 작업에 통합됩니다. 그리고 애플리케이션의 모든 파일이 포함된 단일 파일을 만듭니다.
webpack 및 프로젝트 설정 방법에 대한 자세한 내용은 문서를 확인하세요 . 답변으로 설명하기에는 너무 길고 이에 대한 좋은 기사/비디오가 이미 있습니다. (그러나 다른 번들러도 사용할 수 있습니다)
내 대답이 올바른 방향을 가리켰습니다.
업데이트:
작은 데모 프로젝트(node 및 npm이 설치된 경우) :
npm
을 사용하여 이 패키지를 설치하세요.webpack의 기본 구성 파일 만들기:
으아악데모 애플리케이션 코드는 다음과 같습니다.
으아악데모 프로젝트 구조는 다음과 같습니다:
출력 HTML 파일만 생성되며 다른 모든 파일은 인라인됩니다.