ES6 模块导入不适用于 MP3 文件

Question

尝试导入 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");

Here are all the files needed to reproduce this problem. Note that I'm using Webpack 5 with ts-loader to compile Typescript into Javascript, and that the Webpack documentation 表示 file-loader 已弃用，应改用资产模块。

所以，我有两个问题：

为什么导入 MP3 文件适用于 CommonJS 语法但不适用于 ES6？
如果可以的话，如何导入ES6语法的MP3文件？

Answer 1

你必须添加一个加载程序来处理 file-loader 的 mp3 文件，这可以在 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",
    }
  ]
}

Answer 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/*"
  ]
}

ES6 模块导入不适用于 MP3 文件

ES6 module import doesn't work with MP3 files

typescript

webpack

webpack-5