我想在 React.js 中使用 mediainfo.js 而没有“eject"命令 [英] I want to use mediainfo.js in React.js without 'eject' command

问题描述

我正在尝试将 mediainfo.js 与 React.js 结合使用.

I'm trying to use mediainfo.js with React.js.

看上面站点的React.js中的用法示例，是通过webpack.config.js"设置的.但是，当我使用 create-react-app 构建环境时，webpack.config.js"被包裹了，好像不执行'eject'命令就不能编辑了.

Looking at the usage example in React.js of the above site, it is set by "webpack.config.js". However, when I build the environment using create-react-app, "webpack.config.js" is wrapped and it seems that it can not be edited without executing the 'eject' command.

如果你使用npm包react-app-rewired"，不执行reject命令就可以编辑，所以我试了一下.

If you use npm package "react-app-rewired", you can edit it without executing the reject command, so I tried it.

// 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"运行它时，出现以下错误.

The one generated by "npm run build" works normally, but when I run it by "npm run start", the following error occurs.

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"一起使用?

How do I set it to work with "npm run start"?

如果你能教我，我将不胜感激.

I would appreciate it if you could teach me.

推荐答案

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

If you are using Create React App (CRA), which now creates a serviceWorker by default, or if you have a service worker for some other reason, one way to fix this is to cache the file, detect the requested route, and return the cached file directly.

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

Note that this will work regardless of react-router, since the service worker intercepts the request before it even gets to your app. There is no need to modify any routing in your app. Heck, if I didn't have a service worker, I'd probably still solve it this way!

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

First, copy the WASM file to the /public folder, from the top level of your project:

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

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

Then modify your service worker script's 'fetch' function with something like what follows (if you have an existing 'fetch' listener, you'll need to modify the logic in a similar manner:

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' 事件，去除协议、域和端口(因为您可能会在多个位置运行此服务)，然后返回缓存文件.

This first loads the MediaInfoModule.wasm file you put into /public by listening for the service worker's 'install' event and using the standard StorageCache patterns to cache a local file. The we listen for the 'fetch' event, strip off the protocol, domain and port (since you may run this service in several locations) and then return the cached file.

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

What's the static/js/MediaInfoModule.wasm URL we check for? That's the URL that is requested by the mediainfo.js factory. The best way to double check if that's the same for your setup is to look in the Network tab of your debugger to see the requested URL for MediaInfoModule.wasm.

这篇关于我想在 React.js 中使用 mediainfo.js 而没有“eject"命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！