如何让 Webpack 识别动态导出

Question

我在使用 Webpack v4 构建时看到以下警告（对 JS 文件使用 babel-loader）：

Warning in ./src/components/Foo
"export 'ADDENDUM' was not found in '../../types'
...

./src/components/Foo 中的导入是：

import { ADDENDUM } from '../../types';

../../types：

import { each } from 'lodash';

export const typesDict = {
  ADDENDUM: 'addendum',
};

each(typesDict, (type, typeConstant) => {
    exports[typeConstant] = type;
});

这不会导致构建错误，只是一个警告。但警告是错误的，因为我正在导出 ADDENDUM（虽然是动态的），并且一切正常。

有没有办法让 Webpack 处理这些动态导入，或者至少关闭警告？我现在正在从 Webpack v1 升级，v1 没有这个问题（或者如果有，它被某种方式隐藏了）。

另外请注意：我不想让所有 Webpack 警告静音，例如 via the devServer config。我只想让这种类型的警告静音。

Answer 1

根据您的../../types 文件，我假设您的方法是跳过再次写入exports 对象中的组件。

不要让警告静音，而是尝试更简单的方法来解决问题。由于您不想写两次相同的名称，请看一下我的示例。

不需要lodash，不使用循环，导出的常量只写一次。

../../types：

export const ADDENDUM = 'addendum';
export const ADDENDUM2 = 'addendum2';
export const ADDENDUM3 = 'addendum3';

就是这样，没有更多的动态导入，没有更多的警告。

更新：

您的代码确实有效，但是当您使用动态导出/导入时，编译器/捆绑程序会丢失导出的痕迹（在您的情况下），因为它们不检查导出对象的内容，因此您会收到警告，因为编译器（babel）没有在你的代码中找到exports.ADDENDUM，只有你知道它在那里，因此编译器认为你正在使用一个不存在的组件。

在导入时，情况是一样的，当类似require('/path/to/' + someVar + '/some.file.js') 时，webpack 会发出相同类型的警告，因为 webpack 想从中生成一个块，但这不是 webpack 的完整路径和它找不到该文件，因为它是一个串联字符串（动态导入）。 （我不知道这些年来这是否发生了变化，但我相信你也非常了解/知道这一点）