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

【问题标题】：How to use an expression in an import with Babel + Webpack如何在 Babel + Webpack 的导入中使用表达式
【发布时间】：2020-05-11 06:15:48
【问题描述】：

我在 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() 中。

我试图通过使用普通连接而不是模板文字来回避这个问题，但这只会稍微改变 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/core = 7.9.6
Webpack 版本：4.43.0

如何让 Babel 停止这样做？

【问题讨论】：

标签： javascript node.js webpack babeljs

【解决方案1】：

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

【讨论】：