音频文件在汇总构建中不起作用（反应）

Posted 2023-02-25

【中文标题】音频文件在汇总构建中不起作用（反应）

【英文标题】：Audio files do not work in a rollup build (react)

【发布时间】：2021-08-15 15:20:15

【问题描述】：

我正在创建一个带有汇总的 React 库，我已经设法解决了我遇到的所有其他问题，但我无法让音频文件在构建中工作。

在构建目录中。我可以看到导入的音频文件，但是当我运行调用库的应用程序时，音频文件似乎没有链接。

我正在使用@rollup/plugin-url 来管理音频文件。

这是我在主应用程序中遇到的错误 =>

导入音频文件，

import sound from './Sound.mp3'; 
const play = new Audio(sound);

const SoundCom = (alive = true) => 
    const [played, setPlayed] = useState(false);
    
    const playAudio = () => 
        play.play().then(() => console.log('played!'));
    

    useEffect(() => 
        if (!played && !alive) 
            playAudio();
            setPlayed(true);
        
    , [alive, played])

    return (
        <div className='main-styles'>
            .....
        </div>
    ) 

rollup.config.js =>

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import scss from 'rollup-plugin-scss'
import json from '@rollup/plugin-json'
import image from 'rollup-plugin-img'
import url from '@rollup/plugin-url'

import pkg from './package.json'

export default 
  input: 'src/index.js',
  output: [
    
      file: pkg.main,
      format: 'cjs'
    ,
    
      file: pkg.module,
      format: 'es'
    
  ],
  plugins: [
    babel(
      exclude: 'node_modules/**',
      presets: ['@babel/preset-react']
    ),
    resolve(),
    commonjs(
      namedExports: 
        'node_modules/react-countdown-circle-timer/lib/index.js': [
          'CountdownCircleTimer'
        ]
      
    ),
    external(),
    scss(
      output: './dist/style.css',
      failOnError: true,
      runtime: require('sass')
    ),
    image( limit: 100000 ),
    json(),
    url(
      fileName: '[name][extname]',
      include: ['**/*.mp3']
    )
  ],
  external: ['react-dom']

【参考方案1】：

尝试将音频或电影上传到在线云中，然后复制从该云生成的链接。然后，在您的应用程序中实现该链接。

【参考方案2】：

由于某种原因，当我向 url 添加限制时，它开始起作用了。

在 rollup.config.js =>

export default 
  ....
  plugins: [
    ....
    url(
      fileName: '[name][extname]',
      include: ['**/*.mp3'],
      limit: 100000
    )
  ],
  ....