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';等格式。在那里设置一个名为ding.js的模块（基本上是noop模块），并在webpack的一侧使用resolve.alias将导入映射到mp3文件。你最终会

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

排除导入w / Babel？

1 个答案: