1

尝试导入 MP3 文件时，如下所示：

import audioSrc from "./audio.mp3";

我收到以下错误：

TS2792: Cannot find module './audio.mp3'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

但是，这有效：

const audioSrc = require("./audio.mp3");

以下是重现此问题所需的所有文件。请注意，我正在使用 Webpack 5ts-loader将 Typescript 编译成 Javascript，并且Webpack 文档说file-loader已弃用，而应使用资产模块。

所以，我有两个问题：

  1. 为什么导入 MP3 文件适用于 CommonJS 语法而不适用于 ES6？
  2. 如果可能的话，我如何使用 ES6 语法导入 MP3 文件？
4

2 回答 2

2

在这种情况下，您似乎错过了为资产添加类型是mp3文件。常见的解决方案是types在根目录下创建一个包含已定义文件的目录，asset.d.ts并include在您的配置文件中：

types/asset.d.ts

declare module "*.mp3" {
  const value: any;
  export default value;
}

tsconfig.json

{
  "compilerOptions": {
    //...
  },
  "include": [
    "src/*",
    "types/*"
  ]
}
于 2021-01-20T15:05:00.840 回答
0

您必须添加一个加载器来处理 mp3 文件file-loader，这可以在 webpack 模块规则中像这样完成。

此解决方案适用于 webpack 4。

module: {
  rules: [
    {
      test: /\.mp3$/,
      loader: 'file-loader',
      query: {
        name: 'static/media/[name].[hash:8].[ext]'
      }
    }
  ]
}

你可以通过 es6 模块导入

import mp3File from './file_example_MP3_700KB.mp3';

要使其在 webpack5 上运行：您可以使用

module: {
  rules: [
    {
      test: /\.mp3$/,
      type: "asset/resource",
    }
  ]
}
于 2021-01-20T05:36:28.433 回答