当文件导入另一个命名导出时，ES6 动态导入失败答案

【问题标题】：ES6 Dynamic Import is failing when the file imports another named export当文件导入另一个命名导出时，ES6 动态导入失败
【发布时间】：2019-05-14 08:03:08
【问题描述】：

我有一个名为a.js的文件：

a.js:

import { set } from 'lodash';
import { myFunc } from '../helpers';

export default 'hello';

然后我在b.js中动态导入上述文件（a.js）：

const aFile = await import('a.js');

当我对上面的文件进行 webpack 时，我收到如下错误：Can't resolve 'fs'、Can't resolve 'cldr'、Can't resolve 'cldr/supplemental'、Can't resolve 'cldr/event'、Can't resolve 'cldr/supplemental'、Can't resolve 'net'、Can't resolve 'dns'。

但是当我从a.js 中删除import { myFunc } from '../helpers'; 时，webpack 运行得非常好。我很肯定路径 ../helpers 存在，myFunc 是 ../helpers 文件中的命名导出。

为什么当我删除该行时 webpack 构建通过但否则它会失败？

【问题讨论】：

helpers.js 是否导入 fs、cldr 等？
哦，这很好。我的 helpers.js 文件正在导入许多其他模块，这些模块可能正在导入 fs、cldr 等。我将 myFunc 从“helpers”移动到一个单独的文件，它现在可以工作了。非常感谢！您可以将您的答案添加为答案，我可以接受。
好的，我继续写了一个答案以及我之后的建议。祝你好运。在我看来，Webpack 很难配置。

标签： javascript webpack

【解决方案1】：

查看 helpers.js 文件是否正在导入 fs、cldr 等。尝试将 myFunc 从 helpers.js 移动到单独的文件中，看看是否可以解决问题。

如果这不能解决问题，请尝试在您的 wepback 配置中指定 target: 'node'，如下所示：

target: 'node',
node: {
  fs: 'empty',
  net: 'empty',
  ...
  dns: 'empty',
}

target: 'node' 选项告诉 webpack 不要接触任何内置模块，如 fs 或 net。我不确定为什么，但添加 'empty' 字符串似乎也可以修复 Can't resolve 错误，具体取决于您的配置。

见这篇文章：https://jlongster.com/Backend-Apps-with-Webpack--Part-I 还有github问题：https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285600188

我遇到了类似的问题，这似乎有助于我解决问题。 Webpack 很棘手。

【讨论】：