javascript - webpack 别名在 React 类函数中未按预期解析
问题描述
我正在尝试从动态数据对象播放音频文件,但收到以下错误:
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
如下:
...
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')
}
如果我硬编码srcFile
到App.playAudio
,'audio/chewie.mp3'
它可以工作。不确定从这里去哪里。
解决方案
如果您的意图是characterData
用作 API 的模拟,那么快速(但不是真正可扩展的方式)将只需要从characterData
. 您遇到的问题是 webpack 在构建时运行时不知道要为您捆绑什么。如果你需要你没有明确要求的资源,你可以查看 webpack 的require.context
推荐阅读
- node.js - 更新查询在 shell 中工作但不在 nodejs 驱动程序中
- python-3.x - 使用谷歌新闻语料word2vec模型python的句子之间的余弦相似度
- html - 我无法在 CSS 上的表单标签内选择输入提交按钮
- java - 基于搜索字符串的弹性搜索排序
- c# - C# 控制台更改先前命令/输出的颜色
- flutter - Flutter:在 web、android 和 ios 中使用相同的应用程序
- android - 如何在android上创建和链接静态库
- java - Java 应用程序控制台提示符
- quarkus - 当你必须在 quarkus 中实现 `Serializable`
- sql - 尝试将 if 条件放入 r 并在两个变量上创建具有特定条件的新变量