如何在 Babel + Webpack 的导入中使用表达式

Question

我在 TypeScript 文件中有以下代码：

await import(`@resources/videos/${key}.mp4`)
  .then((mod) => mod.default)
  .catch((err) => console.error('failed to load tutorial', err))

这应该有效，但是，它没有。 我使用的是babel-loader ，而不是ts-loader ，但无论我使用 TS 还是 JS，以及是否使用preset-typescript ，我仍然会遇到同样的问题。

当我运行 Webpack 时，我收到一个错误： Critical dependency: the request of a dependency is an expression 。 通过使用 Babel CLI 编译代码进一步调查发现，我上面编写的表达式编译为：

return Promise.resolve("@resources/videos/".concat(key, ".mp4")).then(function (s) {
  return _interopRequireWildcard(require(s));
}).then(function (mod) {
  return mod.default;
}).catch(function (err) {
  return console.error('failed to load tutorial', err);
});

似乎 Webpack 被 Babel 通过将其转换为.concat()调用并将其包装在Promise.resolve()中来弄乱我的字符串连接这一事实而被绊倒了。

我试图通过使用普通连接而不是模板文字来回避这个问题，但这只会稍微改变 Babel 的 output：

return Promise.resolve("".concat('@resources/videos/' + key + '.mp4')).then(function (s) {
  return _interopRequireWildcard(require(s));
}).then(function (mod) {
  return mod.default;
}).catch(function (err) {
  return console.error('failed to load tutorial', err);
});

我的设置：

• 只用babel-loader编译 TS 和 JS，不用ts-loader
• Babel 预设： env ， typescript ，
• Babel 插件： proposal-optional-chaining 、 proposal-class-properties 、 proposal-object-rest-spread
• Babel 版本： @babel/core = 7.9.6
• Webpack 版本：4.43.0

我如何让 Babel 停止这样做？

Answer 1

我通过将preset-env的modules选项设置为false来解决这个问题。