使用 react-app-rewired-alias 进行 React 生产答案

【问题标题】：React production using react-app-rewired-alias使用 react-app-rewired-alias 进行 React 生产
【发布时间】：2020-08-02 19:55:21
【问题描述】：

我需要从电子应用程序外部导入 mp3 文件。但是 react 不接受 src 之外的导入。这就是我使用 react-app-rewired 和 react-app-rewired-alias 的原因。当电子第一次启动时，我在 appData 文件夹下创建下载目录，然后从那里导入 mp3 文件。我认为在生产中它会尝试在创建下载目录之前导入 mp3 文件。我怎样才能在生产环境中执行它？

顺便说一句，在开发中一切正常，但在生产中我收到一个错误，提示“找不到 userDataPath/downloads 模块。”

//config-overrides.js  (rtp is name of my app.)

const getAppDataPath = require('appdata-path')
const { alias } = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    userDataPath: getAppDataPath() + '/rtp',
  })(config)

  return config
}

// I try to import mp3 files like this:

 <audio
   src={require(`userDataPath/downloads/${currentSongFileId}`)} 
 />

 //package.json scripts

 "dev": "concurrently \"npm start\" \"wait-on http://localhost:3000 && electron .\"",
 "start": "react-app-rewired start",
 "build": "react-app-rewired build",

【问题讨论】：

标签： reactjs webpack electron react-app-rewired

【解决方案1】：

您可以尝试在pre 命令中创建下载目录来启动应用程序吗？喜欢

"prestart": "mkdirp ./app && mkdirp ./app/downloads"

【讨论】：