冗长数据 URI 的代码处理

Question

我使用数据 URI、base64 将图像和视频添加到我的游戏中，但我发现如果我想制作一个包含多个视频的游戏，那么每个视频的代码都会超过 500 行，所以有没有什么好的方法？建议处理这种类型的文件，我真正做的是制作一个 Mixin 文件并制作多个返回 base64 的函数。

export default{
    stage1(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
    stage2(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
}

Answer 1

我建议使用像（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 文件，所有其他文件都会内联。