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

Question

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

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

这个should work，然而，它不是。我用的是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().[=28= 中]

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

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 来解决这个问题。

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

How to use an expression in an import with Babel + Webpack

javascript

node.js

webpack

babeljs