排除有通货膨胀的进口？

Question

我的应用程序是使用Webpack + Babel进行编译的React JSX / ES6。 我的测试套件是Tape + Shallow Render，到目前为止，我已经能够通过babel-node （和babel-istanbul ）运行所有内容，而无需运行Webpack和浏览器或无头浏览器。

然后我需要一项资产。 具体来说是.mp3 。

我所拥有的基本上是：

import ding from '/sounds/ding.mp3';
...
<audio src={ding} autoPlay={true} />

这在开发和生产中都有效，但是如果没有Webpack（和file-loader ），它就会崩溃：

/Users/orbiteleven/project/client/sounds/ding.mp3:1
(function (exports, require, module, __filename, __dirname) { ID3
                                                                 ^
SyntaxError: Unexpected token ILLEGAL

有没有办法排除通过Babel进口的商品（或其他方法）？ ignore并不能解决问题，因为它只会阻止Babel解析文件，但无论如何都要包含它。

我希望不必包括Karma + PhantomJS / Chrome / Electron / Whatever之类的东西的复杂性（和缓慢性）。

Answer 1

import ding from '../sounds/ding';将导入更改为类似import ding from '../sounds/ding';的格式import ding from '../sounds/ding'; 。 建立一个名为模块ding.js有（空指令模块基本）和使用resolve.alias上的WebPack的身边进口映射到MP3文件。 你最终会得到

resolve: {
  alias: {
    '../sounds/ding': PATHS.ding
  }
}