javascript - webpack 别名未按 React 类函数中的预期解析

Question

我尝试从动态数据对象播放音频文件，但收到以下错误:

App.js:12 Uncaught Error: Cannot find module "."
  at webpackMissingModule (App.js:12)
  at App._this.playAudio (App.js:12)
  at onClick (App.js:29)
  at HTMLUnknownElement.callCallback (react-dom.development.js:100)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
  at Object.invokeGuardedCallback (react-dom.development.js:187)
  at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
  at executeDispatch (react-dom.development.js:466)
  at executeDispatchesInOrder (react-dom.development.js:488)
  at executeDispatchesAndRelease (react-dom.development.js:586)
  at executeDispatchesAndReleaseTopLevel (react-dom.development.js:597)
  at forEachAccumulated (react-dom.development.js:567)
  at runEventsInBatch (react-dom.development.js:728)
  at runExtractedEventsInBatch (react-dom.development.js:737)
  at handleTopLevel (react-dom.development.js:4201)
  at batchedUpdates (react-dom.development.js:12537)
  at batchedUpdates (react-dom.development.js:1939)
  at dispatchEvent (react-dom.development.js:4282)
  at interactiveUpdates (react-dom.development.js:12592)
  at interactiveUpdates (react-dom.development.js:1958)
  at dispatchInteractiveEvent (react-dom.development.js:4259)

这是我的App.js

import React, { Component } from 'react';
import styles from './App.scss';
import characterData from 'api/characterData';

class App extends Component {
  state = {
    characters: [...characterData]
  }

  playAudio = srcFile => {
    const importedAudioFile = require(srcFile);
    const characterAudio = new Audio(importedAudioFile);
    characterAudio.play();
  }

  render() {
    return (
      <div className={styles.characterCard}>
        {this.state.characters.map(({ audio, name }) => {
          return (
            <div
              className={styles.characterCard}
              key={name}
              onClick={() => this.playAudio(audio)}
            >
              <h3>{name}</h3>
            </div>
          )
        })}
      </div>
    );
  }
}

export default App;

characterData.js 看起来像这样:

export default [
    {
        name: 'Chewbaca',
        hp: 120,
        strength: 5,
        image: 'images/chewie.jpg',
        audio: 'audio/chewie.mp3'
    },
    {
        name: 'Darth Vader',
        hp: 150,
        strength: 7,
        image: 'images/darth.png',
        audio: 'audio/darthbreath.mp3'
    },
    {
        name: 'Princess Leia',
        hp: 160,
        strength: 8,
        image: 'images/leia.jpg',
        audio: 'audio/leiasound.mp3'
    },
    {
        name: 'Obi Wan Kenobi',
        hp: 115,
        strength: 6,
        image: 'images/obiwan.png',
        audio: 'audio/obisound.mp3'
    },
];

我的文件夹结构如下:

└── src
    ├── api
    ├── audio
    |  ├── chewie.mp3
    |  ├── darthbreath.mp3
    |  ├── leiasound.mp3
    |  ├── obisound.mp3
    |  └── tie.mp3
    ├── components
    ├── containers
    |  └── App
    ├── images
    ├── index.js
    ├── styles
    └── utils

我从create-react-app中弹出，两个webpack配置几乎相同，除了实现sass-loader和对resolve的编辑。别名 看起来像:

...
alias:  {
  // Support React Native Web
  // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
  'react-native': 'react-native-web',

  // Custom Aliases
  ...aliases
},
...

const aliases = require('./aliases'); 位于我的每个 webpack 配置的顶部，aliases.js 如下所示:

const path = require('path');

module.exports = {
  'api': path.resolve('src/api'),
  'audio': path.resolve('src/audio'),
  'components': path.resolve('src/components'),
  'containers': path.resolve('src/containers'),
  'images': path.resolve('src/images'),
  'variables': path.resolve('src/styles/variables.scss'),
  'mixins': path.resolve('src/styles/mixins.scss')
}

如果我将 App.playAudio 中的 srcFile 硬编码为 'audio/chewie.mp3'，它就可以工作。不确定从这里去哪里。

Answer 1

如果您打算使用characterData作为 API 的模拟，快速(但不是真正可扩展的方式)是只需要从 characterData 导出的音频文件。 。您遇到的问题是 webpack 在构建时运行时不知道要为您捆绑什么。如果您需要未明确需要的资源，您可以查看 webpack 的 require.context