在 CRA React 应用程序中使用 ffmpeg.wasm 时出现 Babel Loader 错误

Question

我正在尝试在 CRA React 应用程序中使用 ffmpeg-wasm 实现视频编辑器。

包依赖关系：

"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",

下面是我正在尝试实现的示例类：

import React, {useRef, useState} from 'react';
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { toBlobURL, fetchFile } from "@ffmpeg/util";

function Trimmer() {
    const [loaded, setLoaded] = useState(false);
    const ffmpegRef = useRef(new FFmpeg());
    const videoRef = useRef<HTMLVideoElement | null>(null)
    const messageRef = useRef<HTMLParagraphElement | null>(null)

    const load = async () => {
        const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
        const ffmpeg = ffmpegRef.current;
        ffmpeg.on("log", ({ message }) => {
            if (messageRef.current) messageRef.current.innerHTML = message;
        });
        // toBlobURL is used to bypass CORS issue, urls with the same
        // domain can be used directly.
        await ffmpeg.load({
            coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
            wasmURL: await toBlobURL(
                `${baseURL}/ffmpeg-core.wasm`,
                "application/wasm"
            ),
            workerURL: await toBlobURL(
                `${baseURL}/ffmpeg-core.worker.js`,
                "text/javascript"
            ),
        });
        setLoaded(true);
    };

    const transcode = async () => {
        const videoURL = "https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi";
        const ffmpeg = ffmpegRef.current;
        await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
        await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
        const fileData = await ffmpeg.readFile('output.mp4');
        const data = new Uint8Array(fileData);
        if (videoRef.current) {
            videoRef.current.src = URL.createObjectURL(
                new Blob([data.buffer], { type: 'video/mp4' })
            )
        }
    };

    return loaded ? (
        <>
            <video ref={videoRef} controls></video>
            <br />
            <button onClick={transcode}>Transcode avi to mp4</button>
            <p ref={messageRef}></p>
        </>
    ) : (
        <button onClick={load}>Load ffmpeg-core</button>
    );
}

export default Trimmer;

我已经安装了依赖项，当尝试启动应用程序时，它会抛出以下错误：

index.js:1 ./node_modules/@ffmpeg/ffmpeg/dist/umd/ffmpeg.js 55:4
Module parse failed: Unexpected character '#' (55:4)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   new Error("failed to import ffmpeg-core.js");
|   class i {
>     #e = null;
|     #t = {};
|     #s = {};

1. 反应 - 16.14.0
2. NPM - 6.14.5
3. Babel 加载器 - 8.1.0

Answer 1

您遇到的错误表明 Babel 无法解析

ffmpeg.js

文件中的 JavaScript 代码，因为它包含 Babel 不理解的语法，特别是私有类字段 (

#

)。

要解决此问题，您可以配置 Babel 以从转译中排除

@ffmpeg/ffmpeg

包。您可以通过修改 Babel 配置以忽略某些包来做到这一点。

安装

babel-loader

版本

8.2.3

或更高版本。此版本包括对加载程序配置中的

exclude

选项的支持。

npm install babel-loader@latest

修改您的 webpack 配置以从 Babel 处理中排除

@ffmpeg/ffmpeg

包。您可以通过在

exclude

配置中添加

babel-loader

选项来完成此操作。

// webpack.config.js or any webpack configuration file
module: {
  rules: [
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      exclude: /node_modules\/(?!@ffmpeg\/ffmpeg)/, // Exclude all node_modules except @ffmpeg/ffmpeg
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
        },
      },
    },
  ],
}

通过此配置，Babel 将从转译中排除

@ffmpeg/ffmpeg

包，从而允许在您的应用程序中使用该包，而不会遇到与私有类字段相关的语法错误。

进行这些更改后，重新启动开发服务器并尝试再次运行应用程序。现在应该可以正常工作而不会遇到解析错误。