Webpack 与 ES6 模块的暧昧关系

Question

Webpack 原生支持 ES6 模块吗？这是一个简单的问题，但它的答案似乎比我最初想象的要复杂。

• 一方面，Webpack 允许您在 JS 代码中导入模块时使用 ES6 语法。事实上，这是在项目中处理模块化代码的推荐方法。只需看一下文档：

• 然而，另一方面，Webpack自己的配置文件似乎无法原生处理ES6。看看这个 StackOverflow 问题，例如：

以及其已接受且得票最高的答案：

真的吗，Webpack？您本身支持甚至推荐在人们的代码中使用 ES6 模块，但您自己的配置文件不允许这样做？您需要我安装一个插件来处理您自己的配置文件吗？快点。这与我迄今为止与你的经历完全相反。

但这不仅仅是出于美观的原因。有一天，我试图使用 Node 测试我的一些功能，所以我从 Node 的 REPL 导入了一个模块，它告诉我，由于该模块使用 ES6 风格的导入和导出，我需要在中包含

"type":"module"

package.json

。我这样做了，但后来 Webpack 停止工作了，因为

webpack.config.js

没有使用 ES6。

所以我必须从

"type":"module"

中删除

package.json

。现在我计划对我的代码进行一些单元测试，并试图找出现在最好的路线是什么。

为什么，Webpack。为什么。

Answer 1

正如 Estus Flask 在他们对我的问题的精彩评论中指出的那样，Webpack 确实原生支持 ES6 模块。他们只是不在文档示例中使用它。

以下是一些将 Webpack 配置文件更新为 ES6 的提示：

• 在

  "type":"module"

  中添加

  package.json
• 将 CommonJS 模块语法更改为 ES6：

const foo = require("foo");

变成

import foo from "foo";

module.exports = bar;

变成

export default bar;

• 如果您使用的是

  __dirname

  ，现在您必须使用导入它

const __dirname = import.meta.dirname;

就是这样。这对我有用。抱歉胡言乱语。