javascript - 'unknown exports provided' 在 webpack 的输出文件中的含义

Question

当我在 webpack.config.js 中将 output.pathinfo 设置为 true 时，我在输出文件中得到了每个捆绑模块的深奥描述:

/* unknown exports provided */

这是什么意思？

编辑:

我一直在从 typescript 中转译代码，这导致 webpack 无法识别导出(但它能够推断出使用了哪些导出)。我调整了我的 typescript 配置来解决这个问题(我已经将 module 选项设置为 ES2015)。

Answer 1

output.pathinfo向每个模块添加注释以帮助您识别它们及其导出。您会看到模块的路径存在，并且在其上方显示模块的导出以及实际使用的模块。当模块没有导出时，它将显示 unknown exports provided。

考虑以下三个文件的示例。

index.js(入口点)

import { one } from './module';
import printNumber from './otherModule';

printNumber(one);

module.js

export const one = 1;
export const two = 2;
export const three = 3;

export default () => console.log('default export');

otherModule.js

export default number => console.log(`The number is ${number}`);

export const notUsed = 'not used';

在 index.js 中没有导出，注释反射(reflect)了这一点。由于它没有导出，因此自动意味着使用所有导出。

/* unknown exports provided */
/* all exports used */
/*!******************!*\
  !*** ./index.js ***!
  \******************/

另一方面，module.js 有四个导出:default、one、two 和 三。在这些导出中，只有 一个 被用于 webpack 包含的任何文件中(在这种情况下，它只被导入到 index.js 中)。评论告诉我们这一点。

/* exports provided: one, two, three, default */
/* exports used: one */
/*!*******************!*\
  !*** ./module.js ***!
  \*******************/

类似地，otherModule.js 有两个导出 default 和 notUsed，其中仅使用默认导出(同样在 index.js 中)。 js).

/* exports provided: default, notUsed */
/* exports used: default */
/*!************************!*\
  !*** ./otherModule.js ***!
  \************************/

请记住，import X from 'module' 会从 module 导入默认导出并为其分配名称 X。

---

此信息在开发过程中很有用，可以查看在整个应用程序中实际使用了哪些导出。在所示示例中，很容易看出正在使用什么，但在更大的应用程序中，您可能会发现此功能很有用。

注意:当您使用任何消除死代码的工具(例如 UglifyJS)对其进行优化时，未使用的导出将从包中删除。