我在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的输出：
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停止这样做？
我通过将preset-env的modules选项设置为false来修复此问题。