冗長資料 URI 的程式碼處理

Question

我使用資料URI、base64將圖像和影片加入我的遊戲中，但我發現如果我想製作一個包含多個影片的遊戲，那麼每個影片的程式碼都會超過500行，所以有沒有什麼好的方法？建議處理這種類型的文件，我真正做的是製作一個Mixin文件並製作多個返回base64的函數。 exportdefault{stage1(){return"data:video/mp4;base64,AAAAIGZ0eXBpc29

P粉605233764 · Answer

我建議使用像（webpack、parcel、rollup、browserify等）這樣的捆綁器，您可以在多個文件中進行編程，並且在部署之前，捆綁器會將所有文件合併到一個檔案中（並縮小它）。

使用像 webpack 這樣的打包器，您可以建立一個包含所有 dataurl 的 json 文件，例如：

// filename data.json
{
    "video1": "data:video/mp4;base64,AAAA...", 
    "video2": "data:video/mp4;base64,AAAA...", 
    "video3": "data:video/mp4;base64,AAAA...",
    // ...
}

在應用程式腳本中：

import videoData from './data.json';

 ...
     stage1(){
         return videoData.video1;
     }
     stage2(){
         return videoData.video2;
     }
 ...

並且在應用程式檔案中，您可以匯入 json 文件，它將整合到捆綁器建置操作中。 並建立一個包含應用程式所有檔案的單一檔案。

有關 webpack 以及如何設定項目的詳細資訊查看文件。在答案中描述它太長了，而且已經有很好的文章/影片了。 （但您也可以使用任何其他捆綁器）

我的回答為您指明了正確的方向。

更新：

一個小型示範專案（如果您安裝了 node 和 npm#）：

使用npm安裝這些軟體包

html-inline-script-webpack-plugin
html-webpack-外掛
網路封包
webpack-cli

為 webpack 建立基本設定檔：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "scripts/app.js"),
    output: {
        path: path.resolve(__dirname, './dist'),
    },
    module:{
        rules: [{
            test: /\.(mp4|png)/,
            type: 'asset/inline'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new HtmlInlineScriptPlugin(),
    ],
};

這裡是示範應用程式程式碼：

// app.js
import Phaser from './phaser.min.js';

import videoFile from '../media/video.mp4';
import imageFile from '../media/demo.png';

let base64ImageFile = imageFile;
let base64VideoFile = videoFile;

let config = {
    scene: { 
        preload: function(){
            this.textures.addBase64('demo', base64ImageFile);
            this.load.video('video', base64VideoFile);
        },
        create: function() { 
            this.add.text(10, 10, 'DEMO')
                .setOrigin(0); 
            this.add.image(10, 30, 'demo')
                .setScale(.25)
                .setOrigin(0);
            this.add.video(300, 30, 'video')
                .setScale(.5)
                .setOrigin(0);
        } 
    }
};

new Phaser.Game(config);

示範的專案架構如下圖所示：

它只會建立一個輸出 html 文件，所有其他文件都會內聯。