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

Question

我正在尝试将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”一起使用？

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

Answer 1

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

// config-override.js

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

const devMode = process.env.NODE_ENV !== 'production'

const wasmFile = resolve(
  __dirname,
  'node_modules',
  'mediainfo.js',
  'dist',
  'MediaInfoModule.wasm'
);

const dist = devMode ? '.' : resolve(__dirname);

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.worker\.js$/,
    use: { loader: "workerize-loader" },
  });

  const wasmExtensionRegExp = /\.wasm$/;

  config.resolve.extensions.push(".wasm");

  config.module.rules.forEach((rule) => {
    (rule.oneOf || []).forEach((oneOf) => {
      if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
        // Make file-loader ignore WASM files
        oneOf.exclude.push(wasmExtensionRegExp);
      }
    });
  });

  config.module.rules.push({
    test: wasmExtensionRegExp,
    include: path.resolve(__dirname, "src"),
    use: [{ loader: require.resolve("wasm-loader"), options: {} }],
  });

  config.plugins.push(new CopyPlugin({
    patterns: [
      { from: wasmFile, to: dist },
    ],
  }),)

  return config;
};

整个项目都在这里。

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