我想在React.js中使用mediainfo.js而不使用'eject'命令

如何解决我想在React.js中使用mediainfo.js而不使用'eject'命令

我正在尝试将mediainfo.js与React.js一起使用。

看看上面站点的React.js中的用法示例，它是由“ webpack.config.js”设置的。但是，当我使用create-react-app构建环境时，“ webpack.config.js”被包装了，似乎不执行'eject'命令就无法对其进行编辑。

如果您使用npm软件包“ react-app-rewired”，则可以在不执行reject命令的情况下对其进行编辑，所以我尝试了。

// config-override.js (overwrites webpack.config.js)

const { resolve } = require('path');
const copyPlugin = require('copy-webpack-plugin');

const wasmFile = resolve(
  __dirname,'node_modules','mediainfo.js','dist'
);
const dist = resolve('build','static','js');

// template from https://www.npmjs.com/package/react-app-rewired
module.exports = {
  webpack: function(config,env) {
    config.plugins.push(new copyPlugin({
      patterns: [
        { from: wasmFile,to: dist },],}),)
    return config;
  },}

这是整个项目。

https://github.com/ottonove/test_mediainfo

由“ npm run build”生成的那个正常工作，但是当我由“ npm run start”运行它时，发生以下错误。

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d,found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.

还会发出以下警告。

wasm streaming compile Failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

如何设置它与“ npm run start”一起使用？

如果您能教我，我将不胜感激。

解决方法

如果你正在使用 Create React App (CRA)，它现在默认创建一个 serviceWorker，或者如果你因为其他原因有一个 serviceWorker，解决这个问题的一种方法是缓存文件，检测请求的路由，并直接返回缓存文件。

请注意，无论 react-router 是什么，这都可以工作，因为 Service Worker 会在请求到达您的应用程序之前拦截它。无需在您的应用中修改任何路由。哎呀，如果我没有 Service Worker，我可能还会这样解决！

首先，将 WASM 文件从项目的顶层复制到 /public 文件夹：

cp ./node_modules/mediainfo.js/dist/MediaInfoModule.wasm ./public

然后使用如下所示的内容修改 Service Worker 脚本的“fetch”函数（如果您有现有的“fetch”侦听器，则需要以类似方式修改逻辑：

const mediaInfoModuleWasm = './MediaInfoModule.wasm'

self.addEventListener('install',event => {
  event.waitUntil(caches.open('v1').then(cache => cache.addAll([ mediaInfoModuleWasm ])))
})

self.addEventListener('fetch',event => {
  const route = event.request.url.replace(/^[a-z]{4,5}:\/{2}[a-z]{1,}:[0-9]{1,4}.(.*)/,'$1')
  if (route === 'static/js/MediaInfoModule.wasm') {
    event.respondWith(caches.match(mediaInfoModuleWasm))
  }
})

这首先通过侦听服务工作者的“安装”事件并使用标准 StorageCache 模式缓存本地文件来加载您放入 /public 的 MediaInfoModule.wasm 文件。我们侦听 'fetch' 事件，去除协议、域和端口（因为您可能会在多个位置运行此服务），然后返回缓存文件。

我们检查的 static/js/MediaInfoModule.wasm 网址是什么？这是 mediainfo.js 工厂请求的 URL。仔细检查您的设置是否相同的最佳方法是查看调试器的“网络”选项卡以查看所请求的 MediaInfoModule.wasm 网址。

我使用“ WebWorker”解决了该问题。

<label>Use 300Hz audio track instead of 800Hz <input type="checkbox"></label><br>
<video controls></video>

整个项目在这里。

https://github.com/ottonove/test_mediainfo/blob/webworker/config-overrides.js